AngularJS: Come si crea controller in più file

Question

Sto cercando di dividere i miei controllori in più file, ma quando provo a registrarli al mio modulo im ottenere un errore:

groupcontroller.coffee

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

usercontroller.coffee

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

Errore

Errore: argomento 'GroupController' non è una funzione, ma ho undefined

Dalla documentazione ho davvero ottenere ciò che il metodo di modulo fa comunque. Memorizza il mio controller con la chiave "Webchat"?

Edit: Sembra inoltre che il passaggio [] crea un nuovo modulo e sovrascrive il precedente

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

Per evitare questo, è necessario lasciare fuori il [] come

app = angular.module('WebChat'); 

Answer 1

Controlla altri luoghi nel tuo codice in cui stai facendo riferimento a "GroupController" (probabilmente nel percorso). È probabile che tu ce l'abbia come una variabile, ma quando dichiari un controller all'interno di un modulo dovrai racchiuderlo tra virgolette. EG:

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

funziona correttamente perché MyCtrl1 è una variabile. Ma quando si dichiara controller in un modulo come sei:

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

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

'GroupController' ha bisogno di citazioni nel percorso.

Answer 2

qui è quello che ho fatto:

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' 

come si può vedere, se ho un sacco di file di controller js, che sarà un sacco di elementi di script in index.html troppo.
Non so ancora come affrontarlo.

FYI: http://briantford.com/blog/huuuuuge-angular-apps.html
ma questo articolo non ha menzionato il file html.

Answer 3

Ho la mia app var definied nella mia app.prima viene fatto riferimento al file js witch e successivamente i file del controller, ad esempio FirstCtrl.js.

così in app.js ex

var app = angular.module(... 

in FirstCtrl.js

app.controller('FirstCtrl', 

Answer 4

c'è una semplice soluzione a questo problema. Concatena i tuoi file * .coffee prima di compilare. Se si utilizza 'gulp' è possibile creare un'attività come questa:

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

Ad esempio:

chat.coffee

myChat = angular.module 'myChat', [] 

msg.coffee

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

Dopo concatenate e compili abbiamo:

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

Divertiti!