2015-03-16 13 views
9

Tôi có một dự án nhỏ trong Angular. Tôi đang cố gắng giữ mọi thứ theo cách Trách nhiệm duy nhất và Tôi khá hài lòng với cấu trúc ứng dụng của mình. Chỉ nghĩ rằng tôi cảm thấy không phải là tìm kiếm rất tốt là index.html. Tất cả các tập tin js được bao gồm trên dưới cùng của tập tin và tôi không thích giao diện của nó. Tôi đang thêm nhiều tập tin hơn (bộ điều khiển, dịch vụ, vv) khi tôi đi và danh sách có thể phát triển khá lâu. Vì vậy, câu hỏi của tôi là: Có phải bình thường, tệp chỉ mục bao gồm tất cả những thứ này hoặc có cách nào để di chuyển tất cả các tệp này trong một tệp duy nhất và tham chiếu trong index.html không? Không.Nhiều liên kết tập lệnh trong index.html

<html> 
<head> 
    ... 
</head> 
<body> 
    ... 

    ... 


<script src="assets/js/angular.js"></script> 
<script src="assets/js/angular-route.js"></script> 
<script src="assets/js/angular-touch.js"></script> 
<script src="assets/js/angular-sanitize.js"></script> 
<script src="assets/js/angular-animate.min.js"></script> 
<script src="assets/js/jquery-2.1.3.min.js"></script> 
<script src="assets/js/bootstrap.min.js"></script> 

<script src="app/app.js"></script> 
<script src="app/app.routes.js"></script> 
<script src="controllers/controllerOne.js"></script> 
<script src="controllers/controllerTwo.js"></script> 
<script src="controllers/controllerThree.js"></script> 
<script src="directives/directiveOne.js"></script> 
<script src="directives/directiveTwo.js"></script> 
<script src="services/serviceOne.js"></script> 
<script src="services/serviceTwo.js"></script> 
<script src="services/serviceThree.js"></script> 

</body> 
</html> 

Cập nhật 07/04/2015

tôi có kết thúc bằng Gulp. Đối với bất kỳ ai tìm kiếm chút trợ giúp về điều này, tôi đã làm theo hướng dẫn nhỏ này: https://medium.com/@dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917

+0

vidriduch, câu trả lời của tôi có giải quyết được vấn đề của bạn không? –

+0

Tôi sẽ sử dụng nó như một gợi ý ... Tôi sẽ để câu hỏi mở một lúc. Tôi muốn nghiên cứu Grunt, Gulp và require.js nhiều hơn một chút, cho họ một thử và tôi sẽ cập nhật điều này một cách rõ ràng. – vidriduch

+0

Chắc chắn, Bạn được hoan nghênh để đăng kết luận của bạn sau khi nghiên cứu của bạn. chúc may mắn! –

Trả lời

7

Có vài giải pháp khả thi mà tôi biết rằng sẽ tự động tiêm thẻ script của bạn cho index.html:

  1. Sử dụng Gulp - Á hậu nhiệm vụ/Xây dựng. Bạn có thể sử dụng Gulp-Inject đó là:

    một kiểu, javascript và tiêm tham khảo webcomponent Plugin cho ngụm

  2. Grunt - JavaScript công tác Runner Bạn có thể sử dụng Grunt-Injector cho:

    Tiêm tham chiếu đến tệp vào các tệp khác (nghĩ rằng tập lệnh và bảng định kiểu thành tệp html)

  3. Một tùy chọn khác mà tôi không sử dụng là RequireJS. Xem - http://www.startersquad.com/blog/angularjs-requirejs/

Bạn có thể tìm thấy nhiều cuộc thảo luận về Gulp vs Grunt, Cả hai sẽ làm cho cuộc sống của bạn dễ dàng hơn và giải quyết vấn đề của bạn.

Xem:

Grunt vs Gulp

Another Grunt vs Gulp

1

Cách tiếp cận này hoàn toàn bình thường cho giai đoạn phát triển vì nó tạo điều kiện gỡ lỗi. Bạn không nên lo lắng về cách nó trông.

Tuy nhiên, khi phát hành ứng dụng của bạn để sản xuất, bạn nên ghép tất cả các tập lệnh thành một tệp duy nhất vì điều này sẽ tăng đáng kể thời gian khởi động của bạn. Có nhiều cách khác nhau để đạt được mục tiêu này và thường chúng liên quan đến việc sử dụng các công cụ xây dựng phía trước như Grunt hoặc Gulp. Đó là vào bạn để quyết định công cụ nào sẽ làm việc tốt nhất cho bạn.

Hơn nữa, require.js có tích hợp mô đun với một công cụ dễ sử dụng để nối, mặc dù, nó cho rằng lợi ích góc sử dụng nó như Angular có mô đun riêng của nó. Ưu điểm chính của require.js là không cần phải chú ý đến thứ tự các tệp của bạn được ghép nối vì đó là trách nhiệm của công cụ. Thật không may, nó chi phí rất nhiều mã boilerplate.

2

Những gì tôi muốn đề xuất là sử dụng một nhân vật nhiệm vụ của một số loại để ghép tất cả các tệp của bạn và xây dựng chúng thành một cái gì đó giống như tệp 'app.js' duy nhất.

Sở thích cá nhân của tôi là gulp, nhưng một lựa chọn phổ biến khác là grunt. Here là một giới thiệu tuyệt vời để sử dụng gulp với góc mà tôi đề nghị kiểm tra.

1

Sử dụng require.js, u có thể quản lý tất cả các thẻ trong một dòng

1

Là một giải pháp đơn giản, trong HTML5 bạn có thể làm điều này

<link rel="import" href="header.html"> 

và đặt tất cả các bạn

<script src="libs/....js"></script> 
<script src="libs/....js"></script> 
<script src="libs/....js"></script> 

trong header.html

+0

Điều gì sẽ xảy ra nếu trình duyệt không hỗ trợ html5? – niyasc

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