Làm thế nào để tăng cường tiến bộ trên danh sách HTML với angularjs?

Question

Giả sử tôi bị ràng buộc là có trang web có thể truy cập sẽ được tham vấn với JS bị vô hiệu hóa.

tôi có một danh sách tin tức mà tôi có thể tóm tắt như sau:

<ul> 
    <li>News 1</li> 
    <li>News 2</li> 
    <li>News 3</li> 
</ul> 

Mỗi lần bạn tải lại trang, bạn sẽ có được những tin tức mới nhất thêm vào, và cái cũ sẽ bị loại bỏ nếu bạn có nhiều hơn 10 tin tức .

Bây giờ, nếu tôi sử dụng JS Angulard, tôi phải đưa dữ liệu vào một mô hình và lặp lại, và loại bỏ HTML tĩnh của tôi. Danh sách sẽ được điền động, vì vậy những người có JS sẽ thấy danh sách được cập nhật trong thời gian gần như thực.

Điều tôi cần là làm cho cả hai hoạt động cùng nhau. Tôi cần danh sách tĩnh và nếu JS được kích hoạt, tôi muốn các phần tử hiện tại được chèn vào mô hình và quản lý bởi angularjs.

Bây giờ cách hiện tại của tôi để làm điều đó là:

• khi mô hình của tôi khởi tạo, parthe danh sách DOM, trích xuất các dữ liệu bằng tay, và loại bỏ tất cả các danh sách con
• tiêm góc mẫu mã trong danh sách
• hãy góc làm nó kỳ diệu

It sucks vì bạn mất sự tốt lành declarative của góc, ngoài ra bạn có rất nhiều mã nồi hơi là được thậm chí không chung chung, vì vậy bạn viết lại nó cho eve tiện ích ry trong trang của bạn.

Answer 1

Đó là một câu hỏi hay mà tôi đã vượt qua khi sử dụng một số khung công tác js.

Hiện tại, tôi chỉ ẩn html tĩnh và hiển thị DOM góc khi javascript được bật.

Bạn sẽ cần phải chèn mô hình js tương đương với html tĩnh bạn tạo, nó không thực sự đẹp (không phải DRY) nhưng cố gắng lấy dữ liệu ban đầu từ DOM sẽ khó duy trì IMHO hơn. Bạn có thể gộp tất cả javascript/mẫu trong một tệp js, theo cách đó trang tĩnh sẽ chỉ có một lần nhập tập lệnh và trọng lượng trang sẽ không bị ảnh hưởng đối với người xem noscript.