Storing application configuration settings

Question

What is the best place to store application configuration settings in AngularJS? This could be things like application constants, lookups etc. which could be used both from cont

Answer 1

Define:

angular.module('starter.config', [])
.constant('appConfig', {
  'backend': 'http://localhost:3000/v1'
});

Usage:

angular.module('starter.services', ['starter.config'])

.factory('Locations', function(appConfig, $http) {
  return {
    all: function(successCb, errorCb) {
      $http.get(appConfig.backend + '/locations.json')
      .success(successCb)
      .error(errorCb);
    },
    get: function(locationId, successCb, errorCb) {
      $http.get(appConfig.backend + '/locations/'+ locationId +'.json')
      .success(successCb)
      .error(errorCb);
    }
  };
})

Answer 2

You can use the constant() provider!

app.constant('myAppConfig', {ver: '1.2.2', bananas: 6, hammocks: 3, bananaHammocks: true});

This is not a whole lot different from Terry's solution, but constants don't change so they are applied before the other providers. Also, this module can be injected into your config function.

app.config(function(myAppConfig){
    console.log(myAppConfig.bananaHammocks);
});

have fun

Answer 3

You can also use provider instead of service and easy use everywhere.

angular.module('App', []).provider('config',
function() {
    var conf = {
        ver: '1.2.2',
        bananas: 6,
        hammocks: 3,
        bananaHammocks: true,
        baseUrl:'data/'
    };

    conf.$get = function () {
        delete conf.$get;
        return conf;
    };

    return conf;
});

Then use in config as configProvider:

angular.module('App').config( function(configProvider) {} );

In run, controllers, services, ect as config:

angular.module('App').run( function(config) {} );

Here is an example link and of code

Answer 4

Not sure if there is a "best way" but I personally use a service, here is an abbreviated example:

angular.module('myApp').factory('AppSettings', function() {
  return {
    language: 'en'
  }
});

angular.module('myApp').controller('myController', ['AppSettings', 
  function(AppSettings) {
    $scope.language = AppSettings.language;
  }
]);

Answer 5

Add this to have access to a global variable

app.run(function ($rootScope) {
    $rootScope.globalVariable = 'Amadou'; //global variable
});

Now if you want to use it from your controller

function appNameCtrl($scope, $rootScope){
    $rootScope.globalVariable = 'Modji';
}

In you view

My name is {{globalVariable}}