如何管理大角度应用程序答案

【问题标题】：how to manage big angular app如何管理大角度应用程序
【发布时间】：2013-09-27 11:50:54
【问题描述】：

我在管理我的应用时遇到了问题。我想将我的控制器分成几个文件。我阅读了 Brian 的 Ford 博客 (http://briantford.com/blog/huuuuuge-angular-apps.html)，但我不太明白该怎么做。

在我的 controller.js 文件中，我有这样的内容：

function loginCtrl($scope){
     ....
}

function landingCtrl($scope){
    ...
}

我发现为每个文件分离控制器的唯一方法是这样做：

app.js:

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

controller1.js：

musicApp.controller('loginController', ['$scope', loginCtrl],function loginCtrl($scope){
    ....
});

controller2.js：

musicApp.controller('landingCtrl', ['$scope', landingCtrl],function landingCtrl($scope){
    ....
});

有没有更好的方法来做到这一点？

【问题讨论】：

标签： angularjs angularjs-module

【解决方案1】：

我正在使用类似的方式如下：

Main.js

angular.module('app', []);

FooCtrl.js

angular.module("app").controller("FooCtrl", [
  "$scope", function($scope) {
  }
]);

google采用的另一种方式是：

# init empty Object
var docsApp = {
  controller: {},
  directive: {},
  serviceFactory: {}
};

# FooCtrl.js
docsApp.controller.FooCtrl = ['$scope', function($scope){}]

# BarCtrl.js
docsApp.controller.BarCtrl = ['$scope', function($scope){}]

... add services
... directives

# bootstrap angular
angular.module('docsApp', ['...']).
  config(...).
  factory(docsApp.serviceFactory).
  directive(docsApp.directive).
  controller(docsApp.controller);

看看这个来自 google angularjs 教程的 js：http://docs.angularjs.org/js/docs.js

【讨论】：

【解决方案2】：

您可以通过多种方式实现这一目标。

使用“.”为所有控制器创建一个文件

musicApp.controller('loginController', ['$scope', loginCtrl,function loginCtrl($scope){
    ....
}]).controller('landingCtrl', ['$scope', landingCtrl,function landingCtrl($scope){
    ....
}]);

只记得在注入的参数数组中包含函数。

或每个文件一个控制器。

只需要使用您使用的任何方法（脚本标签、requirejs 等）包含每个 js 文件

【讨论】：

【解决方案3】：

我有类似的东西：

main_router.js：

var myApp = angular.module('theApp', ['controllers'])...

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

some_controller.js：

controllers.controller('SomeCtrl', ['$scope', function ($scope) { ... } ]);

【讨论】：