

For the past few weeks, I've been building a Web App based on AngularJS.

I wanted it to act differently for different configurations, and I wanted to store the configuration in a simple Config file (sounds like standard procedure),

but for some odd reason, I couldn't find any example or common way to do such a thing, so I improvised.

I simply wrote a new config.js file (where my app.js is, starting with Angular seed), and inside added a new config module.

config.js

1 2 3 4 5 var config_module = angular.module('myApp.config', []) .constant('APP_NAME','My App') .constant('APP_VERSION','0.1') .constant('FIRST_URL','http://www.google.com') ;

Then I added the newly created myApp.config module into my myApp.controllers module (inside controllers.js), as well as added the individual constants I want to have available inside each controller (sadly that was a must).

controllers.js

1 2 3 4 5 6 7 angular.module('myApp.controllers', ['myApp.config']) .controller('ListCtrl', ['$scope', '$http', 'APP_NAME', 'FIRST_URL', function($scope, $http, APP_NAME, FIRST_URL) { $http.get(FIRST_URL).success(function(data) { $scope.data = data; }); $scope.APP_NAME = APP_NAME; }]);

At which point, if I want to, for instance get APP_NAME within the View,

I just add it to the scope in the controller:

controllers.js

1 2 3 4 5 6 7 angular.module('myApp.controllers', ['myApp.config']) .controller('ListCtrl', ['$scope', '$http', 'APP_NAME', 'FIRST_URL', function($scope, $http, APP_NAME, FIRST_URL) { $http.get(FIRST_URL).success(function(data) { $scope.data = data; }); $scope.APP_NAME = APP_NAME; }]);

This seems to be an awful lot of trouble, I didn't want to write .constant over and over again, so, I separated the data from the constant definition:

config.js

1 2 3 4 5 6 7 8 var config_data = { 'APP_NAME': 'My App', 'APP_VERSION': '0.1', 'FIRST_URL': 'http://www.google.com' } angular.forEach(config_data,function(key,value) { config_module.constant(value,key); }

This definitely makes it easier to change settings, plus it just looks better.

I still didn't like the fact that I had to name all the variables I wanted from the config in advance,

so I simply packed them in an Object (Objects are defined with {}, and Arrays with []):

config.js

1 2 3 4 5 6 7 8 9 10 var config_data = { 'GENERAL_CONFIG': { 'APP_NAME': 'My App', 'APP_VERSION': '0.1', 'FIRST_URL': 'http://www.google.com' } } angular.forEach(config_data,function(key,value) { config_module.constant(value,key); }

controllers.js

1 2 3 4 5 6 7 angular.module('myApp.controllers', ['myApp.config']) .controller('ListCtrl', ['$scope', '$http', 'GENERAL_CONFIG', function($scope, $http, GENERAL_CONFIG) { $http.get(GENERAL_CONFIG.FIRST_URL).success(function(data) { $scope.data = data; }); $scope.APP_NAME = GENERAL_CONFIG.APP_NAME; }]);

That's definitely more elegant, plus now I can divide my config into different sections and

only import the ones I need for each individual Controller.

I'd be happy to hear some other options to do this,

though I'm pretty satisfied with this solution.