2013-12-17 38 views
30

Tôi mới dùng angularJS. Tôi đã quản lý để xây dựng một ứng dụng phonegap bằng angularJS. Các ứng dụng là ok và chạy tốt. Vấn đề là, bây giờ tôi có một chút hiểu biết hơn về cách angularJS hoạt động (ít nhất là tôi nghĩ rằng tôi có), tôi lo lắng về cấu trúc tệp ứng dụng của tôi và khả năng bảo trì mã. Dự án của tôi theo mô hình hạt giống góc. Angular Seed on GitHub nơi tôi có cấu trúc này:Ứng dụng AngularJS: Cách đưa tệp .js vào index.html

js 
    app.js 
    controllers.js 
    directives.js 
    services.js 
    filters.js 

Sau khi nghiên cứu cách cấu trúc ứng dụng với angularJS, tôi đã tìm thấy một số điều rất tốt đẹp về nó: Building Huuuuuge Apps with AngularJSHOW TO STRUCTURE LARGE ANGULARJS APPLICATIONS

Câu hỏi của tôi có vẻ rất ngớ ngẩn với tôi nhưng tôi không thể tìm ra lối thoát. Tôi quản lý để tách các bộ điều khiển của tôi vào các tập tin khác nhau và tôi có bây giờ cấu trúc này:

scripts 
    controllers 
      LoginCtrl.js 
      HomeCtrl.js 
      AboutCtrl.js 
      ClientCtrl.js 

Điều mà tôi đang phải vật lộn với là trong cách mà ứng dụng của tôi là trước đây, tôi chỉ có một tập tin controller.js . Trong tệp index.html của tôi, tôi tải tất cả các tệp kịch bản thông thường bằng cách sử dụng thẻ tập lệnh. Bây giờ tôi có 4 tệp .js khác nhau cho bộ điều khiển của tôi, làm cách nào để tải chúng vào tệp index.html của tôi? Tôi có phải tải tất cả chúng ở đó không? Nó không có vẻ đúng khi tôi tải tất cả các tập lệnh trong tệp index.html như vậy (tôi biết rằng có một tệp mã sẽ được tải theo cùng một cách, nó chỉ là lạ khi tôi có nhiều tập lệnh các thẻ được đóng gói ở đó). Tôi đã tìm thấy dự án ng-boilerplate trên github và trên index.html của họ, họ tải kiểu kịch bản động. Vấn đề là, tôi không thể bắt đầu một ng-bolierplate mới ngay bây giờ, và tôi không thể tìm thấy cách họ đã làm nó. Xin lỗi vì văn bản dài. Cảm ơn!

+0

có thể trùng lặp của [quy ước AngularJS cho nhiều tệp] (http://stackoverflow.com/questions/18241143/angularjs-convention-for-multiple-files) – Stewie

+1

Tôi chưa bao giờ sử dụng grunt trước đây. Dự án của tôi không có nó được cài đặt và tôi là một dự án phonegap vì vậy tôi thực sự bối rối về cách làm điều đó. – jpgrassi

Trả lời

12

Tham chiếu từng tệp tập lệnh trong thẻ của riêng nó trong index.html chắc chắn là một cách để thực hiện điều đó và đơn giản nhất. Tuy nhiên, nếu bạn muốn một cái gì đó sạch hơn, hãy nhìn vào một trong những hướng dẫn khác nhau để kết hợp góc với RequireJS:

http://www.startersquad.com/blog/angularjs-requirejs/

Does it make sense to use Require.js with Angular.js?

Cách tiếp cận này chủ yếu hướng vào việc giải quyết các vấn đề về những gì để tải các tệp để đáp ứng các phụ thuộc, nhưng nó cũng có hậu quả của việc làm sạch index.html ... mặc dù ở mức chi phí của cấu hình bổ sung ở nơi khác.

+0

Cảm ơn, Bài viết đầu tiên đã giúp tôi hiểu cách hoạt động của nó. Tôi sẽ suy nghĩ về việc sử dụng nó mặc dù bởi vì dự án của chúng tôi là lên và chạy và tôi không muốn có sửa đổi lớn ngay bây giờ. – jpgrassi

3

Sử dụng http://browserify.org/

Bạn nhận được rất nhiều rất đơn giản và thanh lịch commonjs modules và các thư viện tuyệt vời từ Node.js trong trình duyệt của bạn.

Mã được nhóm thành tệp js duy nhất.

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