Thực hành tốt nhất AngularJS - Mẫu vs Javascript

Question

Theo mặc định, Angular tìm nạp các mẫu HTML từ máy chủ khi người dùng điều hướng đến một tuyến đường. Với ý nghĩ đó, hãy tưởng tượng kịch bản này:

• Người dùng tải ứng dụng Góc. Chế độ xem chính có trang con được gọi là "Đơn đặt hàng".
• Trong khi người dùng đang nghiên cứu chế độ xem chính, phiên bản ứng dụng mới được triển khai trong quá trình sản xuất. Phiên bản mới có viết lại hoàn toàn trang Đặt hàng bằng Javscript và HTML mới.
• Người dùng điều hướng đến trang Đơn đặt hàng. Javascript đã được tải bởi trình duyệt ở bước 1, vì vậy người dùng đang sử dụng phiên bản cũ cho đến khi ứng dụng được tải lại. Nhưng mẫu mới được tìm nạp từ máy chủ trên điều hướng. Vì vậy, bây giờ Javascript và mẫu là đồng bộ của chúng tôi!

Giả định rằng Javascript/HTML không đồng bộ, đúng không?

Nếu có, có bất kỳ phương pháp hay nhất nào liên quan đến vấn đề này không?

Tôi đoán một giải pháp là làm cho Angular tìm nạp tất cả các mẫu khi khởi chạy ứng dụng. Nhưng đây có thể là một hình phạt hiệu suất nếu ứng dụng có hàng trăm lượt xem HTML.

Answer 1

Cảm ơn câu trả lời hay.

Hóa ra là sự cố này đã tự giải quyết cho chúng tôi. Mỗi lần chúng tôi phát hành bản phát hành mới, tất cả các phiên của người dùng sẽ bị xóa và người dùng sẽ được gửi đến trang đăng nhập. Điều này sẽ kích hoạt tải trang và JavaScript/HTML mới được tải.

Answer 2

Tôi chưa bao giờ tự hỏi về vấn đề đó. Một ý tưởng có thể là sử dụng lại mẫu được gọi là phiên bản nội dung, trong đó khi phát hành mới, bạn đổi tên tất cả nội dung của mình. Ví dụ, thay vì login.html, bạn hãy sử dụng login-xyz.html làm tên của một mẫu. xyz có thể là giá trị ngẫu nhiên hoặc tổng kiểm tra tệp. Checksum có thể là một lựa chọn tốt hơn một chút vì nếu bản phát hành mới nhỏ (nghĩa là bạn đã sửa một số lỗi nhỏ trong một tệp), nếu người dùng tải bất kỳ trang nào nhưng trang cố định sẽ không bị làm phiền khi tải lại - tất cả các tệp sẽ có cùng tổng kiểm tra, chúng sẽ hoạt động mà không bị gián đoạn.

Bằng cách này, khi ứng dụng Anguar lỗi thời tìm cách lấy mẫu, nó sẽ gặp lỗi HTTP 404. Ngoài ra, bạn có thể viết đơn giản $http interceptor, sẽ phát hiện phản hồi 404 và tự động tải lại trang (hoặc cung cấp cho người dùng tùy chọn làm như vậy).

Có các mô-đun có khả năng đổi tên nội dung, chẳng hạn như gulp-rev - nhưng tôi chưa bao giờ nghe nói về việc sử dụng mẫu đó cho các mẫu Góc. Bạn có thể thực hiện một cái gì đó như thế một mình, mặc dù.

Tất nhiên bạn có thể muốn giữ cả phiên bản tệp cũ và mới để cho phép người dùng làm việc mà không làm gián đoạn họ bằng cách làm mới. Phụ thuộc vào yêu cầu của bạn là gì. Tôi cho rằng bạn đang cố tránh điều đó.

---

mẫu 404 đánh chặn (CoffeScript, như tôi đã chuẩn bị nó sẵn bây giờ):

m.factory 'notFoundInterceptor', ($q) -> 
    return { 
    responseError: (response) -> 
     if response?.status == 404 
      # Reload, or warn user 
      return $q.defer() 

     # Not a 404, so handle it elsewhere 
     $q.reject response 
    } 

m.config ($httpProvider) -> 
    $httpProvider.interceptors.push 'notFoundInterceptor' 

Answer 3

Tôi đã đọc về vấn đề này từ lâu rồi, và một lựa chọn là để làm versioning trên các trang thay đổi và tệp tin application.js.

Ví dụ vào phiên bản 1 của ứng dụng của bạn, bạn có thể vào html một cái gì đó sử dụng tập tin của bạn như:

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

Bên trong tuyến đường của bạn cũng phiên bản templateURL

templateUrl: 'templates/view_product_v1.html' 

Vì vậy, khi bạn tung ra một phiên bản mới, bạn sẽ không ghi đè lên các mẫu và người dùng đã làm việc sẽ có phiên bản cũ cho đến khi họ tải lại trình duyệt nhưng sẽ không có phiên bản không thống nhất.

Answer 4

Việc phiên bản nội dung bằng cách sử dụng tên tệp sẽ trở nên không thể duy trì ngay cả đối với ứng dụng mặt trung bình.

Mặc dù đây là phương pháp tiếp cận trọng lượng nặng cho nội dung web bạn có thể xem xét thương lượng nội dung. Đây là nơi mà các cuộc gọi cho một nguồn tài nguyên, thường là một api REST trả về phiên bản của tài nguyên, Content-Type: application/vnd.contentful.delivery.v1+json.. Trên máy khách, bạn có thể kiểm tra phiên bản phù hợp với những gì nó mong đợi. Vì vậy, nếu khách hàng chỉ biết làm thế nào để tải v1.1 và các phản ứng tài nguyên với v1.2 giao diện người dùng sẽ biết nó không thể xử lý đó và nên tải lại trang.

Một khả năng khác là tải tất cả các mẫu lên phía trước trong giao diện người dùng. Có quá trình xây dựng trong Grunt bạn có thể chạy như https://github.com/ericclemmons/grunt-angular-templates sẽ kết hợp tất cả các mẫu của bạn thành một tệp duy nhất để phân phối và sau đó tải chúng vào $ templateCache để không có yêu cầu nào đến máy chủ.

Answer 5

Nếu bạn có một số loại ngôn ngữ phía máy chủ, bạn có thể tạo bộ lọc trong (.NET, Rails, Java hoặc bất kỳ thứ gì) và chuyển số phiên bản với các yêu cầu mẫu của bạn. Nếu phiên bản mà máy khách yêu cầu cũ hơn phiên bản được triển khai, bạn sẽ gửi lỗi cho máy khách. Khách hàng của bạn sẽ theo dõi lỗi đó ($ http interceptor) và buộc trang làm mới để kéo xuống mã javascript mới hơn. (Có thể hiển thị cảnh báo cho người dùng trước để họ biết điều gì đang xảy ra).

Answer 6

Bạn có thể tải trước tất cả các mẫu của mình vào $ templateCache và phân phối chúng dưới dạng tệp templates.js. Có một nhiệm vụ gulp cho https://www.npmjs.com/package/gulp-angular-templatecache này. Sau đó, ứng dụng của bạn sẽ tải tất cả các mẫu trong một yêu cầu duy nhất cùng với các kịch bản ứng dụng khi khởi động, do đó chúng sẽ được đồng bộ hóa. Đọc http://www.johnpapa.net/angular-and-gulp/ để biết thêm thông tin.

Answer 7

Luôn có ý nghĩa khi có số phiên bản và sử dụng số đó khi đồng bộ hóa tài nguyên. Nó không chỉ là một thực hành tốt cho trường hợp sử dụng mà bạn mô tả, mà còn cho tình huống khác, chẳng hạn như quay lại phiên bản cụ thể hoặc có hai phiên bản trực tiếp và có thể sử dụng được (ví dụ: để cho phép một số người dùng xem trước phiên bản tiếp theo)