AngularJS: Как создать контроллеры в нескольких файлах

Я пытаюсь разбить мои контроллеры на несколько файлов, но когда я пытаюсь зарегистрировать их в моем модуле, я получаю сообщение об ошибке:

groupcontroller.coffee

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

usercontroller.coffee

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

Ошибка

Ошибка: аргумент 'GroupController' не является функцией, получил undefined

Из документации я вообще не понимаю, что делает метод модуля. Сохраняет ли мой контроллер ключ "Webchat"?

Edit: Также кажется, что передача [] создает новый модуль и перезаписывает предыдущий

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

Чтобы предотвратить это, вы должны оставить [] как

app = angular.module('WebChat');

Ответы

Ответ 1

Проверьте другие места в коде, где вы ссылаетесь на "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' нуждается в котировках маршрута.

Ответ 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 контроллера, это будет много элементов script в index.html тоже.
Я еще не знаю, как с этим справиться.

FYI: http://briantford.com/blog/huuuuuge-angular-apps.html
но в этой статье также не упоминается файл html.

Ответ 3

У меня есть мое приложение var, определенное в моем файле app.js, на который сначала ссылаются, и после этого файлы контроллера, например 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));

Например:

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

Наслаждайтесь!