Development Mode for AngularJS Using GruntJS

Question

I have several products that started with the yoman angular generator, and it was a pretty good installation for developers. One thing with which I could not find a good solution is to set the flag of the development / production mode.

Naturally, we use several tools that we need only in production, so having a prod / dev variable that we can use both embedded JavaScript and / or HTML files will be very useful. I searched for solutions on the Internet before, but did not find anything useful.

Ultimately, I'm looking for a good solution to use in customizing AngularJS, ideally installed using the grunt service and / or build. What are the other teams doing here?

Answer 1

I am using ng-constant . It creates a .js file that 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 add "config" to your application.

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