Vị trí của chỉ thị ng-app (html vs body)

103

Gần đây tôi đã xem lại mã cho một ứng dụng web được xây dựng với góc cạnh và thấy rằng nó được viết với lệnh ng-app="myModule"được đặt trên <body>thẻ. Khi tìm hiểu về góc cạnh, tôi chỉ từng thấy nó được sử dụng trên <html>thẻ, theo khuyến nghị của các tài liệu về góc ở đây , tại đây và trong hướng dẫn của họ .

Tôi đã tự khám phá vấn đề này một chút và tìm thấy các câu hỏi SO, đặc biệt là câu hỏi này và tương tự câu hỏi này , thảo luận về việc tải nhiều mô-đun cho một trang. Tuy nhiên, kỹ thuật này khác với trường hợp của tôi, vì nó liên quan đến việc đặt ng-app trên các phần tử trong phần thân và sử dụng khởi động thủ công để chạy hai ứng dụng góc cùng một lúc.

Theo như tôi có thể nói, không có sự khác biệt trong thời gian chạy giữa một ứng dụng với ng-appbật <html>hoặc <body>. Theo tôi hiểu, nó ng-appchỉ định gốc của một ứng dụng có góc cạnh, vì vậy việc đặt nó trên ứng dụng <body>sẽ cắt <head>ra khỏi phạm vi của góc, nhưng tôi không thể nghĩ ra cách nào chính điều này sẽ ảnh hưởng đến mọi thứ. Vì vậy, câu hỏi của tôi là: Sự khác biệt về kỹ thuật giữa việc đặt ng-apptrên một trong những thẻ này thay vì thẻ kia là gì?

angularjs

— MattDavis
nguồn

Câu trả lời:

144

Không có sự khác biệt lớn ở nơi bạn đặt ng-app.

Nếu bạn đặt nó vào <body>thì bạn có một phạm vi nhỏ hơn cho AngularJS, nhanh hơn một chút .

Nhưng tôi đã sử dụng ng-apptrên <html>để thao tác <title>.

— Haralan Dobrev
nguồn

Cảm ơn vì câu trả lời! Về cơ bản, đây là kết luận mà tôi muốn đưa ra, vì vậy thật tốt khi biết rằng những người khác cũng đang nghĩ cùng quan điểm. Tôi quan tâm đến chính xác lý do tại sao nó nhanh hơn và nó có thể nhanh hơn bao nhiêu, bạn có thể giải thích thêm về điều đó không hoặc bạn có tài liệu tham khảo nào có thể minh họa điều này không?

— MattDavis

Tôi thực sự có nghĩa là nhanh hơn một chút . Nó là tối thiểu. Chỉ phạm vi nhỏ hơn có nghĩa là ít phần tử hơn trong đó AngularJS để tìm kiếm các chỉ thị. Ví dụ, nếu bạn có rất nhiều thành phần meta cho Open Graph, nó có thể có một tác động nhỏ.

— Haralan Dobrev

tiêu đề. đó là lý do thực sự.

— ahnbizcad

Tôi sẽ chỉ sử dụng javascript đơn giản để thay đổi tiêu đề.

— Sean_A91

@ Sean_A91 nếu bạn có toàn bộ trang được chạy bởi AngularJS thì bạn nên sử dụng Angular cho việc đó sẽ hợp lý hơn. Nó nhất quán hơn giúp tăng khả năng bảo trì và bạn cũng có thể sử dụng lại mô hình tiêu đề trong phần thân trang.

— Haralan Dobrev

Tôi ở trong một nhóm làm việc trên một ứng dụng cũ và thấy tốt nhất nên sử dụng thẻ ng-app trong một div được sử dụng làm trình bao bọc để tách mã mới khỏi mã cũ.

Chúng tôi đã phát hiện ra điều này khi làm việc trên ứng dụng phụ thuộc nhiều vào jqGrid và Dojo.

Khi chúng tôi thêm ng-app vào thẻ head, nó đã làm nổ tung trang web, nhưng khi chúng tôi sử dụng trình bao bọc, chúng tôi có thể sử dụng Angular mà không gặp vấn đề gì.

— Peter Drinnan
nguồn

Đây là một ví dụ điển hình về việc tôi phân biệt ba trường hợp sử dụng cho Angular: "ứng dụng trang đơn", "độc lập" (tức là tiếp quản trang nhưng sử dụng liên kết bình thường đến các trang khác) và "mixin" (tức là chỉ bật một chút trang). Bạn đã mô tả chính xác cách sử dụng mixin và trong trường hợp đó, ng-app hoàn toàn đồng ý chỉ nên nằm trên div nơi áp dụng mixin. Tuy nhiên, đối với các sử dụng độc lập hoặc SPA, tôi nghĩ rằng nó nên ở trên <html>.

— crazy4jesus

@ crazy4jesus Bạn có biết bất kỳ bài viết nào về các tùy chọn sử dụng khác nhau cho Angular không? Tất nhiên có rất nhiều thông tin về phiên bản SPA được đề xuất, nhưng gần đây tôi đã phải thêm Angular vào cơ sở mã nặng jQuery và đang tự hỏi đâu là lựa chọn tốt nhất ở đây để sử dụng nó thành công và không bị điên.

— Senthe

Đó có thể là một mẹo khó @Senthe. Như bạn đã khám phá ra chắc chắn, góc thích phụ trách DOMain của riêng nó. Tôi nghĩ nó ít nói về các vùng chồng chéo của trang và nhiều hơn về việc kiểm soát vùng đó. Có nghĩa là, bạn vẫn có thể sử dụng jquery trong các khu vực góc cạnh, nhưng hãy bắt đầu với mã góc cạnh - không dễ dàng khi trang đã tồn tại! Nói cách khác, không phải các lệnh gọi jquery bắt buộc phải thực hiện, vì nội dung giữa các thẻ <script> phải chuyển vào các cấu trúc góc cạnh - bộ điều khiển và chỉ thị. Điều đó có ý nghĩa gì?

— fool4jesus

AngularJS sẽ khởi động ng-app đầu tiên mà nó tìm thấy! Đó là nó. Nếu bạn có nhiều ng-app, nó sẽ chỉ xử lý cái đầu tiên. Nếu bạn muốn bootstrap bất kỳ phần tử nào khác, hãy sử dụng angle.bootstrap ()

Giá trị của thuộc tính ng-app là một mô-đun đã được tạo bằng cách sử dụng:

angular.module("module_name", [])

Một mô-đun xác định cách thức góc sẽ được khởi động bởi vì chúng ta không có phương thức main () không giống như các ngôn ngữ lập trình khác. Nếu giá trị của ng-app trống, thì nó sẽ mặc định sử dụng 'ng', mô-đun mặc định.

Nó được cho là nhanh hơn một chút vì góc sẽ xử lý tất cả các phần tử bên trong phần tử mà ng-app ở đó. Nhưng tôi hơi nghi ngờ một phần vì sự khác biệt sẽ khó nhận ra chút nào, trừ khi bạn có một DOM rất cồng kềnh.

Nếu bạn muốn các ví dụ tại đây: http://noypi-linux.blogspot.com/2014/07/angularjs-tutorials-und hieu.html

— Noypi Gilas
nguồn