Question

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

groupcontroller.coffee

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

usercontroller.coffee

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

错误

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

从文档中我真的得不到模块方法的作用。它是否用“网聊”键存储我的控制器？

修改看来传递[]会创建一个新模块并覆盖前一个模块

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

为了防止这种情况，您必须省略[]之类的

app = angular.module('WebChat');

Answer 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文件。

Answer 2

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

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 3

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

所以在app.js ex

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

享受！

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

4 个答案: