AngularJS：如何在多个文件中创建控制器答案

【问题标题】：AngularJS: How do I create controllers in multiple filesAngularJS：如何在多个文件中创建控制器
【发布时间】：2012-09-29 19:44:25
【问题描述】：

我正在尝试将我的控制器拆分为多个文件，但是当我尝试在我的模块中注册它们时出现错误：

groupcontroller.coffee

app = angular.module('WebChat', []);
app.controller 'GroupController', ($scope) ->

usercontroller.coffee

app = angular.module('WebChat', []);
app.controller 'UserController', ($scope) ->

错误

错误：参数“GroupController”不是函数，未定义

从文档中我并没有真正了解模块方法的作用。它是否将我的控制器与密钥“Webchat”一起存储？

编辑： 似乎传递 [] 会创建一个新模块并覆盖之前的模块

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

为了防止这种情况，您必须省略 [] 喜欢

app = angular.module('WebChat');

【问题讨论】：

+1 表示将 [] 作为第二个参数传递给模块方法的编辑会覆盖前一个参数。
@user1703761：谢谢伙计！为编辑 +1。

标签： coffeescript angularjs

【解决方案1】：

这就是我所做的：

index.html

<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<script src="js/myApp.js" type="text/javascript" charset="utf-8"></script>
<script src="js/myCtrlA.js" type="text/javascript" charset="utf-8"></script>
<script src="js/myCtrlB.js" type="text/javascript" charset="utf-8"></script>

app.js

myApp = angular.module('myApp', [])
myApp.config ($routeProvider) ->
    $routeProvider.when('/a', {controller: 'myCtrlA', templateUrl: 'a.html'})
    $routeProvider.when('/b', {controller: 'myCtrlB', templateUrl: 'b.html'})

myCtrlA.js

angular.module('myApp').controller 'myCtrlA', ($scope) ->
    console.log 'this is myCtrlA'

myCtrlB.js

angular.module('myApp').controller 'myCtrlB', ($scope) ->
    console.log 'this is myCtrlB'

如你所见，如果我有很多控制器 js 文件， index.html 中也会有很多脚本元素。
我还不知道怎么处理。

仅供参考：http://briantford.com/blog/huuuuuge-angular-apps.html
但是这篇文章也没有提到html文件。

【讨论】：

html 页面上的顺序很重要，我正在用 grunt 和 concat 构建一个 js 文件，但是在将 angular.module 声明放在第 1 位之后得到了找不到模块 xy 的错误。工作正常:-)。

【解决方案2】：

检查代码中引用“GroupController”的其他位置（可能在您的路线中）。您可能将它作为变量存在，但是当您在模块中声明控制器时，您必须将其包装在引号中。例如：

MyCtrl1() = -> ()
...
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1})

工作正常，因为 MyCtrl1 是一个变量。但是当你在模块中声明控制器时：

app = angular.module('WebChat', []);
app.controller 'GroupController', ($scope) ->
   # ...

$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'GroupController'})

'GroupController' 需要在路由中加上引号。

【讨论】：

【解决方案3】：

我在 app.js 文件中定义了我的 app var，首先引用了控制器文件，例如 FirstCtrl.js。

所以在 app.js ex 中

var app = angular.module(...

在 FirstCtrl.js 中

app.controller('FirstCtrl',

【讨论】：

【解决方案4】：

这个问题有一个简单的解决方案。在编译之前连接您的 *.coffee 文件。如果你使用“gulp”，你可以创建这样的任务：

 gulp.src(['./assets/js/ng/**/*.coffee'])
    .pipe(concat('main.coffee'))
    .pipe(coffee())
    .pipe(ngmin())
    .pipe(gulp.dest('./public/static/js/app'))
    .pipe(livereload(server));

例如：

聊天.咖啡

myChat = angular.module 'myChat', []

味精咖啡

myChat
.directive 'message', () ->
    return {
        restrict: 'E'
        replace : true
        transclude: true
        scope: true
        template: '<div></div>' 
    }

连接和编译后我们有：

(function () {
  var myChat;
  myChat = angular.module('myChat', []);
  myChat.directive('message', function () {
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      scope: true,
      template: '<div></div>'
    };
  });

}.call(this));

享受吧！

【讨论】：