2013-04-05 19 views
11

Ich arbeite daran, meine AngularJS-App nach Best Practices sauber zu strukturieren, einschließlich der Trennung der Controller und der App in verschiedene Skriptdateien.Wo sollte ich AngularJS Factories & Services platzieren?

Schnelle Frage: wo sollte ich meine Fabriken und Dienstleistungen setzen? Ich frage im Zusammenhang mit Fabriken & Dienstleistungen, die außerhalb des Bereichs eines einzelnen Controllers sowie einige, die im Rahmen eines einzigen Controllers sind zugegriffen werden.

Antwort

8

Update: Die unmittelbare Antwort unten ist nicht mehr korrekt. Bitte beachten Sie die letzte Ergänzung (geschrieben am 1. März 2015) zu dieser Antwort.

Verstanden! Laut Brian Ford Artikel über Building Huuuuuuuge Angular Apps scheint die beste Praxis für die App in einer separaten Datei zu verbinden Dienste und Fabriken zu sein, wie so:

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 Falls Sie sich fragen, Brian Ford . Teil des AngularJS Teams, so seine Antwort scheint ziemlich legit)

Addition (24. April 2013)

Dieses gerade in: Yeoman ist ein fantastisches Werkzeug für Anwendungen mit dem richtigen Verzeichnis zu erzeugen Struktur für große, funktionale Angular Apps. Es hat sogar Grunt & Bower verpackt!

Addendum (1. März 2015)

Nach a comment über PaoloCargnin, Google empfiehlt eigentlich eine andere Struktur, wie sie durch this document beschrieben. Die Struktur sollte so aussehen:

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

Dies ist nicht, wie Google es dokumentiert. Ich empfehle Ihnen, dieser Struktur https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub zu folgen – PaoloCargnin

Verwandte Themen