Best approach for configuration file for Angular / RequireJS application?

Question

Is there a generally accepted best practice for saving a client-side configuration file (like the equivalent of the server-side AppSettings section in an ASP.NET application)?

Our application is based on Angular. Our desire is to externalize environment-specific settings (e.g., remote system URLs, etc.) from the code itself, so ideally the Ops user, not the developer, can change the settings in one place.

Thanks in advance for your understanding!

Answer 1

I don't think it's nice to use the config.js file when developing AngularJS applications. The reason is that you are breaking any automatic testing feature.

Instead, I create a Settings service in which I specify a specific application context. For instance:

angular.module('settings',[]).factory('SettingsService',function(){ var service={}; // Insert your settings here service.ServerPath = 'whateverwhatever'; service.ImagePath = 'bla bla bal'; return service; }); 

Then insert the SettingsService into the controllers that need access to the settings.

Of course (which I have omitted for simplicity here), you could instead create a ServiceService with an empty body, and then in the .run () application a method to get parameters from the server.

I use a simple method and support a ServiceService for each type of deployment ("development", "test", "production", etc.). Then just include the correct SettingsService parameter in your build script depending on the target (I use Grunt, but you can also use Ant).

Answer 2

I think the answer to this question very much depends on how you configure the angular layer in the overall structure of the application.

For example, I submitted the angular application in the same way for each environment from the base server application (Grails, node.js, RoR) and the angular application is always the same code base, because the data that I upload to angular is controlled on the server side , and angular calls are all relative to the base URL. In other words, I proxy all the data through the server application that serves the angular application, so the whole angular application “knows about” is its own URL.

If you directly call other services and do not use the core server application to proxy data, you can still use the server to provide the URL, depending on some configuration on the server side of the application. In this case, you can always save these configuration values ​​in the database table so that they can be changed on the fly.

Answer 3

I have the same dilemma, and what I resorted to now: I have a set of configuration files, such as config-local.js, config-staging.js, etc. Then I create a symbolic link to config.js anywhere I want to run my application. On my local desktop, I symbolically refer to config-local.js, in the intermediate env, I symbolically refer to config-staging.js. Then I put config.js in .gitignore.

Pros: it works. Cons: Creation of a symbolic link is required before the application will work correctly.

Future: maybe add a task to grunt to create a symbolic link?