coffeescript - AngularJS: ¿Cómo creo controladores en varios archivos?

Question

Estoy tratando de dividir mis controladores en varios archivos, pero cuando intento registrarlos en mi módulo, obtengo un error:

groupcontroller.coffee

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

usercontroller.coffee

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

Error

Error: el argumento ''GroupController'' no es una función, se ha definido.

De la documentación no consigo realmente lo que hace el método del módulo de todos modos. ¿Almacena mi controlador con la tecla ''Webchat''?

Edición: también parece que pasar [] crea un nuevo módulo y sobrescribe el anterior

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

Para evitar esto, tienes que omitir la [] como

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

Answer 1

Aquí esta lo que hice:

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''

Como puede ver, si tengo muchos archivos js de controlador, también habrá muchos elementos de script en index.html.
No sé cómo lidiar con eso todavía.

FYI: http://briantford.com/blog/huuuuuge-angular-apps.html
pero este artículo no mencionó el archivo html también.

Answer 2

Hay una solución simple para este problema. Concatena tus archivos * .coffee antes de compilar. Si usas ''gulp'' puedes crear una tarea 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 ejemplo:

chat.coffee

myChat = angular.module ''myChat'', []

msg.coffee

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

Después de concatenar y compilar tenemos:

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

¡Disfrutar!

Answer 3

Tengo mi aplicación var definida en mi archivo app.js a la que primero se hace referencia a la bruja y después los archivos del controlador, por ejemplo, FirstCtrl.js.

así que en app.js ex

var app = angular.module(...

en FirstCtrl.js

app.controller(''FirstCtrl'',

Answer 4

Verifique otros lugares en su código donde está haciendo referencia a ''GroupController'' (probablemente en su ruta). Es probable que lo tenga como variable, pero cuando declare un controlador dentro de un módulo, tendrá que envolverlo entre comillas. P.EJ:

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

Funciona bien porque MyCtrl1 es una variable. Pero al declarar controladores en un módulo como eres:

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

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

''GroupController'' necesita cotizaciones en la ruta.