2013-04-05 36 views
11

Tôi đang làm việc để cấu trúc sạch ứng dụng AngularJS của mình theo các phương pháp hay nhất, bao gồm tách các bộ điều khiển và ứng dụng thành các tệp tập lệnh khác nhau.Tôi nên đặt AngularJS Nhà máy & Dịch vụ ở đâu?

Câu hỏi nhanh: nơi tôi nên đặt các nhà máy và dịch vụ của mình? Tôi hỏi trong bối cảnh có các nhà máy & các dịch vụ sẽ được truy cập bên ngoài phạm vi của một bộ điều khiển đơn cũng như có một số dịch vụ nằm trong phạm vi của một bộ điều khiển duy nhất.

Trả lời

8

Cập nhật: câu trả lời ngay lập tức bên dưới không còn chính xác nữa. Vui lòng xem phụ lục mới nhất (được viết vào ngày 1 tháng 3 năm 2015) cho câu trả lời này.

OK! Theo bài báo của Brian Ford trên Building Huuuuuuuge Angular Apps, việc thực hành tốt nhất dường như là để kết nối các dịch vụ và nhà máy để ứng dụng trong một file riêng biệt, như vậy:!

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

(Xuỵt Trong trường hợp bạn đang tự hỏi, Brian Ford là . một phần của đội AngularJS, vì vậy câu trả lời của anh có vẻ khá hợp pháp)

Addition (ngày 24 tháng tư năm 2013)

này chỉ tại: Yeoman là một công cụ tuyệt vời để tạo ra các ứng dụng với các thư mục phù hợp cấu trúc cho các ứng dụng góc lớn, chức năng. Nó thậm chí có Grunt & Bower được đóng gói!

Phụ Lục (ngày 01 tháng 3 năm 2015)

Theo a comment qua PaoloCargnin, Google thực sự đề xuất một cấu trúc khác nhau, như trình bày chi tiết bởi this document. Cấu trúc sẽ trông giống như sau:

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

Đây không phải là cách Google ghi lại nó. Tôi khuyên bạn nên làm theo cấu trúc này https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub – PaoloCargnin

Các vấn đề liên quan