Angular.js organise les contrôleurs en espace de noms d'application

Question

Je commence à utiliser Angular.js sur un nouveau projet et de la base de tutoriels, je vois surtout un seul controllers.js fichier qui contient toutes les fonctions de contrôleur, chaque qui sont liés à l'objet window.

Il semble qu'une meilleure pratique serait d'utiliser la "myApp" espace de noms, ajouter des contrôleurs, par exemple:

myApp.controllers = {};
myApp.controllers.userItem = function($scope) {}

Tous les contrôleurs, qui serait partie à la création de la "myApp.les contrôleurs" de l'objet ou de la fenêtre".myApp.les contrôleurs".

Personne ne suggèrent une meilleure ou plus organisé de la façon de gérer les contrôleurs ou un autre élément, des services personnalisés, directives, etc. serait d'utiliser la même structure.

En plus de cela, je me débats concernant l'insertion de chaque contrôleur dans son propre fichier, qui pourrait être combiné pour la production, mais en fonction de la taille de l'application, il peut être un peu exagéré, et que causer plus de travail à rebondir entre les fichiers.

Toutes les suggestions sont grandement appréciés.

Merci!

Answer 1

Excellente question!

Je n'aime pas que la documentation et les tutoriels de prendre un forfait "par couches" approche de leur code. Je pense que c'est probablement fait pour des raisons de commodité dans l'enseignement des concepts, ce qui est excellent, mais cette approche a limité l'applicabilité dans le monde réel.

Pacakge par fonction est une bien meilleure approche:

|- README
|- src/
   |- app/
      |- app.js
      |- feature1/
      |- feature2/
      |- ...
   |- vendor/
      |- angular/
      |- bootstrap/
      |- ...
   |- assets/
   |- less/
   |- index.html

À l'intérieur d' src/app,, vous pouvez compresser votre contenu en fonction de la section du site, vous travaillez (par exemple les menus) et par des voies de communication (par exemple, liste de produits et de détails sur le produit). Chacun peut être déclarée comme suit:

angular.module( 'products', [
  'productCatalog',
  ...
])

Et chaque module peut avoir ses propres lignes:

.config( [ '$routeProvider', function( $routeProvider ) {
  $routeProvider.when( '/products', { ... } );
  $routeProvider.when( '/products/:id', { ... } );
});

Et les contrôleurs, etc:

.controller( 'ProductListCtrl', [ '$scope', function ( $scope ) { ... } ]);

Donc tout ce qui va ensemble est emballé dans le même répertoire. Et vous pouvez placer tous vos composants dans des fichiers séparés, avec un module par fichier (si vous le souhaitez; j'ai l'habitude de faire). Et dans votre application de niveau supérieur, il vous suffit de déclarer vos dépendances:

angular.module( 'app', [
  'products',
  ...
]);

Vous pouvez également bundle usage général les directives par eux-mêmes, trop, pour garder vos tests et de la documentation tous ensemble - encore une fois, en fonction de! Et chacune de ces composantes de glisser-déposer et réutilisables dans des projets d'avenir.

Une grande référence de la mise en œuvre est angulaires-app. Check it out!

Mise à jour: Depuis cette réponse, j'ai commencé un AngularJS projet kickstarter/modèle appelé ngBoilerplate pour encapsuler ces concepts (parmi beaucoup d'autres meilleures pratiques) et la sophistication d'un système de construction pour les soutenir.

Answer 2

Je fais d'habitude

 (angular
 .module('app.controllers', ['ng', ...])
 .controller('myContrA', [
     /******/ '$scope',
     function ($scope) {
     }
 ])
 .controller('myContrB', [
     /******/ '$scope',
     function ($scope) {
     }
 ])
);
 

De cette façon, vous pouvez ajouter app.controllers comme dépendance et ainsi rendre tous vos contrôleurs disponibles.