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

Question

Je suis à l'aide de l' angulaire de pépins de modèle pour la structure de mon application. Au départ, j'ai mis tout mon code JavaScript dans un fichier unique, main.js. Ce fichier contenait mon module de déclaration, des contrôleurs, des directives, des filtres et des services. L'application fonctionne très bien comme ça, mais je suis inquiet sur l'évolutivité et la maintenabilité que ma demande devient de plus en plus complexe. J'ai remarqué que l'angle de graines de modèle a des fichiers distincts pour chacun d'eux, j'ai donc essayé de distribuer mon code à partir de la seule main.js fichier dans chacun des autres fichiers mentionnés dans le titre de cette question et a trouvé dans l' app/js répertoire de l' angulaire de pépins de modèle.

Ma question est: comment puis-je gérer les dépendances afin d'obtenir l'application au travail? La documentation existante trouvé ici n'est pas très claire à ce sujet, puisque chacun de ces exemples montre un seul fichier source JavaScript.

Un exemple de ce que j'ai, c'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 puis-je gérer les dépendances?

Merci à l'avance.

Answer 1

Le problème est causé par vous "redeclaring" de votre module d'application dans tous vos fichiers séparés.

C'est ce que l'application du module de déclaration (pas sûr de déclaration est le bon terme) ressemble à:

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

C'est ce que l'affectation (pas sûr si l'affectation est le bon terme) de votre module d'application ressemble:

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

Constater l'absence de crochets.

Ainsi, l'ancienne version, une avec les crochets, doit être utilisé une seule fois, généralement dans votre app.js ou main.js. Tous les autres fichiers associés - contrôleurs, des directives, des filtres ... - utilise la dernière version, celle sans les crochets.

J'espère qu'un sens. Cheers!

Answer 2

Vous obtenez le message d'erreur parce que vous ne définissez pas d' myApp.services encore. Ce que j'ai fait jusqu'à présent est de mettre toutes les définitions initiales dans un fichier, et ensuite les utiliser dans un autre. Comme pour ton exemple, je mettrais dans:

app.js

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

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

Qui devrait se débarrasser de l'erreur, mais je pense que vous devriez avoir à lire l'article Eduard Gamonal mentionné dans un des commentaires.