AngularJS:文件连接中断了模块声明顺序

我正在使用grunt连接我的Angular应用程序的

.js

文件

我刚刚浏览并整理了代码库，以遵循讨论的约定，特别是将代码分组到表示特性的小模块中

然而，我发现，如果模块在声明之前就被使用，那么连接顺序似乎会破坏应用程序

例如：

其中：

// userProfile.js
var userProfile = angular.module('userProfile',[])

// depositFormCtrl.js
angular.module('userProfile')
    .controller('DepositFormCtrl', function($scope) {...});

当grunt执行连接时，

depositFormCtrl.js

出现在

userProfile.js

之前。这会导致应用程序抛出错误，并抱怨：

未捕获错误：无模块：userProfile

我看到很多关于使用RequireJS/AMD管理模块加载顺序的可能性的讨论。然而，经常有人说这是过分的/不需要的

例如：Angular团队的Brian Ford：

我个人认为RequireJS做得太多了；AngularJS的DI系统真正缺少的唯一功能是异步加载

他还表示，他不推荐有棱角的RequireJS

我还看到了提到的made to use，如图所示。然而，据我所知，（几乎没有官方文档）加载程序旨在解决无序加载模块的问题，而不是在使用之前引用模块

将angular-loader.js添加到我的项目中并没有解决该问题

我是否应该使用一个声明来防止出现错误

---

声明模块和控制器的正确方法是什么，以便连接顺序文件不会影响运行时的代码？

如果您将模块拆分为多个js文件，并且不想手动管理构建应连接文件的顺序，则需要RequireJS

就我个人而言，我试图避免将模块拆分为多个文件，原因如下：

• 很难找到所有控制器/服务等。。从单个模块
• 如果模块变得太大，那么可能意味着您应该将其拆分为几个模块
• 手动声明模块依赖项列表和每个模块的注入依赖项列表已经够麻烦的了。再加上RequireJS所需的js依赖文件列表，您将花费大部分时间声明无聊的东西，而不是解决业务问题

---

但是，如果保持1模块/1文件规则，您将看到index.html增长非常快。个人而言，我不认为这是一个大问题。

我有时使用的一种方法是把声明放在连接文件的开头。为此，我将它们放在一个专用文件中，该文件将是连接实用程序获取的第一个文件

//app/_declarations.js
angular.module('userProfile',[]);

//app/userProfile/userProfile.js
angular.module('userProfile')
   .config(['$routeProvider', function ($router) {...});

//app/userProfile/deposits/depositFormCtrl.js
angular.module('userProfile')
   .controller('DepositFormCtrl', function($scope) {...});

---

可能不适合所有场景，但设置和理解起来很简单。

我遇到了同样的问题。我将GruntFile.js中的连接步骤分为两个任务，因此本质上，定义角度应用程序的app.js被“预先”添加到中间连接文件（_app.js），结果以中间文件的相同名称保存，最终生成一个“_app.js”

app.js

var TestApp = angular.module('TestApp', [...]);

GrunFile.js的“我的concat”部分中的子任务

....
// Concatenate all Angular application JS files into _app.js.  Note the use
// of wildcards to walk the App folder subfolders to pick up all JS files.
        jsCore: {
            src: [                   
                '<%= meta.appPath%>/**/*.js',

                // Do not include app.js, since it needs to be prepended to the final concat file
                '!<%= meta.appPath/app.js',

                // Do not include config.js, since it will need to be tokenized by RM
                '!<%= meta.appPath%>/config.js'
            ],
            dest: '<%= meta.resPath %>/_app.js'
        },

        // Prepend app.js to the beginning of _app.js, and save result as _app.js.  
        // This keeps Angular happy ...
        jsApp: {
            src: [
                '<%= meta.appPath%>/app.js',
                '<%= meta.resPath%>/_app.js'
            ],
            dest: '<%= meta.resPath %>/_app.js'
        }
...

。。。。
//将所有Angular应用程序JS文件连接到_app.JS中。注意这个用法
//使用通配符遍历应用程序文件夹子文件夹以拾取所有JS文件。
jsCore：{
src:[
“/***/.js”，
//不要包含app.js，因为它需要在最终的concat文件之前
“！使用gulp，然后使用gulp角度排序

return gulp.src('./build/src/app/**/*.js')
        .pipe(sort())
        .pipe(plug.concat('concat.js'))
        .pipe(gulp.dest('./output/'));

这正是我建议将RequireJS与Angular一起使用的原因。RequireJS让您非常容易地定义所有脚本的加载顺序，然后在部署到生产环境时，使用r.js（RequireJS Optimizer），它可以遵循您的加载顺序定义文件，并按照您指示的顺序连接文件。这就是我在项目中所做的，它工作得非常完美。我不知道这是否解决了您的问题（它解决了我的问题）。但我必须先加载app.js（声明了
var app
的文件，然后我可以使用
grunt contrib concat
对其余文件进行通配符这是我最终使用的路径。这并不奇怪，但它可以工作。如果你使用Yo，它也可以做同样的事情，有一个顶级app.js定义模块，它总是首先得到处理。我不明白。h当使用
grunt concat contrib
时，添加声明是如何控制顺序的？这对grunt concat contrib是有效的。我相信关键是声明文件名开头的u。显然，grunt按alpha顺序对文件进行排序。这感觉像是一个黑客攻击，但它可以工作。我刚刚尝试了这个，我相信它不再工作了g、 “_declarations”似乎不会首先对其排序。“0declarations.js”会起作用。。。
return gulp.src('./build/src/app/**/*.js')
        .pipe(sort())
        .pipe(plug.concat('concat.js'))
        .pipe(gulp.dest('./output/'));