Development mode for AngularJS using GruntJS

Question

I have a couple of products that started off with the yeoman angular generator, and it has been a pretty good dev setup. One thing I haven't been able to find a good solution for is setting a development/production mode flag.

Naturally we use a few tools that we only want on in production so having prod/dev variable that we can use both inline JavaScript and/or HTML files would be quite useful. I searched for solutions online before but haven't found anything useful.

Ultimately, I'm looking for a good solution to use in an AngularJS setting, ideally set via grunt serve and/or build run. What are other teams doing here?

Answer 1

I'm using ng-constant. It creates a .js file which contains some angular constants of your choice.

grunt.initConfig({
    ...
    ngconstant: {
        options: {
            name: 'config',
            dest: '<%= yeoman.app %>/scripts/config.js'
        },
        development: {
            constants: {
                myVariable: 'it is development'
            }
        },
        production: {
            constants: {
                myVariable: 'it is production'
            }
        }
    }
});

And then just add it to your tasks:

grunt.registerTask('serve', [
    ...
    'ngconstant:development',
    ...
]);

And don't forget to include this /scripts/config.js file in your html and inject 'config' into your app.

var app = angular.module('myApp', [
    'config',
    ...
]);