7

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.

CodyBugstein
  • 21,984
  • 61
  • 207
  • 363

3 Answers3

12

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.
]);
CrazyGeek
  • 3,397
  • 2
  • 24
  • 38
  • If `AppName` has other modules injected into it, can I use the constant `REST_END_POINT` in those modules too? – CodyBugstein Jan 02 '15 at 12:32
  • 1
    If you are working on AppName module as your project and having different set of injected modules than this REST_END_POINT service can be used within the AppName only because REST_END_POINT service is created under AppName module so It can not be access outside. If you really want to use this in different modules than you should create a different module named as RestApp which will have the REST_END_POINT service So finally you can inject RestApp module where ever you want just like other modules. – CrazyGeek Jan 03 '15 at 08:28
  • What I ended up doing, was, as CrazyGeek described, created a new module, that contained all different types of constants, and injecting it into each module that needs it – CodyBugstein Jan 05 '15 at 13:36
0

I do use request interceptor for this

csapp.factory('MyHttpInterceptor', [function () {

        var requestInterceptor = function (config) {

            var prefix = "http://api.example.com";

            if (config.url.indexOf("/api/") !== -1) {
                config.url = prefix + config.url;
            }
       }
}]);

configure this intercept in app.config like 

csapp.config(["$httpProvider", function($httpProvider) {
        $httpProvider.interceptors.push('MyHttpInterceptor');
});

now all your api requests would be prefixed with api.example.com.

harishr
  • 17,807
  • 9
  • 78
  • 125
0

$location.host() is the client browser's 'prefix.domain.suffix' You can inject $location into whatever scope or service.

angular.module('app',[]).run(function($rootScope, $location){
  $rootScope.host = $location.host();
})

Plunk: http://plnkr.co/edit/gDgrlwZFyWNKUJgbHHKj?p=preview

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
  </head>
  <body>
    <i>Host:</i>
    <h1>{{host}}</h1>
    <script>
      angular.module('app',[]).run(function($rootScope, $location){
        $rootScope.host = $location.host();
      });
    </script>
  </body>
</html>
irth
  • 1,696
  • 2
  • 15
  • 24
  • 1
    CrazyGeek answered your question more precisely, I'm just saving you the step of needing to change the host manually. – irth Jan 01 '15 at 20:45
  • THanks for the cool tip. I won't use this solution exactly but good to know about – CodyBugstein Jan 02 '15 at 12:31