Angularjs: Comment créer des contrôleurs dans plusieurs fichiers

Question

J'essaie de scinder mes contrôleurs en plusieurs fichiers, mais lorsque j'essaie de les enregistrer à mon module, je reçois une erreur:

groupcontroller.coffee

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

usercontroller.coffee

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

erreur

Erreur: argument 'groupcontroller' n'est pas une fonction, devenu indéfini

de la documentation, je ne reçois pas vraiment ce que la méthode du module fait de toute façon.Stocke-t-il mon contrôleur avec la clé "webchat"?

edit: Il semble également que le passage [] crée un nouveau module et écrase la précédente

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

Pour éviter cela, vous devez laisser de côté [] comme

app = angular.module('WebChat');

Answer 1

Vérifiez les autres endroits de votre code où vous référez «groupcontroller» (probablement dans votre itinéraire).Les chances sont que vous l'avez comme une variable, mais lorsque vous déclarez un contrôleur à l'intérieur d'un module, vous devez envelopper des citations.Par exemple:

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

fonctionne bien parce que myCtrl1 est une variable.Mais lors de la déclaration de contrôleurs dans un module que vous êtes:

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

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

'GroupController' a besoin de citations dans la route.

Answer 2

Voici ce que j'ai fait:

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'

Comme vous pouvez le constater, si j'ai beaucoup de fichiers JS contrôleur, Ce sera beaucoup d'éléments de script dans index.html aussi.
Je ne sais pas comment traiter avec ça.

FYI: http://briantford.com/blog/huuuuge-angular-apps.html de
Mais cet article n'a pas également mentionné le fichier HTML.

Answer 3

J'ai mon app viré défini dans mon fichier witch de fichier APP.js est d'abord référencé et après que les fichiers du contrôleur, par exemple, FirstCtrl.js.

donc dans App.js ex

var app = angular.module(...

dans firstctrl.js

app.controller('FirstCtrl',

Answer 4

Il y a une solution simple à ce problème. Concaténez vos fichiers * .coffee avant de compiler. Si vous utilisez 'gulp', vous pouvez créer une tâche comme celle-ci:

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

Par exemple:

chat.coffee

myChat = angular.module 'myChat', []

msg.coffee

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

Après concaténation et compiler, nous avons:

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

profiter!