AngularJS: ¿Cómo puedo crear controladores en varios archivos

Question

Estoy tratando de dividir mis controladores en varios archivos, pero cuando intento para registrarlos en mi módulo im conseguir 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, consiguió sin definir

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

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

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

Para evitar esto, usted tiene que dejar de lado el [] como

app = angular.module('WebChat'); 

Answer 1

Consulte otros lugares en el código donde hace referencia a 'GroupController' (probablemente en su ruta). Lo más probable es que lo tenga como una variable, pero cuando declare un controlador dentro de un módulo, tendrá que ajustarlo. EG:

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

funciona bien porque MyCtrl1 es una variable. Pero cuando se declara 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.

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 de controlador, que también incluirán 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 tampoco mencionó el archivo html.

Answer 3

Tengo mi aplicación definida en mi aplicación.Se hace referencia a la primera vez que se hace referencia al archivo js, ​​y luego el controlador archiva, por ejemplo, FirstCtrl.js.

por lo que en app.js ex

var app = angular.module(... 

en FirstCtrl.js

app.controller('FirstCtrl', 

Answer 4

hay una solución simple a este problema. Concatene sus archivos * .coffee antes de compilar. Si utiliza 'trago' puede crear 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)); 

¡Disfrútalo!