AngularJS boot configuration at application startup

Question

I need to load a configuration file (JSON format) when starting an AngularJS application in order to load several parameters that will be used in all api calls. So I was wondering if this can be done in AngularJS, and if so, where / when will I upload the configuration file?

Note: - I will need to save the parameters of the configuration file in the service, so I will need to download the contents of the json file before loading any controller, but with available service units - Using an external json file is mandatory in my case here, since the application client should be able to Easily update application configuration from an external file without having to go through application sources.

Answer 1

EDITED

It looks like you are trying to configure a service with options. To load the external configuration file asynchronously, you will have to download the angular application yourself inside the full data load callback, instead of using automatic deployment.

Consider this example to define a service that does not actually have a service URL (it will be something like contact-service.js ):

 angular.module('myApp').provider('contactsService', function () { var options = { svcUrl: null, apiKey: null, }; this.config = function (opt) { angular.extend(options, opt); }; this.$get = ['$http', function ($http) { if(!options.svcUrl || !options.apiKey) { throw new Error('Service URL and API Key must be configured.'); } function onContactsLoadComplete(data) { svc.contacts = data.contacts; svc.isAdmin = data.isAdmin || false; } var svc = { isAdmin: false, contacts: null, loadData: function () { return $http.get(options.svcUrl).success(onContactsLoadComplete); } }; return svc; }]; }); 

Then, when the document is ready, you must make a call to load your configuration file (in this case, using jQuery). In the callback, you then executed your angular app.config using the loaded json data. After running .config, you manually download the application manually. Very important: do not use the ng-app directive if you use this method, or angular will load itself . See this url for details:

http://docs.angularjs.org/guide/bootstrap

Same:

 angular.element(document).ready(function () { $.get('/js/config/myconfig.json', function (data) { angular.module('myApp').config(['contactsServiceProvider', function (contactsServiceProvider) { contactsServiceProvider.config({ svcUrl: data.svcUrl, apiKey: data.apiKey }); }]); angular.bootstrap(document, ['myApp']); }); }); 

UPDATE: Here is a JSFiddle example: http://jsfiddle.net/e8tEX/

Answer 2

I could not get this approach to offer my Keith Morris to work.

So, I created a config.js file and included it in index.html before all angular files

config.js

 var configData = { url:"http://api.mydomain-staging.com", foo:"bar" } 

index.html

 ... <script type="text/javascript" src="config.js"></script> <!-- compiled JavaScript --><% scripts.forEach( function ( file ) { %> <script type="text/javascript" src="<%= file %>"></script><% }); %> 

then in my startup function I set the config variables to $ rootScope

 .run( function run($rootScope) { $rootScope.url = configData.url; $rootScope.foo = configData.foo; ... }) 

Answer 3

You can use constants for things like this:

 angular.module('myApp', []) // constants work //.constant('API_BASE', 'http://localhost:3000/') .constant('API_BASE', 'http://myapp.production.com/') //or you can use services .service('urls',function(productName){ this.apiUrl = API_BASE;}) //Controller calling .controller('MainController',function($scope,urls, API_BASE) { $scope.api_base = urls.apiUrl; // or API_BASE }); 

// in the html page call it {{Api_base}}

There are also several other options, including .value and .config , but they all have their limitations. .config great if you need to contact the service provider to do some initial setup. .value like a constant, except that you can use different types of values.

stack overflow