AngularJS les meilleures pratiques pour la déclaration de module?

Question

J'ai un tas de Angulaire modules déclarés dans mon application. J'ai d'abord commencé déclarant à l'aide de la "enchaîné" de la syntaxe ressemble à ceci:

angular.module('mymodule', [])
    .controller('myctrl', ['dep1', function(dep1){ ... }])
    .service('myservice', ['dep2', function(dep2){ ... }])
    ... // more here

Mais j'ai décidé que ce n'était pas très facile à lire, j'ai donc commencé à les déclarant à l'aide d'un module variable comme ceci:

var mod = angular.module('mymodule', []);

mod.controller('myctrl', ['dep1', function(dep1){ ... }]);

mod.service('myservice', ['dep2', function(dep2){ ... }]);
...

La deuxième syntaxe semble beaucoup plus lisible pour moi, mais ma seule plainte est que cette syntaxe des feuilles de l' mod variable dans la portée globale. Si jamais j'ai une autre variable nommée mod, il serait remplacé par ce prochain (et autres questions liées à des variables globales).

Donc ma question est, est-ce la meilleure façon de faire? Ou serait-il mieux de faire quelque chose comme ça?:

(function(){
    var mod = angular.module('mymod', []);
    mod.controller('myctrl', ['dep1', function(dep1){ ... }]);
    mod.service('myservice', ['dep2', function(dep2){ ... }]);
    ...
})();

Ou est-il encore question assez de soins? Juste curieux de savoir ce que les "meilleures pratiques" sont pour la déclaration de module. Merci à l'avance.

Answer 1

"Meilleure" façon de déclarer un module

Comme angulaire est sur la portée globale de lui-même et les modules sont enregistrés à son variable, vous pouvez accéder à des modules via angular.module('mymod'):

// one file
(function(){
   // declaring the module in one file / anonymous function
   // (only pass a second parameter THIS ONE TIME as a redecleration creates bugs
   // which are very hard to dedect)
   angular.module('mymod', []);
})();


// another file and/or another anonymous function
(function(){   
 // using the function form of use-strict...
 "use strict";
  // accessing the module in another. 
  // this can be done by calling angular.module without the []-brackets
  angular.module('mymod')
    .controller('myctrl', ['dep1', function(dep1){
      //..
    }])

  // appending another service/controller/filter etc to the same module-call inside the same file
    .service('myservice', ['dep2', function(dep2){ 
    //... 
    }]);

  // you can of course use angular.module('mymod') here as well
  angular.module('mymod').controller('anothermyctrl', ['dep1', function(dep1){
      //..
  }])
})();

Pas d'autres variables globales sont nécessaires.

Bien sûr, cela dépend tout sur les préférences, mais je pense que c'est la meilleure pratique, comme

1. vous n'avez pas à polluer la portée mondiale
2. vous pouvez accéder à vos modules de partout et de les trier et de leurs fonctions dans les différents fichiers à volonté
3. vous pouvez utiliser la fonction de forme de "use strict";
4. l'ordre de chargement des fichiers de n'importe pas autant

Options pour le tri de vos modules et fichiers

Il vous rend très flexible. Vous pouvez trier les modules via la fonction de type (comme décrit dans une autre réponse) ou par la route, par exemple:

/******** sorting by route **********/    
angular.module('home')...
angular.module('another-route')...
angular.module('shared')...

Comment vous le tri en fin de compte, dépend du goût personnel et de l'échelle et le type de projet. Personnellement, j'aime à le groupe tous les fichiers d'un module à l'intérieur du même dossier (classés dans des sous-dossiers de directives, des contrôleurs, des services et des filtres), y compris tous les différents test de fichiers, car il rend votre modules réutilisables. Ainsi, en moyenne de la taille des projets, je me retrouve avec une base de module, qui comprend toutes les routes de base et de leurs contrôleurs, des services, des directives et des plus ou moins complexe de sous-modules, quand je pense qu'ils pourraient être utiles pour d'autres projets,par exemple:

/******** modularizing feature-sets **********/
/controllers
/directives
/filters
/services
/my-map-sub-module
/my-map-sub-module/controllers
/my-map-sub-module/services
app.js
...

angular.module('app', [
  'app.directives',
  'app.filters',
  'app.controllers',
  'app.services',
  'myMapSubModule'
]);

angular.module('myMapSubModule',[
   'myMapSubModule.controllers',
   'myMapSubModule.services',
   // only if they are specific to the module
   'myMapSubModule.directives',
   'myMapSubModule.filters'
]);

Pour de très gros projets, j'ai souvent le groupement des modules par les routes, comme décrit ci-dessus ou par certaines routes principales, mais ça dépend vraiment.

EDIT: Juste parce qu'il est lié et je n'ai rencontré que très récemment encore: Prenez bien soin de vous créer un module qu'une seule fois (par l'ajout d'un deuxième paramètre de l'angle.module de fonction). Cela va gâcher votre demande et peuvent être très difficiles à détecter.

Answer 2

J'ai récemment eu cette énigme. J'avais commencé comme vous à l'aide de l'enchaînement de la syntaxe, mais dans le long terme, ça devient lourd avec de grands projets. Normalement je serais de créer une contrôleurs de module, un module de services et ainsi de suite dans des fichiers séparés et de les injecter dans mon application principale du module de trouver dans un autre fichier. Par Exemple:

// My Controllers File
angular.module('my-controllers',[])
    .controller('oneCtrl',[...])
    .controller('twoCtrl',[...]);

// My Services File
angular.module('my-services',[])
    .factory('oneSrc',[...])
    .facotry('twoSrc',[...]);

// My Directives File
angular.module('my-directives',[])
    .directive('oneDrct',[...])
    .directive('twoDrct',[...]);

// My Main Application File
angular.module('my-app',['my-controllers','my-services','my-directives',...]);

Mais chacun de ces fichiers a été l'obtention de façon à gros que le projet a grandi. J'ai donc décidé de les diviser en fichiers séparés en fonction de chaque contrôleur ou d'un service. J'ai trouvé que l'utilisation d' angular.module('mod-name'). sans l'injection de tableau, est ce que vous avez besoin pour que cela fonctionne. La déclaration d'une variable globale dans un fichier, et attend qu'à être facilement disponibles dans une autre juste ne fonctionne pas ou pourrait avoir des résultats inattendus.

Donc, en bref ma demande cherché quelque chose comme ceci:

// Main Controller File
angular.module('my-controllers',[]);

// Controller One File
angular.module('my-controllers').controller('oneCtrl',[...]);

//Controller Two File
angular.module('my-controllers').controller('twoCtrl',[...]);

Je l'ai fait pour les services de fichiers, pas besoin de changer l'application principale du module de fichier que vous souhaitez toujours être à injecter les mêmes modules.

Answer 3

Une autre pratique consiste à les choses les contrôleurs, directives, etc dans leurs propres modules et de les injecter ces modules dans votre "main":

angular.module('app.controllers', [])
  .controller('controller1', ['$scope', function (scope) {
    scope.name = "USER!";
  }]);

angular.module('app.directives', [])
  .directive('myDirective', [function () {
    return {
      restrict: 'A',
      template: '<div>my directive!</div>'
    }
  }]);

angular.module('app', [
  'app.controllers',
  'app.directives'
]);

Rien n'est laissé dans la portée globale.

http://plnkr.co/edit/EtzzPRyxWT1MkhK7KcLo?p=preview

Answer 4

J'aime le partage de mes fichiers et mes modules.

Quelque chose comme ceci:

app.js

var myApp = angular.module('myApp', ['myApp.controllers', 'myApp.directives', 'myApp.services']);

myApp.config(['$routeProvider', function($routeProvider) {
    /* routes configs */
    $routeProvider.when(/*...*/);
}]);

directives.js

var myDirectives = angular.module('myApp.directives', []);

myDirectives.directive( /* ... */ );

service.js

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

myServices.factory( /* ... */ );

Je ne suis pas un grand fan de la "enchaînés style", alors je préfère écrire mes variable de toujours.

Answer 5

Pour moi, le chaînage est le plus compact:

angular.module("mod1",["mod1.submod1"])

 .value("myValues", {
   ...
 })

 .factory("myFactory", function(myValues){
   ...
 })

 .controller("MainCtrl", function($scope){

   // when using "Ctrl as" syntax
   var MC = this;
   MC.data = ...;
 })
 ;

De cette façon, je peux facilement passer de composants entre les modules, jamais besoin de déclarer le même module à deux reprises, n'a jamais besoin de toutes les variables globales.

Et si le fichier est trop long, la solution est simple - divisé en deux fichiers, chaque déclarant son propre module en haut. Pour plus de transparence, j'essaie de garder un unique module par fichier et le nom qu'il ressemble le chemin d'accès complet du fichier. De cette façon, aussi je n'ai jamais besoin d'écrire un module sans [], ce qui est une douleur commune point.