CODEWITHSUNDEEP
javascriptangularjs
govin
govin

Reputation: 6733

Storing application configuration settings

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 controllers and services or factories. I could create a separate service that stores and retrieves these things but I was wondering if there is another proper place to store and retrieve those.

Upvotes: 45

Views: 25058

Answers (5)

Hippocrates
Hippocrates

Reputation: 2540

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

Upvotes: 73

emj365
emj365

Reputation: 2324

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

Upvotes: 1

Vlada
Vlada

Reputation: 1659

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

Upvotes: 3

vimal1083
vimal1083

Reputation: 8681

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

Upvotes: -2

Terry
Terry

Reputation: 14219

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

Upvotes: 14

Related Questions