Angular JS:Como faço para criar controladores em vários arquivos

Question

Estou tentando dividir meus controladores em vários arquivos, mas quando tento registrá-los em meu módulo, recebo um erro:

controlador de grupo.café

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

usercontroller.café

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

Erro

Erro:O argumento 'GroupController' não é uma função, ficou indefinido

Na documentação, eu realmente não entendo o que o método do módulo faz.Ele armazena meu controlador com a chave 'Webchat'?

Editar:Parece também que passar [] cria um novo módulo e substitui o anterior

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

Para evitar isso, você deve deixar de fora o [] like

app = angular.module('WebChat');

Answer 1

Verifique outros locais em seu código onde você está fazendo referência a 'GroupController' (provavelmente em sua rota).Provavelmente, você o tem como uma variável, mas quando você declara um controlador dentro de um módulo, você terá que colocá-lo entre aspas.POR EXEMPLO:

MyCtrl1() = -> ()
...
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1})

funciona bem porque MyCtrl1 é uma variável.Mas ao declarar controladores em um módulo como você está:

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

$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'GroupController'})

'GroupController' precisa de cotações na rota.

Answer 2

aqui está o que eu fiz:

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>

aplicativo.js

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

meuCtrlA.js

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

meuCtrlB.js

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

Como você pode ver, se eu tiver muitos arquivos JS controladores, isso também será muitos elementos de script no index.html.
Não sei como lidar com isso ainda.

PARA SUA INFORMAÇÃO: http://briantford.com/blog/huuuuuge-angular-apps.html
mas este artigo também não mencionou o arquivo html.

Answer 3

Eu tenho meu aplicativo var definido em meu arquivo app.js que é referenciado primeiro e depois disso os arquivos do controlador, por exemplo, FirstCtrl.js.

então em app.js ex

var app = angular.module(...

em FirstCtrl.js

app.controller('FirstCtrl',

Answer 4

Existe uma solução simples para este problema.Concatene seus arquivos *.coffee antes de compilar.Se você usar 'gulp' você pode criar tarefas como esta:

 gulp.src(['./assets/js/ng/**/*.coffee'])
    .pipe(concat('main.coffee'))
    .pipe(coffee())
    .pipe(ngmin())
    .pipe(gulp.dest('./public/static/js/app'))
    .pipe(livereload(server));

Por exemplo:

chat.café

myChat = angular.module 'myChat', []

msg.café

myChat
.directive 'message', () ->
    return {
        restrict: 'E'
        replace : true
        transclude: true
        scope: true
        template: '<div></div>' 
    }

Depois de concatenar e compilar temos:

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

Aproveitar!