AngularJS: comment créer des contrôleurs dans plusieurs fichiers
j'essaie de diviser mes controllers en plusieurs fichiers, mais quand j'essaie de les enregistrer à mon module, j'obtiens une erreur:
groupcontroller.café
app = angular.module('WebChat', []);
app.controller 'GroupController', ($scope) ->
usercontroller.café
app = angular.module('WebChat', []);
app.controller 'UserController', ($scope) ->
Erreur
erreur: L'Argument 'GroupController' n'est pas une fonction, n'est pas défini
A partir de la documentation, Je n'obtiens pas vraiment ce que la méthode du module fait de toute façon. Ne conservez mon contrôleur avec la clé "Webchat'?
Edit: Il semble aussi que passer [] crée un nouveau module et écrase le précédent
app = angular.module('WebChat', []);
pour éviter cela, vous devez exclure le [] comme
app = angular.module('WebChat');
4 réponses
Vérifiez d'autres endroits dans votre code où vous faites référence à "GroupController" (probablement dans votre itinéraire). Les Chances sont que vous l'avez comme variable, mais quand vous déclarez un contrôleur à l'intérieur d'un module, vous devrez l'envelopper guillemets. EG:
MyCtrl1() = -> ()
...
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1})
fonctionne très bien parce que MyCtrl1 est une variable. Mais lorsque vous déclarez les contrôleurs dans un module tel 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 le trajet.
voici ce que j'ai fait:
de l'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 voir, si j'ai beaucoup de contrôleur de fichiers js,
ce sera beaucoup d'éléments de script dans index.html aussi.
Je ne sais pas comment traiter avec encore.
pour information: http://briantford.com/blog/huuuuuge-angular-apps.html
mais cet article ne mentionne pas le fichier html.
j'ai mon app var défini dans mon app.le fichier JS witch est d'abord référencé et ensuite les fichiers de controller par exemple FirstCtrl.js.
donc dans app.js ex
var app = angular.module(...
in FirstCtrl.js
app.controller('FirstCtrl',
il y a une solution simple à ce problème. Concaténez votre *.les fichiers de café avant compilation. Si vous utilisez 'gulp' vous pouvez créer la 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:
de chat.café 151950920"
myChat = angular.module 'myChat', []
msg.café 151950920"
myChat
.directive 'message', () ->
return {
restrict: 'E'
replace : true
transclude: true
scope: true
template: '<div></div>'
}
après concaténation et Compilation 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));
Profitez-en!