AngularJS: Come posso creare controller in più file

Question

Sto cercando di dividere i miei controller in più file, ma quando provo a registrarli al mio modulo, sto ricevendo 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, è stato indefinito

Dalla documentazione non ottengo davvero ciò che il metodo del modulo fa comunque.Memoge il mio controller con il tasto 'WebChat'?

Modifica: Sembra anche che il passaggio [] crea un nuovo modulo e sovrascrive il precedente

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

.

Per evitare questo, devi lasciare [] come

app = angular.module('WebChat');

.

Answer 1

Controlla altri posti nel tuo codice in cui stai facendo riferimento a 'GroupController' (probabilmente nel tuo percorso).È probabile che tu ce l'hai come una variabile, ma quando dichiari un controller all'interno di un modulo dovrai avvolgerlo le citazioni.Ad esempio:

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

.

funziona bene perché myctrl1 è una variabile.Ma quando si dichiarano i 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

Ecco cosa 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 puoi vedere, se ho un sacco di file del controller JS, Questo sarà anche un sacco di elementi di script in indice.html.
Non so ancora come affrontarlo.

fyi: http://biantford.com/blog/huuuuuge-angular-apps.html
. Ma questo articolo non ha menzionato anche il file HTML.

Answer 3

Ho la mia app Var deflezionata nella mia strega di file App.JS viene prima referenziata e successivamente i file del controller per esempio firstctrl.js.

SO IN APP.JS EX

var app = angular.module(...

.

in firstctrl.js

app.controller('FirstCtrl',

.

Answer 4

C'è una soluzione semplice per questo problema. Concatena i tuoi file * .Coffee prima della compilazione. Se usi 'Gulp' puoi creare 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 la concatena e compilare che 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!