AngularJS: cấu trúc một ứng dụng web với nhiều ứng dụng ng

Thế giới blog có một số bài viết về chủ đề hướng dẫn cấu trúc ứng dụng AngularJS như những điều này (và những thứ khác):

• http://www.johnpapa.net/angular-app-structuring-guferences/
• http://codingsmackdown.tv/blog/2013/04/19/angularjs-modules-for-great-justice/
• http://danorlando.com/angularjs-arch architecture-under Hiểu-mô-đun /
• http://henriquat.re/modularizing-angularjs/modularizing-angular-appluggest/modularizing-angular-appluggest.html

Tuy nhiên, một kịch bản tôi chưa đưa ra để được hướng dẫn và thực hành tốt nhất là trường hợp bạn có một ứng dụng web lớn chứa nhiều ứng dụng "mini-spa" và các ứng dụng spa mini đều chia sẻ một số mã nhất định.

Tôi không đề cập đến trường hợp cố gắng có nhiều ng-appkhai báo trên cùng một trang; đúng hơn, ý tôi là các phần khác nhau của một trang web lớn có ng-apptuyên bố độc đáo của riêng họ .

Như Scott Allen viết trên blog OdeToCode của mình:

Một kịch bản tôi chưa tìm thấy được giải quyết rất tốt là kịch bản có nhiều ứng dụng tồn tại trong cùng một ứng dụng web lớn hơn và yêu cầu một số mã được chia sẻ trên máy khách.

Có bất kỳ cách tiếp cận được đề xuất nào, những cạm bẫy cần tránh, hoặc các cấu trúc mẫu tốt của kịch bản này mà bạn có thể chỉ ra?

Cập nhật - 9/10/2015
Một dự án với chiến lược tổ chức thú vị là MEAN.JS và thư mục mô-đun.
https://github.com/meanjs/mean
https://github.com/meanjs/mean/tree/master/modules

Một ví dụ khác là từ ví dụ ASP.NET Music Store SPA. https://github.com/aspnet/MusicStore https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps

Đây là thiết kế mà tôi làm việc với. Tôi thấy nó hữu ích trên hai dự án lớn hơn mà tôi đã xây dựng và chưa đạt được bất kỳ khối đường nào cho đến nay.

Cấu trúc thư mục

your-project/
  apps/
    global.html
    app1/
      index.html
      app1.module.js
      app1.js
      parts/
        foo.js
        foo.html
        ...
    app2/
  libs
    lib1/
      lib1.module.js
      parts/
        directive1.js
        directive1.html
    lib2/
  third-party/

• Định cấu hình khung web máy chủ của bạn để tìm apps/app1/index.htmlkhi có yêu cầu /app1đến. Sử dụng URL thân thiện (ví dụ: the-first-application/thay vì app1/và ánh xạ chúng bằng công nghệ máy chủ của bạn nếu được yêu cầu.
• Công nghệ máy chủ của bạn phải bao gồm global.htmltrong index.htmlvì nó có chứa các nhà cung cấp bao gồm (xem dưới đây).
• Bao gồm các tài sản theo yêu cầu của ứng dụng tương ứng trong index.html(xem bên dưới).
• Đặt ng-appvà gốc <div ui-view></div>trong index.html.
• Mỗi ứng dụng và lib là một mô-đun góc riêng biệt.
• Mỗi ứng dụng có một <app-name>.module.jstệp chứa định nghĩa mô-đun góc và danh sách phụ thuộc.
• Mỗi ứng dụng có một <app-name>.jstệp chứa cấu hình và các khối chạy của mô-đun và cấu hình định tuyến là một phần của nó.
• Mỗi ứng dụng có một partsthư mục chứa các bộ điều khiển, chế độ xem, dịch vụ và chỉ thị của ứng dụng trong một cấu trúc có ý nghĩa đối với ứng dụng cụ thể . Tôi không xem các thư mục con như controllers/, views/v.v ... hữu ích, vì chúng không mở rộng, nhưng YMMV.
• Libs theo cấu trúc tương tự như các ứng dụng, nhưng bỏ đi những thứ mà chúng không cần (rõ ràng).

Bắt đầu với các dịch vụ và chỉ thị trong ứng dụng nơi chúng được sử dụng. Ngay khi bạn cần một cái gì đó trong một ứng dụng khác, hãy cấu trúc lại thư viện. Cố gắng tạo các thư viện nhất quán theo chức năng, không chỉ các thư viện all-directive hay all-services.

Tài sản

Tôi thu nhỏ cả hai tệp JS và CSS để phát hành bản dựng nhưng hoạt động với các tệp chưa được tối ưu hóa trong quá trình phát triển. Đây là một thiết lập hỗ trợ này:

• Quản lý nhà cung cấp bao gồm toàn cầu trong global.html. Bằng cách này, những thứ nặng có thể được tải từ bộ đệm khi điều hướng giữa các SPA. Hãy chắc chắn rằng bộ nhớ đệm hoạt động thích hợp.
• Tài sản Per-SPA được xác định trong index.html. Điều này chỉ nên bao gồm các tệp dành riêng cho ứng dụng cũng như các thư viện được sử dụng.

Cấu trúc thư mục ở trên giúp bạn dễ dàng tìm thấy các tệp phù hợp cho các bước xây dựng thu nhỏ.

Ứng dụng Trang đơn (SPA) không thực sự được sử dụng theo cách mà bạn đề xuất với một ứng dụng thực sự lớn và nhiều SPA nhỏ trong phạm vi chính. Vấn đề lớn nhất sẽ là thời gian tải trang vì mọi thứ phải được tải lên phía trước.

Một cách để giải quyết vấn đề này là sử dụng trang điều hướng sẽ đưa bạn đến từng SPA. Trang điều hướng sẽ khá nhẹ và sau đó bạn sẽ chỉ tải một SPA tại một thời điểm dựa trên những gì đã được chọn. Bạn có thể cung cấp một thanh liên kết với các liên kết điều hướng trong mỗi SPA của mình để người dùng không phải quay lại trang điều hướng khi họ cần đi đến một khu vực khác.

Sử dụng phương pháp này có thể tạo ra một số thách thức với thông tin vẫn còn tồn tại trên khắp các SPA. Nhưng chúng ta đang nói về điều mà các SPA không có ý định làm. Có một số khung có thể giúp duy trì dữ liệu phía máy khách. Breeze là người đầu tiên nghĩ đến, nhưng có những người khác.

Về bố cục - một số câu hỏi của Lập trình viên giải quyết bố cục dự án lớn, tùy thuộc vào nhu cầu cụ thể của bạn. Tôi đã đi qua cái này và cái này . Không có gì kỳ diệu về các SPA sẽ ảnh hưởng đến bố cục ứng dụng của bạn ngoài những gì đã được trả lời trong những câu hỏi đó.

Điều đó nói rằng, có những cách tiếp cận khác nhau hoạt động tốt nhất cho các dự án khác nhau. Tôi sẽ khuyên bạn nên gắn bó với bố cục cơ sở như được cung cấp bởi dự án hạt giống góc. Tạo các thư mục riêng biệt từ các thư mục được cung cấp cho các gói và mã nguồn tùy chỉnh của bạn. Và trong thư mục nguồn của bạn, hãy sử dụng bố cục dự án phù hợp với nhu cầu của bạn.

Nếu ứng dụng của bạn cần nhiều khai báo ng-app trên cùng một trang, thì bạn cần phải tự khởi động mô-đun AngularJS bằng cách nhập tên mô-đun như dưới đây:

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

Đây plunker nói rõ về việc làm thế nào chúng bằng tay có thể bootstrap AngularJS.