Application wide constants in Angularjs

Question

We have an API that requires an application id be included with every request. I'd like for this id to be accessible in every controller and I'd ideally like to only set it once. I can set it at the top level by doing:

angular.module('applicationName', 
['controller1', 'controller2', 'controller3'])
.constant('APPLICATION_ID', '12345abcde');

But I'd like to be able to access it in controller1/2/3. What's the best way to set the APPLICATION_ID variable so it's available in all components of the application?

I'd rather not have to inject a 64 character api key into every controller (there will be many more than three). I was hoping there's a more DRY way to do it. — biagidp
– biagidp, Commented Jan 26, 2015 at 19:02
Why exactly do you need it in every controller? For logging? Then decorate the $log service. To include in every HTTP request made by the application? Then modify the defaults of the $http service. If you need it in every controller then injection into each controller is the right answer. If you need it for other reasons then there are other answers. — John Bledsoe
– John Bledsoe, Commented Jan 26, 2015 at 19:11
@JohnBledsoe It's for making API calls, so modifying $http defaults might be a better option. Resources that discuss the topic would be most appreciated. — biagidp
– biagidp, Commented Jan 26, 2015 at 19:13
docs.angularjs.org/api/ng/service/$http - See the "Setting HTTP Headers" section — John Bledsoe
– John Bledsoe, Commented Jan 26, 2015 at 19:16

Scott · Accepted Answer · 2015-01-26 19:21:12Z

2

      angular.module('applicationName', 
         ['controller1', 'controller2', 'controller3'])
         .constant('APPLICATION_ID', '12345abcde');

And then in your controller

      application.controller('myController', 
                        ['$scope','APPLICATION_ID',function($scope,applicationId)               
      {

         console.log("app id="+applicationId);

      }]);

edited Jan 26, 2015 at 19:21

answered Jan 26, 2015 at 19:02

Scott

1,6904 gold badges13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

biagidp Over a year ago

How do I do this when I need to pass in $scope? I'm getting "Can't assign to read only attribute" errors on all properties of $scope when I try function($scope, applicationId)

Scott Over a year ago

I updated the example answer. You just pass in $scope and anything else you want as I've shown above.

SaoBiz · Accepted Answer · 2016-05-06 01:11:07Z

Since you need to send the Application_ID with every request to your api, as mentioned in the comments, you can modify the $http service to add the ID.

Define the constant

angular.module('myModule')
  .constant('APPLICATION_ID', 'foobarbaz');

Inject the constant into your $http service to send with every request.

angular
  .module('myModule')
  .config(httpConfig);

httpConfig.$inject = ['$httpProvider', '$provide'];

function httpConfig($httpProvider, $provide) {
  $provide.factory('httpInterceptor', ['APPLICATION_ID', function (APPLICATION_ID) {
    return {
      request: function (config) {
        // APPLICATION_ID can now be used in all your requests
        // Example:
        // To URL: GET /api/v1/users?appid=foobarbaz
        if (config.mehtod === 'GET') {
          var sep = config.url.indexOf('?') === -1 ? '?' : '&';
          config.url = config.url + sep + 'appid=' + APPLICATION_ID;
        }

        return config;
      }
    };
  }]);
}

$httpProvider.interceptors.push('httpInterceptor');

Now you can use the Application_ID in all of your requests without the need to inject it into all of your controllers.

Resources

https://docs.angularjs.org/api/ng/service/$http

See section 'Setting HTTP Headers' on how to modify the headers sent
See section 'Interceptors' for a more detailed example than the one above

Collectives™ on Stack Overflow

Application wide constants in Angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related