Comment résoudre les problèmes de dépendance avec L'application AngularJS construite?
Je suis nouveau à AngularJS et je crée une application qui sera construite en utilisant Grunt.
quand je construis et exécute mon application, je remarque quelques problèmes liés à l'ordre de charge de la dépendance:
Uncaught Error: [$injector:nomod] Module 'mycompany.admin.forms' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.13/$injector/nomod?p0=mycompany.admin.forms
Dans l'application fichier, le module est utilisé avant qu'il ne soit déclaré:
angular.module('mycompany.admin.forms').controller('editController', ['$scope', function($scope) {
// ...
}]);
angular.module('mycompany.admin.forms', [])
.config(['$routeProvider', function($routeProvider) {
// ...
}]);
Voici des extraits pertinents de gruntfile de mon projet.js:
grunt.initConfig({
distdir: 'build',
pkg: grunt.file.readJSON('package.json'),
src: {
js: ['src/**/*.js'],
},
concat: {
dist: {
src: ['<%= src.js %>', '<%= src.jsTpl %>'],
dest: '<%= distdir %>/admin/app.js'
}
}
...
});
je sais que je peux résoudre cela en mettant toutes les sources pour un module donné dans un fichier; Cependant, je voudrais essayer de garder chaque chose (chaque contrôleur, chaque service, etc.) dans son propre fichier.
comment résoudre ce problème d'ordre de charge de dépendances?
2 réponses
dans quel ordre Grunt concaténate-t-il vos fichiers? On dirait que vous êtes en train de lire un répertoire, et si le fichier javascript dans lequel se trouve la déclaration du module est après le fichier dans lequel se trouve le contrôleur, alors le fichier concaténé sera construit dans le mauvais ordre.
probablement la solution la plus simple est de lister explicitement le fichier qui contient votre déclaration du module (avec []) comme premier fichier dans votre tableau source.
pour résoudre les problèmes de charge de dépendances je vous recommande d'utiliser Require.js
il fonctionne très bien avec Angular et aussi vous avez un Grunt plugin pour faire la construction.