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.