AngularJS Folder Structure [chiuso]

Come si layout una struttura di cartelle per un'applicazione AngularJS grande e scalabile?

Ordina per tipo

Sulla sinistra abbiamo l'app organizzata per tipo. Non male per le app più piccole, ma anche qui puoi iniziare a vedere che diventa più difficile trovare quello che stai cercando. Quando voglio trovare una vista specifica e il suo controller, sono in diverse cartelle. Può essere utile iniziare qui se non si è sicuri di come organizzare il codice in quanto è abbastanza semplice passare alla tecnica a destra: struttura per caratteristica.

Ordina per funzione (preferito)

A destra il progetto è organizzato per caratteristica. Tutte le viste e i controller del layout vanno nella cartella del layout, il contenuto dell'amministratore va nella cartella dell'amministratore e i servizi utilizzati da tutte le aree vanno nella cartella dei servizi. L'idea qui è che quando stai cercando il codice che fa funzionare una funzione, si trova in un posto. I servizi sono leggermente diversi in quanto "supportano" molte funzionalità. Mi piace una volta che la mia app inizia a prendere forma in quanto diventa molto più facile da gestire per me.

Un post sul blog ben scritto: http://www.johnpapa.net/angular-growth-structure/

App di esempio: https://github.com/angular-app/angular-app

Dopo aver creato alcune applicazioni, alcune in Symfony-PHP, alcune .NET MVC, alcune ROR, ho scoperto che il modo migliore per me è usare Yeoman.io con il generatore AngularJS.

Questa è la struttura più popolare e comune e meglio mantenuta.

E, soprattutto, mantenendo quella struttura, ti aiuta a separare il tuo codice lato client e renderlo agnostico alla tecnologia lato server (tutti i tipi di diverse strutture di cartelle e diversi motori di modelli lato server).

In questo modo puoi facilmente duplicare e riutilizzare il tuo e altri codici.

Eccolo prima di Grunt Build: (ma usa il generatore yeoman, non solo crearlo!)

/app
    /scripts
            /controllers
            /directives
            /services
            /filters
            app.js
    /views
    /styles
    /img
    /bower_components
    index.html
bower.json

E dopo il grugnito build (concat, uglify, rev, ecc ...):

    /scripts
        scripts.min.js (all JS concatenated, minified and grunt-rev)
        vendor.min.js  (all bower components concatenated, minified and grunt-rev)
    /views
    /styles
        mergedAndMinified.css  (grunt-cssmin)
    /images
    index.html  (grunt-htmlmin)

Mi piace questa voce sulla struttura di angularjs

È scritto da uno degli sviluppatori di angularjs, quindi dovrebbe darti una buona idea

Ecco un estratto:

root-app-folder
├── index.html
├── scripts
│   ├── controllers
│   │   └── main.js
│   │   └── ...
│   ├── directives
│   │   └── myDirective.js
│   │   └── ...
│   ├── filters
│   │   └── myFilter.js
│   │   └── ...
│   ├── services
│   │   └── myService.js
│   │   └── ...
│   ├── vendor
│   │   ├── angular.js
│   │   ├── angular.min.js
│   │   ├── es5-shim.min.js
│   │   └── json3.min.js
│   └── app.js
├── styles
│   └── ...
└── views
    ├── main.html
    └── ...

Vi è anche l'approccio di organizzare le cartelle non in base alla struttura del framework, ma alla struttura della funzione dell'applicazione. Esiste un'applicazione Angular / Express di avvio github che illustra questa chiamata app angolare .

Sono sulla mia terza app angularjs e la struttura delle cartelle è migliorata ogni volta finora. Tengo il mio semplice adesso.

index.html (or .php)
/resources
  /css
  /fonts
  /images
  /js
    /controllers
    /directives
    /filters
    /services
  /partials (views)

Lo trovo buono per le singole app. Non ho ancora avuto un progetto in cui avrei bisogno di più.