Question

我已经和AngularJs合作了一段时间，我现在感觉很舒服，我开始回顾我之前的工作。

所以我开始学习基础教程并习惯了如下设置应用程序，控制器和服务：

模块注入

// 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 *结构），我发现依赖项列表可能会变得相当大。而且我认为将每个控制器，服务等添加到应用程序依赖项是一种拖累。

所以我开始这样做：

单一申请

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

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

这样做的明显胜利是我不再需要将控制器引用添加到应用程序依赖项中。

现在我的问题是：

除了显而易见的，两种方法之间有什么区别？
从Angular角度考虑哪种方法＆＃34;好/坏的做法＆＃34;？为什么？

Answer 1

在第一种方法中，您将为控制器创建不同的模块。这就是为什么在创建Angular JS应用程序时必须注入控制器名称的原因。

angular.module('appName', ['controllerName']);
angular.module('controllerName', []);

在第二种方法中，您只创建一个应用程序并将控制器附加到此应用程序。在这种情况下，您不必在创建Angular JS应用程序时注入控制器名称。

var app = angular.module('appName', []);
app.controller('controllerName', function(){});

关于第二个问题，这取决于您正在开发的应用程序类型。对于小型单页面应用程序，单个应用程序模块可以正常运行

在处理大型应用程序时，所有内容可能都不包含在单个页面上，并且通过在模块中包含功能，可以更轻松地跨应用程序重用模块。所以在这种情况下，你的第一种方法更好。

您可以创建如下所示的不同模块，并可以注入您的应用程序;

var sharedServicesModule = angular.module('sharedServices',[]);
sharedServices.service('NetworkService', function($http){});

var loginModule = angular.module('login',['sharedServices']);
loginModule.service('loginService', function(NetworkService){});
loginModule.controller('loginCtrl', function($scope, loginService){});

var app = angular.module('app', ['sharedServices', 'login']);

Answer 2

您似乎需要阅读更多关于modules的内容。

您的两种方法之间的区别在于，在第一种方法中，您为控制器创建了一个不同的模块，并通过将该模块注入应用程序依赖项，您告诉角度＆＃34;顺便说一下，我想要随附的功能该模块也是＃34;。

在第二种方法中，整个应用程序只有一个巨大的模块，这意味着所有控制器，服务，指令......将被自动视为应用程序的一部分。

这两种方法都有效，但是具有不同功能的不同模块可以帮助您更好地构建应用程序，并提供更多的可重用性。更容易测试。

Answer 3

我不认为第二种方法是好的。您将所有控制器添加到您的应用程序主模块。如果您想按功能对代码进行真正的分组，我建议采用第三种方法：

// 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
        }]);

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

模块注入与单一应用

3 个答案: