What's the best way to store URLs, or URL domains, in AngularJS app?

Question

My AngularJS app makes calls to an API which is currently hosted at one service, but was previously hosted at a different one, and in the near future is likely to be hosted yet somewhere else.

The URL is regularly changing. For example from

myfirst.heroku.com/app/user/mike/profile

to

mysecond.bluemix.com/app/user/mike/profile

etc.

Instead of changing the URL in every location everytime, I want to just have to change the part before the /app....

In an Angular App what is the best way to do this?

NOTE: Many of the URLs I use throughout the app, are in modules that are added as dependencies to my main app. So Module1 and Module2 both use the URL in their controllers and resources and are then included in MainApp. So a good solution for me needs to be accessible to all dependee apps. Is that possible.

Answer 1

I would like to suggest you that you must use angular constant, Its similar to a service but it creates a constant value which can be inject everywhere in our angular project.

This is how we can create constant

Constant service:

angular.module('AppName')
 .constant('REST_END_POINT', 'https://rest.domain.com/');

Usages in controller:

angular.module('AppName')
 .controller('CTRL_NAME', ['REST_END_POINT', '$scope', function(REST_END_POINT, $scope){
      //your business logic.
]);