Grunt.js为Angular.js依赖注入管理 [英] Grunt.js for Angular.js dependency injection management

问题描述

我使用的步兵自动建立我的web应用程序。我遇到了一个有趣的问题。我有两个选择：1）咕噜：开发 2）咕噜：建立

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" 
                                ]);

当我想建立，我咕噜：建立。我使用的是 html2js 咕噜插件素角缓存。但是，这种方法在我的开发工作流生成一个新模块不叫模板，主

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.

在此先感谢

推荐答案

我想出了一个办法解决这个。我使用咕噜的Concat的模块。这可以让你有定期的前pressions定制工艺系统：

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'

}

我然后做在code以下内容：

I then did the following in the code:

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

在正常使用时，块注释将prevent从抛出错误code。当模板过程经历，经常前pression将匹配所需的依赖整个注释块和替代品。太好了！

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!

这篇关于Grunt.js为Angular.js依赖注入管理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！