24

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

groupcontroller.coffee

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

用户控制器.coffee

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

错误

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

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

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

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

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

app = angular.module('WebChat');
4

4 回答 4

13

这是我所做的：

索引.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>

应用程序.js

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

我的CtrlA.js

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

我的CtrlB.js

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

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

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

于 2013-09-24T08:11:37.123 回答
6

检查代码中引用“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' 需要在路由中加上引号。

于 2012-09-29T20:12:17.677 回答
3

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

所以在 app.js 中

var app = angular.module(...

在 FirstCtrl.js

app.controller('FirstCtrl',
于 2014-01-24T16:48:09.920 回答
0

这个问题有一个简单的解决方案。在编译之前连接您的 *.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));

享受！

于 2014-03-01T14:11:44.513 回答