Reputation: 6733
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
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
Reputation: 2334
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
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
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
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