如何管理大角应用程序

Question

我无法管理自己的应用。我想将我的控制器分成几个文件。我读了布莱恩的福特博客（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){
    ....
});

有更好的方法吗？

Answer 1

我使用的方法如下：

Main.js

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

FooCtrl.js

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

谷歌采用的另一种方式是：

# 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

Answer 2

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

使用“。”的所有控制器的一个文件

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

请记住在注入的参数数组中包含该函数。

或每个文件的一个控制器。

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

Answer 3

我有类似的东西：

main_router.js：

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

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

some_controller.js：

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