angularjs - 模块注入(inject)与单一应用程序

Question

我使用 AngularJs 已经有一段时间了，现在我对它感觉很舒服，所以我开始回顾我之前的工作。

所以我开始遵循基本教程，并习惯于设置应用程序、 Controller 和服务，如下所示:

模块注入(inject)

// application.js
angular.module('appname',
    [ // dependencies
      'ui.router'
    , 'someController'    
    ]);

// somecontroller.js
angular.module('someController', [])        
    .controller('someCtrl',
        ['$scope', function ($scope) {
            // Some stuff
        }]);

当然，在我的index.html中包含js文件，例如:

<script src="path/angular.js"></script>
<script src="path/angular-ui-router.min.js"></script>
<script src="path/application.js"></script>
<script src="path/somecontroller.js"></script>

由于我倾向于按功能分离所有逻辑(单独的目录，每个目录拥有自己的 MV* 结构)，因此我发现依赖项列表可能会变得相当大。而且我认为将每个 Controller 、服务等添加到应用程序依赖项有点麻烦。

所以我开始这样做:

单个应用程序

// application.js
var app = angular.module('appname',
    [ // dependencies
      'ui.router'
    ]);

// somecontroller.js
app.controller('someCtrl',
    ['$scope', function ($scope) {
        // Some stuff
    }]);

这样做的明显好处是我不再需要将 Controller 引用添加到应用程序依赖项中。

现在我的问题是:

1. 除了明显的区别之外，这两种方法之间还有什么区别？
2. 从 Angular 的 Angular 考虑哪种方法“好/坏做法”？为什么？

Answer 1

我认为第二种方法不好。您将所有 Controller 添加到应用程序主模块中。如果您想真正按功能对代码进行分组，我推荐第三种方法:

// application.js
angular.module('appname',
    [ 'ui.router'
    , 'appname.booking'    
    ]);

//booking.mod.js
angular.module('appname.booking', []);

//booking.ctrl.js
angular.module('appname.booking')        
    .controller('BookingCtrl', function ($scope) {
            // Some booking logic
        }]);

通过这种方式，您可以为每个功能创建一个模块，并获得易于理解和导航的项目架构。