web-dev-qa-db-fra.com

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

J'essaie de scinder mes contrôleurs en plusieurs fichiers, mais lorsque j'essaie de les enregistrer sur mon module, j'obtiens une erreur:

groupcontroller.coffee 

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

usercontroller.coffee 

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

Erreur

Erreur: l'argument 'GroupController' n'est pas une fonction, indéfini

De la documentation, je ne comprends 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 de [] crée un nouveau module et écrase le précédent

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

Pour éviter cela, vous devez laisser le [] comme

app = angular.module('WebChat');
coffeescriptangularjs
24
user1703761

Vérifiez les autres endroits de votre code où vous faites référence à 'GroupController' (probablement sur votre route). Il y a de fortes chances que vous l'ayez sous la forme d'une variable, mais lorsque vous déclarez un contrôleur dans un module, vous devez envelopper les guillemets. PAR EXEMPLE: 

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

fonctionne bien parce que MyCtrl1 est une variable. Mais lorsque vous déclarez des contrôleurs dans un module, vous êtes:

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

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

'GroupController' a besoin de guillemets dans l'itinéraire.

6
Roy Truelove

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 de contrôleur, .__, il y aura aussi beaucoup d’éléments de script dans index.html.
Je ne sais pas encore comment gérer ça.

FYI: http://briantford.com/blog/huuuuuge-angular-apps.html
mais cet article ne mentionne pas trop le fichier html.

13
zx1986

J'ai mon application var définie dans mon fichier app.js qui est d'abord référencé puis les fichiers de contrôleur, par exemple FirstCtrl.js. 

donc dans app.js ex

var app = angular.module(...

dans FirstCtrl.js

app.controller('FirstCtrl',
3
ta4ka

Il existe une solution simple à ce problème . Concaténez vos fichiers * .coffee avant la compilation. Si vous utilisez 'gulp', vous pouvez créer une tâche comme ceci:

 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.café

myChat = angular.module 'myChat', []

msg.café

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

Après concaténer 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));

Prendre plaisir!

0
LampCat