AngularJS seed: mettre JavaScript dans des fichiers séparés (app.js, controllers.js, directives.js, filters.js, services.js)

J'utilise le modèle angular-seed pour structurer mon application. Dans un premier temps, je mets tout mon code JavaScript dans un seul fichier, main.js. Ce fichier contenait ma déclaration de module, les contrôleurs, les directives, les filtres et les services. L'application fonctionne bien comme ça, mais je m'inquiète de l'évolutivité et de la maintenabilité car mon application devient plus complexe. J'ai remarqué que le modèle angular-seed a des fichiers séparés pour chacun d'eux, j'ai donc tenté de distribuer mon code à partir du main.jsfichier unique dans chacun des autres fichiers mentionnés dans le titre de cette question et trouvés dans le app/jsrépertoire de l' angular -modèle de graine .

Ma question est la suivante: comment gérer les dépendances pour que l'application fonctionne? La documentation existante trouvée ici n'est pas très claire à cet égard puisque chacun des exemples donnés montre un seul fichier source JavaScript.

Un exemple de ce que j'ai est:

app.js

angular.module('myApp', 
    ['myApp.filters',
     'myApp.services',
     'myApp.controllers']);

controllers.js

angular.module('myApp.controllers', []).
    controller('AppCtrl', [function ($scope, $http, $filter, MyService) {

        $scope.myService = MyService; // found in services.js

        // other functions...
    }
]);

filters.js

angular.module('myApp.filters', []).
    filter('myFilter', [function (MyService) {
        return function(value) {
            if (MyService.data) { // test to ensure service is loaded
                for (var i = 0; i < MyService.data.length; i++) {
                    // code to return appropriate value from MyService
                }
            }
        }
    }]
);

services.js

angular.module('myApp.services', []).
    factory('MyService', function($http) {
        var MyService = {};
        $http.get('resources/data.json').success(function(response) {
            MyService.data = response;
        });
        return MyService;
    }
);

main.js

/* This is the single file I want to separate into the others */
var myApp = angular.module('myApp'), []);

myApp.factory('MyService', function($http) {
    // same code as in services.js
}

myApp.filter('myFilter', function(MyService) {
    // same code as in filters.js
}

function AppCtrl ($scope, $http, $filter, MyService) {
    // same code as in app.js
}

Comment gérer les dépendances?

Merci d'avance.

Le problème est dû au fait que vous "redéclarez" votre module d'application dans tous vos fichiers séparés.

Voici à quoi ressemble la déclaration du module d'application (pas sûr que la déclaration soit le bon terme):

angular.module('myApp', []).controller( //...

Voici à quoi ressemble l'affectation (pas sûr que l'affectation soit le bon terme non plus) à votre module d'application:

angular.module('myApp').controller( //...

Remarquez l'absence de crochets.

Ainsi, l'ancienne version, une avec les crochets, ne doit être utilisée qu'une seule fois, généralement dans votre fichier app.jsou main.js. Tous les autres fichiers associés - contrôleurs, directives, filtres … - doivent utiliser la dernière version, celle sans les crochets.

J'espère que cela à du sens. À votre santé!

Si vous souhaitez placer vos différentes parties de votre application ( filters, services, controllers) dans différents fichiers physiques, vous devez faire deux choses:

1. Déclarez ces espaces de noms (faute d'un meilleur terme) dans votre app.jsou dans chaque fichier;
2. Reportez-vous à ces espaces de noms dans chacun des fichiers.

Donc, vous app.jsressembleriez à ceci:

angular.module('myApp', ['external-dependency-1', 'myApp.services', 'myApp.controllers'])
.run(function() {
   //...

})
.config(function() {
  //...
});

Et dans chaque dossier individuel:

services.js

angular.module('myApp.services', []); //instantiates
angular.module('myApp.services') //gets
.factory('MyService', function() { 
  return {};
});

controllers.js

angular.module('myApp.controllers', []); //instantiates
angular.module('myApp.controllers')      //gets
.controller('MyCtrl', function($scope) {
  //snip...
})
.controller('AccountCtrl', function($scope) {
  //snip...
});

Tout cela peut être combiné en un seul appel:

angular.module('myApp.controllers', []) 
.controller('MyCtrl', function($scope) {
 //snip...
});    

L'important est que vous ne devriez pas redéfinir angular.module('myApp'); cela entraînerait son écrasement lorsque vous instanciez vos contrôleurs, probablement pas ce que vous voulez.

Vous obtenez l'erreur car vous n'avez pas myApp.servicesencore défini . Ce que j'ai fait jusqu'à présent, c'est de mettre toutes les définitions initiales dans un fichier, puis de les utiliser dans un autre. Comme pour votre exemple, je mettrais:

app.js

angular.module('myApp.services', []);

angular.module('myApp', 
    ['myApp.services',
      ...]);

Cela devrait éliminer l'erreur, même si je pense que vous devriez lire l'article Eduard Gamonal mentionné dans l'un des commentaires.