How to set up AngularJs SPA Urls to be read out of web.config

Question

I have AngularJS controllers and services that is referring a part of code that is hosted in server 1. So, to get or post data I have referring the

var getUsers = $resource('http://localhost:2211/projectname/users/getusers', 
{
    id: viewModel.user.Id
}); 

getUsers.get(function (result: users.usersResource)
{
   if(result != null)
   {
       $scope.viewModel.firstName = result.firstName; 
   }
}

My question is how do I set up web.config file to hold the urls referred above and call it from my controllers or service page instead of hard coding the urls every time I am doing post or get.

Please help.

Answer 1

As far as I know, you cannot get web.config information from client site (javascript etc.). Therefor you cannot make angular look into the web.config to get the urls.

If you want a object/list of urls that your can refer to in angular - like your $ressource url - and the urls needs to be stored codebehind, either in web.config or code, then I would suggets to create a handler returning a angular constant with the values set from it.

Solution 1 (server side)

Here is an example:

namespace App.Handlers
{
    public class ApiUrls : IHttpHandler
    {
        public class UrlItems
        {
            // Properties here doesn't need to be const. They can be taken from the web.config it you want to
            public string GetUsers = "http://localhost:2211/projectname/users/getusers";
            public string AddUser = "http://localhost:2211/projectname/users/add";
            public string UpdateUser = "http://localhost:2211/projectname/users/update";
        }

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/javascript";

            var serializer = new JavaScriptSerializer();
            var script = string.Format(@"
                (function() {{

                    'use strict';

                    angular
                        .module('YOUR_MODULE_NAME_HERE')
                        .constant('ApiUrls', {0});
                }})();
            ",
            serializer.Serialize(new UrlItems()));

            context.Response.Write(script);
        }
    }
}

And then some code in the web.config to you can include the file in your html file:

<system.webServer>
    <handlers>
        <add path="/js/ApiUrls.js" name="App.Handlers.ApiUrls" type="App.Handlers.ApiUrls, App, Version=1.0.0.0, Culture=neutral" verb="GET" />
    </handlers>
</system.webServer>

Then you can just inject that constant in your controller, service, factory etc. and get the values from that:

angular
    .module('YOUR_MODULE_NAME_HERE')
    .controller('UserController', ['ApiUrls', function(ApiUrls) {

        var getUsers = $resource(ApiUrls.GetUsers, 
        {
            id: viewModel.user.Id
        });     

    }]);

Solution 2 (only client side)

Or more simple, if you just want the list of urls but don't care if they are stored in codebehind or client side, then just add the angular constant and include it in your html and forget the handler. Then just create a js file with something like below included.

(function() {
    'use strict';

    angular
        .module('YOUR_MODULE_NAME_HERE')
        .constant('ApiUrls', { 
            GetUsers: "http://localhost:2211/projectname/users/getusers", 
            AddUser: "http://localhost:2211/projectname/users/add", 
            UpdateUser: "http://localhost:2211/projectname/users/update" 
        });
})();

then include the file in your html file

<script src="/StaticFiles/ApiUrls.js"></script>

Just remember, that if you change the property name in the code to something else, then you still need to change it in angular also.

I hope that I could help :)