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

Je suis en utilisant le angulaire de la graine 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 le app/js répertoire de la angulaire de la graine 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 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 d'avance.

  • il y a quelques articles à ce sujet. par exemple, briantford.com/blog/huuuuuge-angular-apps.html, et de certains projets, comme yeoman. thereare deux façons de procéder: la séparation des composants par des couches (comme angulaires-graine) ou par fonction, à l'instar de certains articles suggèrent.
  • Lorsque vous déclarez un module par exemple angulaire.module('myApp.service1', []) je pense que vous avez besoin d'ajouter des dépendances à la [] par exemple, angulaire.module('myApp.service1', ['myApp.service2', 'myApp.service2']).. Je suis assez nouveau à AngularJS, donc j'ai peut-être tort. Si cela fonctionne, laissez-moi savoir et je vais poster une réponse.
  • Où faut que la ligne sera insérée? J'ai mis angular.module('myApp.services', ['myApp.services']); en app.js avec pas de chance.
  • 1. Lorsque vous répondez aux commentaires, toujours commencer le commentaire par " @ " et le nom de l'utilisateur (sans les espaces), de sorte que l'utilisateur recevra une notification. 2. myApp.les services devraient être dépendant des autres modules, et non pas sur lui-même, par exemple,angular.module('myApp.services', ['myApp.server', 'myApp.somethingElse']).
  • avez-vous modifier votre commentaire précédent? Je l'ai lu comme angular.module('myApp.service1', ['myApp.service1', 'myApp.service2']) à l'origine. Sinon, je n'aurais pas inclus myApp.des services comme sa propre dépendance.
  • Uniquement pour ajouter la dernière phrase.
  • Alors, pourquoi voulez-vous la liste myApp.service2 deux fois? En tout cas, je ne cherche pas à ajouter des dépendances entre les services, seulement à l'application principale. Donc plus utile exemple serait exactement comme celui trouvé dans mon app.js code.
  • Plus ou moins la même, il suffit d'ajouter les dépendances de l'application de la définition.
  • Trouvé le problème: AppCtrl dépend MyService. Solution ajouter de la dépendance " myApp.services "à la" myApp.des contrôleurs.
  • En fait, il n'est pas nécessaire d'ajouter que la dépendance tant que le fichier html listes le code source pour le service dans une balise script.
  • Est-ce à dire que vous avez essayé?
  • J'ai. Aucun de mes fichiers ont liste des dépendances entre les crochets. Aussi longtemps que j'utilise le contrôleur, le service, le filtre ou le nom de la directive trouvé dans leurs déclarations respectives, alors je peux utiliser n'importe où et AngularJS va les trouver (à condition que le code source contenant la référence se trouve dans une balise html script sur la page correspondante).

InformationsquelleAutor ChrisDevo | 2013-05-27
  1. 108

    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, soit à votre module d'application ressemble:

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

    Constater l'absence de crochets.

    Donc, l'ancienne version, on 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!

    • Merci, Justin, mais cela ne semble pas fonctionner non plus. Bien qu'il ne me donner quelques nouvelles erreurs: Uncaught Error: No module: myApp.controllers, Uncaught Error: No module: myApp.filters (deux fois), Uncaught Error: No module: myApp.services.
    • J'ai trouvé une solution à ce problème. Il semble qu'un seul module est nécessaire myApp. Dans mon app.js fichier que j'ai créé un var pour elle var myApp = angular.module('myApp', []); Dans tous les autres fichiers que je faisait simplement référence à cette variable (par exemple, myApp.filter('myFilter', function(MyService) { /* filter code */ }); aussi longtemps Que j'ai ajouté les noms de fichier dans les balises de script dans mon code html, je n'ai pas besoin de déclarer toutes les autres dépendances. L'angle de graines modèle de projet est assez déroutant à cet égard.
    • Maintenant, je suis vraiment confus. J'ai supprimé le mondial var myApp, de sorte qu'il est maintenant un anonyme, un module de app.js: angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']);. Dans tous les autres fichiers que j'ai également déclaré anonyme modules angular.module('myApp.filter', []).filter('myFilter', function(MyService) { /* filter code */ });. Mon application fonctionne maintenant comme cela aussi. J'ai dépassé mon code d'histoire et je ne vois pas où c'est toute différente de ce que j'quand elle n'a pas de travail.
    • Je vous promets que cela fonctionne. Je l'utilise chaque jour, l'élaboration Angulaire Apps. Encore une fois, j'ai une déclaration de angular.module('myApp', []); (noter les crochets) dans le principal de mon fichier js. Ensuite, tous les autres fichiers, reportez-vous au module à l'aide de la angular.module('myApp').controller ou .directive de la syntaxe.
    • Les erreurs sont dues au fait que les Angulaires est à la recherche de modules appelés myApp.contrôleur de myApp.les filtres ... mais, ceux qui ne sont pas des modules, ils sont des composants de l'extension de l'un module appelé myApp. Tout devrait fonctionner si vous supprimez tous vos myApp.tout ce à partir de votre module de dépendances. Il suffit de garder les crochets vides (sauf si vous êtes y compris d'autres vrai angulaire des modules, par exemple ngCookies, ngResource) lors de la déclaration de votre application principale du module: angular.module('myApp', []);
    • Merci, j'ai compris cela, et cependant je vous remercie pour vos précisions. Je ne suis pas sûr pourquoi, la angulaires-graine modèle définit toutes les dépendances comme il le fait. Il s'avère que mon erreur d'origine n'était pas vraiment un problème de dépendance. C'était le résultat de l'appel à mon service sans s'assurer qu'il a été chargé (et donc défini). Maintenant j'ai besoin de comprendre comment utiliser ngResource je pense.
    • Ah, d'accord. En plaçant celles-ci comme une dépendance de votre application module, il va l'erreur, car il est pour les trouver. Si vous les sortez de crochets, vous pouvez les charger à volonté et votre application ne sera pas un souci. ngResource est certainement l'un de ceux que vous placez dans votre déclaration de module entre parenthèses. Si ma réponse t'aider, le vote et l'approbation qu'il serait très apprécié.
    • J'apprécie votre aide.
    • vous êtes à la recherche pour cela? stackoverflow.com/questions/12655890/...
    • Merci pour cette super réponse qui a sauvé ma journée. Je préfère avoir un fichier séparé/module de déclaration pour les dépendances angular.module('app.submodule', ['dependency1', 'dependency2');, comme je ne suis pas à l'aise de laisser la responsabilité du contrôleur

    InformationsquelleAutor Justin L.
  2. 11

    Si vous êtes désireux de mettre vos différentes parties de votre application (filters, services, controllers) dans les différents fichiers physiques, il y a deux choses que vous avez à faire:

    1. Déclarer les espaces de noms (par manque d'un meilleur terme) dans votre app.js ou dans chaque fichier;
    2. Se référer à ces espaces de noms dans chacun des fichiers.

    Donc, votre app.js devrait ressembler à ceci:

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

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

    Et dans chaque fichier:

    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...
});

    Tous ces éléments peuvent être combinés en un seul appel:

    controllers.js 

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

    L'important, c'est que vous ne devriez pas redéfinir angular.module('myApp'); que serait la cause d'être écrasées lors de l'instanciation de vos contrôleurs, probablement pas ce que vous voulez.

    • J'aime cette approche, vous pouvez l'utiliser pour créer une structure à plusieurs niveaux (dire votre contrôleur a besoin d'un service ou d'un filtre). Remarque, j'ai aussi trouvé que, une fois un sous-dépendance (comme le filtre d'un contrôleur) est injecté, il est également disponible à tous les parents ci-dessus (si la visualisation comme un arbre), sans re-déclarer l'injection, il suffit de ne pas l'oublier si vous modifiez l'enfant et de l'utiliser dans le parent. Aussi je vous recommande de ne jamais mettre plus d'un module (espace de noms) dans un fichier et n'essayez jamais d'utiliser le même espace de noms dans plusieurs fichiers.
    • Que faire si j'ai deux fichiers de contrôleur ou deux services de fichiers? L'instancier serait arriver unique pour chaque fichier?
    InformationsquelleAutor George Stocker
  3. 3

    Vous obtenez l'erreur parce que vous n'avez pas de définir 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.

    • Merci, Torsten, mais j'ai lu l'article et ajout de la ligne angular.module('myApp.services', []); à mon app.js fichier. Ni vraiment traite de mon problème.
    InformationsquelleAutor Torsten Engelbrecht