AngularJS Read web.config value

Question

I have an angularjs factory service which call a REST service. My issue is at present the REST url is hardcoded in factory service. I want to remove this hardcoding

(function () {
'use strict';

var auctionServices = angular.module('auctionService', ['ngResource']);


//TODO: USE BASE URL SO THAT CAN POINT TO LOCALHOST OR ACTUAL WEB SERVER
var baseUrl = "http://localhost:5037";

auctionServices.factory('auctions', ['$resource', function ($resource) {

    return $resource(baseUrl + '/services/rest/auctions', {}, {
        filter: {
            url: baseUrl + '/services/rest/auctions?location=:location&status=:status',
            isArray: true,
            params: { location: '@location', status: '@status' },
            withCredentials: true,
            cache: false
        },

My issue is with the below line

var baseUrl = "http://localhost:5037";

I need to set baseUrl value from web.config or please help me with any other better approach.

Solution 1

If your problem is to move all your global configurations in a single file you can use constant: create a config.js file like this:

angular.module('myApp').constant('configs', {
  baseUrl: 'http://localhost:5037'
})

Then in your factory inject configs:

auctionServices.factory('auctions', ['$resource', 'configs', function ($resource, configs){
}

configs.baseUrl contains your url

Solution 2

If your app is served at "http://localhost:5037" you could just do

$resource('/services/rest/auctions')

or

$resource('/user/:userId/card/:cardId')

Unless you are serving cross domain OR your app and REST API path differs.

In that case you could put the baseUrl as

module.value('APP_CONTEXT',{}).
module.run(function($location, APP_CONTEXT)) {
  var baseUrlConstuct = null;
 //your logic here to get the domain name from 
 //$location.path() and construct a base url.

  APP_CONTEXT.baseUrl = baseUrlConstuct;

} 

Then in your factories

auctionServices.factory('auctions', 
        ['$resource', 'APP_CONTEXT', function ($resource, APP_CONTEXT) {

     return $resource(APP_CONTEXT.baseUrl + '/services/rest/auctions', {}, {
     }
}

I might suggest to use Restangular - all this is done pretty neatly for you including other gooodies.

Solution 3

We configure it in config.js file, among other things we do this

//custom config settings
var appServicesHostName = "http\\://localhost\\:62784/api";
var memberServicesHostName = "http\\://localhost\\:48089";
var coverageServiceHostName = "http\\://localhost\\:5841";


var config = {
    appServicesHostName: appServicesHostName,
    memberServicesHostName: memberServicesHostName,
    coverageServiceHostName: coverageServiceHostName,
};

app.value("config", config);

Then you can just inject it into your services, something like this

angular.module('app').factory(serviceId,
        ['$q', '$http', 'config', 'Dependents', inRelatedInsuredEditDataSvc]);

This answers your question, BUT you are still hardcoding parts of URL. Better way is to configure your routes and name them. They you can move your routes, change them without having to change them all over the place. Example, in config.route.js

(function () {

    'use strict';

    var app = angular.module('app');

    // Collect the routes
    app.constant('routes', getRoutes());

    // Configure the routes and route resolvers
    app.config(['$routeProvider', 'routes', routeConfigurator]);

    function routeConfigurator($routeProvider, routes) {

        routes.forEach(function (r) {
            $routeProvider.when(r.url, r.config);
        });

        $routeProvider.otherwise({ redirectTo: '/insureds/search' });
    }

    // Define the routes 
    function getRoutes() {
        return [
            {
                name: 'InsuredsSearchView',
                url: '/insureds/search',
                config: {
                    templateUrl: 'app/insured/search/inSearch.html',
                    reloadOnSearch: false,
                    settings: {}
                }
            },
            {
                name: "InsuredCallLogAdd",
                url: '/insureds/:insuredId/callLogs/add',
                config: {
                    templateUrl: 'app/insured/callLog/edit/inCallLogEdit.html',
                    reloadOnSearch: false,
                    settings: {}
                }
            }
    }

})();

As you can see we name each route and refer to it by name, rather than hardcoding the urls all over the place. All you need now is a service to give the route, like this

(function () {
    'use strict';

    var serviceId = 'routesSvc';

    angular.module('app').factory(serviceId, ['$location', 'routes', routesSvc]);

    function routesSvc($location, routes) {
        // Define the functions and properties to reveal.
        var service = {
            getPath: getPath,
            navigateTo: navigateTo,
            getTemplateUrl: getTemplateUrl
        };

        return service;

        function getPath(routeName, routeParameters) {

            var route = _.findWhere(routes, { name: routeName });

            if (route == undefined) {
                //EP: finish - use $log and throw error
                console.log("route: " + routeName + " does not exist");
             }

            var qParameterKeys = [];

            var path = route.url;

            for (var key in routeParameters) {
                if (path.indexOf(":" + key) == -1) {
                    qParameterKeys.push(key);
                } else {
                    path = path.replace(":" + key, routeParameters[key]);
                }
            }

            if (qParameterKeys.length > 0) {
                path = path + "?";

                key = qParameterKeys[0];
                var item = routeParameters[key];
                var value = angular.isObject(item) ? angular.toJson(item) : item;

                path = path + key + "=" + value;

                for (var i = 1; i < qParameterKeys.length; i++) {
                    key = qParameterKeys[i];
                     item = routeParameters[key];
                     value = angular.isObject(item) ? angular.toJson(item) : item;
                     path = path + '&' + key + "=" + value;
                }

            }
            return path;
        }

        function navigateTo(routeName, routeParameters) {
            $location.url(getPath(routeName, routeParameters));
        }

        function getTemplateUrl(routeName) {
            var route = _.findWhere(routes, { name: routeName });

            if (route == null) throw (routeName + " is not defined in config.route.js");

            return route.config.templateUrl;

        }
    }
})();

and then you can use it like this

<a data-ng-href="#{{getPath('BatchDefaultView',{batchId:result.batchId})}}">

See, no hardcoded url

and if you need other information about route or templates, you can even make it available through scope, like this

(function () {
    'use strict';

    var app = angular.module('app');

    app.run(function ($rootScope, routesSvc) {

        $rootScope.getPath = function (routeName, parameters) {
            return routesSvc.getPath(routeName, parameters);
        };

        $rootScope.navigateTo = function(routeName, parameters) {
            routesSvc.navigateTo(routeName, parameters);
        };

        $rootScope.getTemplateUrl = function(routeName) {
           return routesSvc.getTemplateUrl(routeName);
        };
    });
})();

Hope this helps you keep it clean.

Comments

[toddmo]

In the .net world, anything in js is still considered "hard coded". Only stuff in the web.config is not hard coded.