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

Question

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

groupcontroller.coffee

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

.

usercontroller.coffee

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

.

<Сильная> Ошибка

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

Из документации я действительно не получаю то, что в любом случае метод модуля.Он хранит мой контроллер с ключом «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'})

.

'GuardController' требует цитаты в маршруте.

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

У меня есть мое приложение VAR, определенное в моем приложении файловая ведьма, впервые упоминается, и после этого файлы контроллера например firstrl.js.

Так в app.js ex

var app = angular.module(...

.

в firstrl.js

app.controller('FirstCtrl',

.

Answer 4

Есть простое решение этой проблемы. Объединить файлы * .Soffee перед компиляцией. Если вы используете «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));

.

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