Injecter mes contrôleurs sans avoir besoin de les placer tous dans la balise head - AngularJS

Question

J'ai une structure à mon projet d'application AngularJS comme ci-dessous:

Je visais d'avoir chaque composante a son propre contrôleur Le problème que je rencontre est que la seule façon de définir chaque contrôleur est de les empiler dans mon tag head dans le fichier index.html. Si je choisis de créer plus de pages, je vais devoir le faire encore et encore, ce qui signifie beaucoup d'appels, beaucoup de temps de chargement, etc.

Y at-il un moyen d'injecter chacun de ces contrôleurs dans l'application. fichier module.js, donc c'est le seul fichier qui doit être chargé?

merci d'avance.

Answer 1

Vous devrez toujours placer une balise de script dans votre fichier html pour chaque fichier de script que vous avez. Pour tester/apprendre, vous pouvez simplement les mettre à la main. Mais quand cela devient ennuyeux pour vous, pensez à utiliser un outil de construction comme Gulp où vous pouvez les injecter en fonction de la structure du dossier par exemple.

Answer 2

Vous pouvez définir le fichier index.js pour chaque dossier et exporter ces modules avec gulp pour bundle.js comme

module.exports = 

    angular.module('app.component.contact', [ 

    ]); 

et supposons que vous avez besoin des sous-dossiers et différentes directives au niveau du dossier de contact comme:

---contact  
    ---list  
    ---favorites 

alors:

module.exports = 
    angular.module('app.component.contact', [ 
    'angularMoment', 
    require("./list"), 
    require("./favorites"), 

]); 

une parent LSO du contact comme les composants que vous pouvez faire opération d'exportation comme ça:

module.exports = 
    angular.module('app.component', [ 
    'ui.router', 
    require('./about'), 
    require('./contact'), 
    require('./home'), 

    ]); 

c'est la simple logique des exportations des enfants vers des dossiers parents.