Paste configuration in AngularJS

Question

I have a config that I would like to use in Angular services, directives, etc. What is the best way to do this?

I played with the idea of ​​creating a configuration module:

'use strict'; angular.module('config', []) 

But I was not sure how to build an object literal that would be the actual configuration object to be injected:

 angular.module('myModule', ['ngResource', 'config']) .factory('myservice', function ($resource) { return $resource(config.myservice,{}, { // whatever }) }); 

Is it possible to simply expose the configuration as a service and insert it?

Answer 1

Creating a stand-alone module that has only a service or directive (or both) is a great way to make application-independent angular code. If you do this, you can simply take this .js file and transfer it to any project, and all you have to do is enter it into your applications, and it just works.

So, let's do something like:

 angular.module('config', []) .factory('config', function() { return { theme : 'nighttime', cursor : 'sword', ... }; }); 

Then you can simply enter it into any application, for example:

 angular.module('myModule', ['config']) .factory('myservice', function (config) { var theme = config.theme; var cursor = config.cursor; // do stuff with night-time swords! }); 

In fact, the angular -ui team packs all its directives, each directive is contained in its own module, which allows others to simply take this code and reuse it in all their applications.

Answer 2

I would say that the strategy is changing, depending on what configuration you have, but you have several options:

Full module constants

If you need only a few constants, you can use .value() , for example:

 var app; app = angular.module("my.angular.module", []); app.value("baseUrl", "http://myrestservice.com/api/v1"); //injecting the value app.controller("MyCtrl", ['baseUrl', function (baseUrl) { console.log(baseUrl); // => "http://myrestservice.com/api/v1" }]); 

See a more detailed answer here .

Getting config / config service

What I personally like to do is get my configuration from another place through the service, as usual. It does not matter if it is a remote location or just static information.

 var app; app = angular.module("my.angular.config", []); app.service('Configuration', [function() { return { getbaseUrl: function() { return "http://myrestservice.com/api/v1" }, getConfig: function() { return { answer: 42, question: "??" } } } }]): 

EDIT: an example with external sampling:

 var app; app = angular.module('my.module.config', []); app.factory('ConfigurationData', ['$http', '$q', function(http, q) { var deferredConfig = q.defer(); //error handling ommited http.get('http://remote.local/config.json').success(function(data) { return deferredConfig.resolve(data); }); return { getConfig: function() { return deferredConfig.promise; } }; }]); 

Using this service, you can enter your config in other services, however, you may encounter synchronization problems, since you need to enter and resolve the promise made by the service before what you want to do with the configuration:

 var app; app = angular.module("my.other.module", ['my.module.config']); app.factory('MyAwesomeService', ['ConfigurationData', function(config) { config.getConfig().then(function(config) { //do something with your config. }); }]); 

Here you get a little more subtle control, as you can respond to different inputs. Again, it depends on your use case. You can use factory here if you need additional logic to structure your configuration.

Finally, if you want even more control over the configuration, you can do

Custom provider

Providers can be very useful, but I think they are a little harder to develop. Given baseUrl from the configuration necessary for your application to work, you can write to the provider for a service that needs a baseUrl value, for example:

 var app; app = angular.module('my.angular.module', []); app.provider("RestServiceProvider", function(){ this.baseUrl = 'http://restservice.com'; this.$get = function() { var baseUrl = this.baseUrl; return { getBaseUrl: function() { return this.baseUrl; } } }; this.setBaseUrl = function(url) { this.baseUrl = url; }; }); 

This allows you to do cool things in the configuration phase of your application:

 app.config(['RestserviceProvider', function(restServiceProvider) { restServiceProvider.setBaseUrl('http://wwww.myotherrestservice.com'); }]); 

Every instance that you get in the service / controller / etc. RestService will now have a baseUrl set from the configuration phase from the moment it is entered.

For a more in-depth review, I suggest gist .