web-dev-qa-db-fra.com

AngularJS App: comment inclure des fichiers .js dans index.html

Je suis nouveau sur angularJS. J'ai réussi à créer une application phonegap en utilisant angularJS. L'application est correcte et fonctionne très bien. Le problème est que, maintenant que j'ai un peu plus de compréhension sur le fonctionnement d'angularJS (du moins je pense que je l'ai), je m'inquiète de la structure des fichiers de mon application et de la maintenabilité du code. Mon projet suit le modèle de graines angulaires. Angular Seed on GitHub où j'ai cette structure:

js
   app.js
   controllers.js
   directives.js
   services.js
   filters.js

Après avoir cherché à structurer des applications avec angularJS, j'ai trouvé de très beaux articles à ce sujet: Construire des applications Huuuuuge avec AngularJS et COMMENT STRUCTURER DE GRANDES APPLICATIONS ANGULARJS

Ma question me semble très idiote mais je n'ai pas trouvé d'issue. J'ai réussi à séparer mes contrôleurs en différents fichiers et j'ai maintenant cette structure:

scripts
    controllers
             LoginCtrl.js
             HomeCtrl.js
             AboutCtrl.js
             ClientCtrl.js

La chose avec laquelle je me bats, c'est que, comme c'était le cas auparavant pour mon application, je n'avais qu'un seul fichier controller.js. Dans mon fichier index.html, je charge tous les fichiers de script en utilisant normalement la balise de script. Maintenant que j'ai 4 fichiers .js différents pour mes contrôleurs, comment les charger dans mon fichier index.html? Dois-je tous les charger là-bas?

Cela ne me semble pas correct de charger tous les scripts dans le fichier index.html comme ça (je sais que le fait d'avoir un fichier le code sera chargé de la même manière, c'est juste bizarre pour moi d'avoir de nombreuses balises de script emballées là-bas) . J'ai trouvé le projet ng-kettleplate sur github et sur leur index.html, ils chargent les scripts de manière dynamique. Le problème est que je ne peux pas démarrer une nouvelle plaque ng-bolier en ce moment et je n'ai pas pu trouver comment ils l'ont fait. Désolé pour le long texte. Merci!

javascriptangularjsangular-seed
30
jpgrassi

Référencer chaque fichier de script dans sa propre balise dans index.html est certainement une façon de le faire, et la plus simple. Cependant, si vous voulez quelque chose de plus propre, jetez un œil à l'un des différents guides pour combiner Angular avec RequireJS:

http://www.startersquad.com/blog/angularjs-requirejs/

Est-il judicieux d'utiliser Require.js avec Angular.js?

Cette approche vise principalement à résoudre le problème de l'ordre de chargement des fichiers afin de satisfaire les dépendances, mais elle a également pour conséquence de nettoyer le fichier index.html ... mais au prix d'une configuration supplémentaire ailleurs.

12
S McCrohan

Utilisez http://browserify.org/

Vous obtenez très simple et élégant modules commonjs et beaucoup de bibliothèques incroyables de node.js dans votre navigateur.

Le code est regroupé dans un seul fichier js.

3
Sava Jcript