Dove posso inserire le fabbriche e i servizi di AngularJS?

Question

Sto lavorando per strutturare in modo pulito la mia app AngularJS in base alle migliori pratiche, che include la separazione dei controller e dell'app in diversi file di script.

Domanda veloce: dove dovrei mettere le mie fabbriche e servizi? Chiedo nel contesto di avere fabbriche & servizi a cui si accederà al di fuori dell'ambito di un singolo controller e di avere alcuni che rientrano nell'ambito di un singolo controller.

Answer 1

Aggiornamento: la risposta immediata di seguito non è più corretta. Si prega di consultare l'ultima appendice (scritta il 1 marzo 2015) a questa risposta.

Trovato! Secondo l'articolo di Brian Ford sulla Building Huuuuuuuge Angular Apps, la migliore pratica sembra essere quello di collegare i servizi e fabbriche per l'applicazione in un file separato, in questo modo:!

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

(PSST Nel caso in cui vi state chiedendo, Brian Ford è . parte della squadra AngularJS, quindi la sua risposta sembra abbastanza legittima)

Addizione (24 aprile 2013)

Questo solo in: Yeoman è un fantastico strumento per la generazione di applicazioni con la directory appropriata struttura per app Angolari grandi e funzionali. Ha anche Grunt & Bower imballato in!

Addendum (1 marzo 2015)

Secondo a comment via PaoloCargnin, Google consiglia in realtà una struttura diversa, come indicato dalla this document. La struttura dovrebbe assomigliare a questa:

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