square
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.