AngularJS: ¿Cómo creo controladores en múltiples archivos?

Question

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

groupcontroller.coffee

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

usercontroller.coffee

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

error

Error: Argumento 'GroupController' no es una función, obtuve undefined

De la documentación que realmente no entiendo cuál es el método del módulo de todos modos.¿Guarda mi controlador con la clave 'webchat'?

Editar: También parece que pasar [] crea un nuevo módulo y sobrescribe la anterior

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

Para evitar esto, tiene que dejar fuera el [] como

app = angular.module('WebChat');

Answer 1

Revise otros lugares en su código donde se está referendo 'GroupController' (probablemente en su ruta).Lo más probable es que lo tengas como una variable, pero cuando declaras un controlador dentro de un módulo, tendrás que envolverlo.EG:

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 usted:

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

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

'GroupController' necesita cotizaciones en la ruta.

Answer 2

aquí es 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 del controlador, Eso será un montón de elementos de script en index.html también.
No sé cómo lidiar con eso todavía.

fyi: http://briantford.com/blog/huuuuuge-angular-apps.html
Pero este artículo también también mencionó el archivo HTML.

Answer 3

Tengo mi APP D definió en My App.js File Witch se hace referencia por primera vez y, después de eso, los archivos del controlador, por ejemplo, FirstCtrl.js.

así en app.js ex

var app = angular.module(...

en firscctrl.js

app.controller('FirstCtrl',

Answer 4

Hay una solución simple para este problema. Concatenar sus archivos * .coffee antes de compilar. Si usa 'Gulp', puede 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!