AngularJS - Getting Module constants from a controller

Question

I'm trying to build a myApp.config module to store some settings for my app, I wrote a config.js file:

angular.module('myApp.config', [])
    .constant('APP_NAME','My Angular App!')
    .constant('APP_VERSION','0.3');

I added it to my app.js (angular-seed):

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'myApp.config']).

I added it to the index.html file, and now I'm trying to figure out how to get it in my controllers, I tried:

angular.module('myApp.controllers', ['myApp.config'])
  .controller('ListCtrl', ['$scope', 'myApp.config', function($scope, $config) {
    $scope.printme = $config;
  }])

but I'm getting:

Unknown provider: myApp.configProvider <- myApp.config

I'm probably doing something wrong here, any ideas ?

Asaf you tried to inject a module as a dependency in a controller, which will not work. A module can be a dependency of another module only. — Shiv
– Shiv, Commented Mar 24, 2017 at 16:12

mfelix · Accepted Answer · 2013-06-29 19:33:18Z

88

I don't think it is valid to use the module name in an injection like that. You can simply inject the constants by name, though:

angular.module('myApp.controllers', ['myApp.config'])
  .controller('ListCtrl', ['$scope', 'APP_NAME', function($scope, appName) {
     $scope.printme = appName;
}]);

answered Jun 29, 2013 at 19:33

mfelix

1,83417 silver badges18 bronze badges

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

3 Comments

jpsimons Over a year ago

Correct, there's one global dependency injection space, once you set up a .constant in any module you can inject the value anywhere else.

Asaf Over a year ago

Is it generally a sensible way to have a config file (for customizable settings) in Angular?

crucifery Over a year ago

@Asaf you can go with the following .constant service. angular.module('app').constant('appSettings', { version: '1.0', appName: 'myApp'}); Then inject it to a controller or .config or whatever you want like

angular.module('app').controller('simpleCtrl', ['appSettings', function(appSettings) { $scope.valueInIsolatedScope = appSettings.version; }])

SimplGy · Accepted Answer · 2016-09-29 15:41:03Z

74

I think the simplest approach is to add a constant using an object literal. This fits most application configuration use cases I think, because it supports a complex config object. The constant step also runs early, before other providers are registered.

angular.module('myApp').constant('cfg', {
  url: 'https://myapi.com/v1/',
  httpTimeout: 5000
})

To use it you just inject cfg:

angular.module('myApp').factory('user', function(cfg, $http){
  // cfg and $http together at last
})

edited Sep 29, 2016 at 15:41

answered Jan 3, 2014 at 17:19

SimplGy

20.5k15 gold badges112 silver badges154 bronze badges

3 Comments

Devner Over a year ago

Exactly what I was looking for!

owczarek Over a year ago

I have a constant provider with the key codes used for navigation and I would like to inject the constant provider to the controller (I want to avoid injecting each entry separately). Is that possible? I have some other services already injected.

SimplGy Over a year ago

Is it harder than: angular.module('myApp').constant('keyCodes', { left: 36, right: 38 })' and: angular.module('myApp').factory('myComponent', function(keyCodes) { keyCodes.left })?

Matt M · Accepted Answer · 2016-05-23 23:30:04Z

5

It should also be noted that SimplGy's solution means that the 'cfg' object is a constant, however the properties of that object are not. This means, that you cannot reassign 'cfg' like so:

cfg = { randomProperty: randomValue };

You CAN reassign the properties of the 'cfg' object like so:

cfg.url = 'BrandNewURL.com';
cfg.httpTimeout = 30;

answered May 23, 2016 at 23:30

Matt M

1761 silver badge8 bronze badges

3 Comments

Ken Wayne VanderLinde Over a year ago

This does not answer the question. Replies to other answers should be written as comments.

Matt M Over a year ago

@KenWayneVanderLinde Apologies Ken. Unfortunately, I haven't gathered enough rep to comment yet, but I thought it was important for the author to be aware of the issues that can happen wen using Angulars 'Constant'.

carmenism Over a year ago

@MattM I think you're fine. Fitting all of that into a comment would have been impossible.

Run_Script · Accepted Answer · 2020-06-28 12:26:35Z

3

Check out the use of constants in this example:

angular
.module('abp001App', ['ngRoute'])
.constant("myConfig", {
    "url": "http://localhost",
    "port": "80"
})
.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
})
.controller('MainCtrl', function (myConfig) {
    // Do something with myConfig...
});

edited Jun 28, 2020 at 12:26

Run_Script

2,5582 gold badges19 silver badges31 bronze badges

answered Apr 26, 2017 at 14:06

Josue Martinez

4365 silver badges14 bronze badges

Collectives™ on Stack Overflow

AngularJS - Getting Module constants from a controller

4 Answers 4

3 Comments

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related