Grunt.js for Angular.js dependency injection management

Question

I am using Grunt to automatically build my web app. I have run into an interesting issue. I have two options: 1)grunt:dev and 2)grunt:build

grunt:dev just does basic tasks related to development. My "main" Angular module looks like this:

var myApp= angular.module('myApp', [
                                "ui.router",
                                "ui.bootstrap",
                                "someDependency",
                                "someDependency2" 
                                ]);

When I want to build, I do grunt:build. I am using the html2js grunt plugin to prime the Angular cache. However, this method generates a new module not in my development workflow called templates-main.

In order for this to work, when I build, I need the "main" module to look like:

var myApp= angular.module('myApp', [
                                "ui.router",
                                "ui.bootstrap",
                                "templates-main", //<<< NEW DEPENDENCY
                                "someDependency",
                                "someDependency2" 
                                ]);

Is there a recommended way of accomplishing this? If you include the dependency, but it is not there, it causes an Angular error. I am hoping this can be automated with Grunt.

Thanks in advance

Diode Dan · Accepted Answer · 2014-04-25 22:17:25Z

I figured out a workaround for this. I am using Grunt's Concat module. This allows you to have a custom process system with regular expressions:

build: {
    options: {
        process: function(src, filepath) {
            return src.replace(/[/*<%]{4}.*[%>*/]{4}/g, '"templates-main",');
        }
    },
    src: ['src/app/app.js', 'src/app/**/*.js'],
    dest: 'build/app.js'

}

I then did the following in the code:

var eeApp = angular.module('eeApp', [
                                "ui.router",
                                "ui.bootstrap",
                                /*<% templates-main %>*/
                                "dashboard"
                                ]);

In normal use, the block comment will prevent the code from throwing an error. When the template process goes through, the regular expression will match the entire comment block and substitute in the required dependency. Nice!

Lajos Veres · Accepted Answer · 2014-04-24 14:11:01Z

0

I think the easiest way is to create an empty fake module file for your dev build and overwrite it with the real template cache in the production build.

This way you shouldn't change the dependencies dynamically.

(Or you can copy this file with grunt as well in the development setup, if you wouldn't like to overwrite originals.)

answered Apr 24, 2014 at 14:11

Lajos Veres

13.7k7 gold badges47 silver badges57 bronze badges

1 Comment

Diode Dan Over a year ago

I tried this route. Turns out if you're using the grunt-contrib-concat module, there is an easier off the shelf solution. Thanks for your input.

Collectives™ on Stack Overflow

Grunt.js for Angular.js dependency injection management

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related