AngularJS - Getting Module constants from a controller

JavascriptAngularjs

Javascript Problem Overview


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 ?

Javascript Solutions


Solution 1 - Javascript

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;
}]);

Solution 2 - Javascript

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
})

Solution 3 - Javascript

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;

Solution 4 - Javascript

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...
});

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAsafView Question on Stackoverflow
Solution 1 - JavascriptmfelixView Answer on Stackoverflow
Solution 2 - JavascriptSimplGyView Answer on Stackoverflow
Solution 3 - JavascriptMatt MView Answer on Stackoverflow
Solution 4 - JavascriptJosue MartinezView Answer on Stackoverflow