Config files with angular-seed

This post extends the task automation for angular-seed projects described in the previous post and demonstrates the usage of environment specific configuration files.

Scenario

Assuming a constant service named configuration with a parameter name foo and value:

• bar when the application is running on a development machine
• qux when the application is prepared for deployment to Azure Web Sites

Step 1 - Specify the configuration values in config.*.json files

// config.development.json
{
  "foo": "bar"
}

// config.azure.json
{
  "foo": "qux"
}

The config.azure.json and config.development.json are the environment specific configuration files we created in the previous post.

Step 2 - Define the constant service template

Save the following constant service template as config.js in the root directory.

'use strict';

angular.module('myApp.config', [])
  .constant('configuration', {
    foo: '@@foo'
  });

The grunt-replace task generates a config.js file in the app/js folder according to the above template taking into account the config.development.json or config.azure.json values.

At the end of the post it will be possible to dynamically evaluate the expression @@foo to:

• bar by executing grunt replace:developmet.
• qux by executing grunt replace:azure.

The task replace:azure is also part of the grunt deployment pipeline.

Step 3 - Include config.js to index.html

diff --git a/app/index.html b/app/index.html
@@ -46,6 +46,7 @@
   <!-- build:js({.tmp,app}) scripts/scripts.js -->
   <script src="js/app.js"></script>
+  <script src="js/config.js"></script>
   <script src="js/services.js"></script>
   <script src="js/controllers.js"></script>
   <script src="js/filters.js"></script>

This file doesn't exist on disk yet, it is generated by grunt-replace when one of the following tasks is invoked – grunt, grunt replace:development, grunt replace:azure.

Step 4 - Register the constant service to the $injector

diff --git a/app/js/app.js b/app/js/app.js
@@ -4,6 +4,7 @@
 // Declare app level module which depends on filters, and services
 angular.module('myApp', [
   'ngRoute',
+  'myApp.config',
   'myApp.filters',
   'myApp.services',
   'myApp.directives',

Step 5 - Inject the constant service and consume it

diff --git a/app/js/controllers.js b/app/js/controllers.js
@@ -3,8 +3,8 @@
 /* Controllers */

 angular.module('myApp.controllers', [])
-  .controller('MyCtrl1', ['$scope', function($scope) {
-
+  .controller('MyCtrl1', ['$scope', 'configuration', function($scope, configuration) {
+    $scope.foo = configuration.foo;
   }])
   .controller('MyCtrl2', ['$scope', function($scope) {

Here we inject the configuration service to controller and bind the foo value to the scope.

Step 6 - Visualize the configuration value

diff --git a/app/partials/partial1.html b/app/partials/partial1.html
@@ -1 +1,3 @@
 <p>This is the partial for view 1.</p>
+{{foo}}

Add the {{foo}} expression to partial1.html view and execute:

grunt replace:development

Output:

Running "replace:development" (replace) task
Replace config.js → app/js/config.js

Done, without errors.


Execution Time (2014-06-09 07:53:16 UTC)
loading tasks         6ms  ■■■■■■■■■■■■ 27%
replace:development  15ms  ■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 68%
Total 22ms

Navigating to /#view1 should now render bar.

In order to display qux execute:

grunt replace:azure

Output:

Running "replace:azure" (replace) task
Replace config.js → app/js/config.js

Done, without errors.


Execution Time (2014-06-09 07:54:01 UTC)
loading tasks   6ms  ■■■■■■■■■■■■■ 27%
replace:azure  15ms  ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 68%
Total 22ms

Navigating to /#view1 should now render qux.