web-dev-qa-db-fra.com

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 ...

30
AndrewMcLagan

Il existe de nombreuses façons d'organiser votre code. Vous pouvez regarder dans les liens suivants

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
49
Imrul

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!!

9
Shivali Patel

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 .

3
user2845946

Découvrez comment ces deux projets de démarrage organisent les fichiers pour une application à plus grande échelle:

3
Alexander Puchkov

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...
3
marksyzm

Vérifiez cela, créez votre angular avec CoffeeScript, SCSS.

https://github.com/nhim175/modular-angular-skeleton/

0
Thịnh Phạm