Structure du fichier d'application AngularJS
Sur une grande application AngularJS, avoir tous mes contrôleurs dans un seul fichier "controllers.js" me semble un peu incontrôlable. Existe-t-il une meilleure façon de procéder, comme:
\js\controllers\myController.js
\js\controllers\yourController.js
\js\controllers\ourController.js
et cela vaut également pour les filtres, les services, les directives etc ...
Il existe de nombreuses façons d'organiser votre code. Vous pouvez regarder dans les liens suivants
- Création d'applications Huuuuuge avec AngularJS
- Organisation du code dans les grandes applications AngularJS et JavaScript
- Meilleures pratiques AngularJS: structure de répertoire
Vous pouvez suivre leur standard ou créer le vôtre.
Essayez de suivre les directives suivantes:
- Les contrôleurs ne devraient pas être trop longs, si c'est trop long, alors ils gèrent plusieurs responsabilités
- Essayez d'utiliser des directives et des services dans votre système pour réutiliser votre code/logique
- Les directives sont les choses les plus puissantes d'Angualrjs, essayez d'en tirer le maximum.
- Écrire des tests; encore mieux, vous pouvez essayer de pratiquer TDD avec AngularJS
Vous pouvez le gérer comme un module !!
Par exemple, prenez la vue utilisateur, vous créez un répertoire, ici son nom est utilisateur !!
user // directory , now put all controller ,service and directive file into it !!
-- userController.js // controller file
-- userService.js // service file
-- userDirective.js // directive file
-- views // make directory, and put all html file regarding that module into this
--users.html // html file
J'espère que ceci vous aidera!!
Vous voudrez peut-être jeter un œil à ce guide communautaire .
Le guide décrit les meilleures pratiques pour organiser la structure de répertoires d'une grande application AngularJS.
Il fait également des recommandations sur la dénomination et la structuration des modules, contrôleurs, directives, filtres et services AngularJS.
Il vaut également la peine de consulter un outil comme Lineman.js avec le modèle d'application AngularJS .
Pour les projets d'entreprise AngularJS, vous pouvez consulter ce kickstarter qui est basé sur ng -ilerplate .
Découvrez comment ces deux projets de démarrage organisent les fichiers pour une application à plus grande échelle:
Il y a un bon document de la propre équipe de Google qui sauvegarde l'exemple de Shivali: https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
Quelque chose comme ça:
sampleapp/
app.css
app.js top-level configuration, route def’ns for the app
app-controller.js
app-controller_test.js
components/
adminlogin/
adminlogin.css styles only used by this component
adminlogin.js optional file for module definition
adminlogin-directive.js
adminlogin-directive_test.js
private-export-filter/
private-export-filter.js
private-export-filter_test.js
userlogin/
somefilter.js
somefilter_test.js
userlogin.js
userlogin.css
userlogin.html
userlogin-directive.js
userlogin-directive_test.js
userlogin-service.js
userlogin-service_test.js
index.html
subsection1/
subsection1.js
subsection1-controller.js
subsection1-controller_test.js
subsection1_test.js
subsection1-1/
subsection1-1.css
subsection1-1.html
subsection1-1.js
subsection1-1-controller.js
subsection1-1-controller_test.js
subsection1-2/
subsection2/
subsection2.css
subsection2.html
subsection2.js
subsection2-controller.js
subsection2-controller_test.js
subsection3/
subsection3-1/
etc...
Vérifiez cela, créez votre angular avec CoffeeScript, SCSS.