jvandemo.com

How to make your AngularJS support environments without build step

Featured

How to make your AngularJS support environments without build step

AngularJS makes it really easy to centralize your configuration using a module.constant or module.value statement:

angular.module('yourModule')  
    .constant('config', {
        API: 'http://www.yourapi.com',
        key: 'some-key'
    });

However, if your setup requires working with different environments, you're out of luck.

There is a way to circumvent this by building a separate library for each environment as described here. It involves building a different version of your code for each of the environments, where the necessary config lines are parsed and replaced with the correct data using Grunt.

Although that works, it is far from ideal:

  • the exact configuration may not be known when the build step occurs
  • the configuration may change and require a new build process when a change is required
  • compiling the configuration in the library makes it useless for another project without having to build another version of the library with another config

After experiencing this problem over and over again in several problems, I was looking for a better way that:

  • does not require a build process and thus no rebuild is required when the configuration changes
  • lets frontend developers without knowledge of AngularJS manage the configuration
  • performs no additional HTTP requests

- supports any backend

Downloading the configuration

See the Pen vakitler by Adem ilter (@ademilter) on CodePen.