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

j'aime angulaires-styleguide par Johnpapa, et voici quelques règles qui ont trait à cette question:

Règle: Nommé vs Fonctions Anonymes

éviter d'utiliser des fonctions anonymes:

// dashboard.js
angular
  .module('app')
  .controller('Dashboard', function() { })

à la place, utilisez les fonctions nommées:

// dashboard.js
angular
  .module('app')
  .controller('Dashboard', Dashboard);

function Dashboard() { }

comme le dit l'auteur: This produces more readable code, is much easier to debug, and reduces the amount of nested callback code.

Règle: Définir 1 composant par fichier.

éviter plusieurs composants dans un fichier:

angular
  .module('app', ['ngRoute'])
  .controller('SomeController', SomeController)
  .factory('someFactory', someFactory);

function SomeController() { }

function someFactory() { }

au lieu d'utiliser un fichier pour définir le module:

// app.module.js
angular
  .module('app', ['ngRoute']);

un fichier utilise le module pour définir un composant

// someController.js
angular
  .module('app')
  .controller('SomeController', SomeController);

function SomeController() { }

et un autre fichier pour définir un autre composant

// someFactory.js
angular
  .module('app')
  .factory('someFactory', someFactory);

function someFactory() { }

bien sûr, il y a beaucoup d'autres règles pour les modules, les contrôleurs et les services qui sont très utile et digne d'être lu.

et grâce au commentaire de ya_dimon, le code ci-dessus devrait être enveloppé dans IIFE, par exemple:

(function (window, angular) {
  angular.module('app')
   .controller('Dashboard', function () { });
})(window, window.angular);

j'ai récemment eu cette énigme aussi. J'avais commencé comme vous en utilisant la syntaxe enchaînée, mais à long terme, cela devient compliqué avec les grands projets. Normalement, je créerais un module de contrôleurs, un module de services et ainsi de suite dans des fichiers séparés et je les injecterais dans mon module d'application principal trouvé 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 dossiers prenait de l'ampleur au fur et à mesure que le projet prenait de l'ampleur. J'ai donc décidé de les diviser en des fichiers séparés basés sur chaque contrôleur ou service. J'ai découvert que l'utilisation de angular.module('mod-name'). sans la matrice d'injection, est ce dont vous avez besoin pour que cela fonctionne. Déclarer une variable globale dans un fichier et s'attendre à ce qu'elle soit facilement disponible dans un autre fichier ne fonctionne tout simplement pas ou pourrait avoir des résultats inattendus.

bref, ma demande ressemblait à 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',[...]);

j'ai fait ceci au fichier de services aussi bien, pas besoin de changer le principal vous y injecteriez encore les mêmes modules.

une autre pratique est de bourrer les contrôleurs, les directives, etc dans leurs propres modules et d'injecter ces modules dans votre "principal":

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

j'aime diviser mes fichiers et mes modules.

quelque chose comme ça:

app.js

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

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

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

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

de service.js

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

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

Je ne suis pas un grand fan du" style enchaîné", donc je préfère écrire toujours ma variable.

pour moi, l'enchaînement est la manière la plus compacte:

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 déplacer des composants entre les modules, jamais besoin de déclarer le même module deux fois, jamais besoin de variables globales.

et si le fichier devient trop long, la solution est simple - divisé en deux fichiers, chacun déclarant son propre module au sommet. Pour plus de transparence, j'essaie de garder un module unique par fichier et de le nommer ressemblant au chemin complet du fichier. De cette façon aussi je n'ai jamais besoin d'écrire un module sans [] , qui est une douleur commune point.

je vous suggère de suivre Guide de style Angularjs .

Ils gèrent tout le concept de la convention de nommage, pour modulariser votre application et ainsi de suite.

pour angular 2, Vous pouvez cocher Guide de Style Angular 2