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

Question

我正在尝试将我的控制器拆分为多个文件，但是当我尝试在我的模块上注册时，我收到错误：

groupcontroller.coffee

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

.

usercontroller.coffee

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

.

错误

错误：参数'groupcontroller'不是函数，get未定义

从文档中我真的没有得到模块方法的任何事情。它是否使用密钥'webchat'存储我的控制器？

编辑： 似乎通过[]创建一个新模块并覆盖前一个

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

. 要防止这种情况，您必须遗漏[]如

app = angular.module('WebChat');

.

Answer 1

检查代码中的其他地方，在那里您可以引用'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'需要在路线中引用。

Answer 2

这是我所做的：

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中的大量脚本元素。
我不知道如何处理那样。

fyi： http://briantford.com/blog/huuuuuge-angular-apps.html
但这篇文章也没有提到HTML文件。

Answer 3

我在我的app.js文件中有我的应用程序virdiend首次引用文件栏，并在该控制器文件中首先引用，例如firstctrl.js。

所以在app.js前面

var app = angular.module(...

.

在firstctrl.js 中

app.controller('FirstCtrl',

.

Answer 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));

.

例如：

chat.coffee

myChat = angular.module 'myChat', []

.

msg.coffee

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));

.

享受！