Jak wykonać ulepszenie progresywne na liście HTML za pomocą angularjs?

Question

Załóżmy, że jestem związany z dostępną witryną, która będzie konsultowana z JS wyłączonym.

Mam listę wiadomości, że mogę podsumowanie ten sposób:

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

Everytime przeładować stronę, masz najnowsze wiadomości dodanej, a starą są odrzucane, jeśli masz więcej niż 10 wiadomości .

Teraz, jeśli użyłem Angulard JS, muszę umieścić dane w modelu i powtórzyć ng i pozbyć się mojego statycznego kodu HTML. Lista zostanie wypełniona dynamicznie, dzięki czemu osoby z JS zobaczą listę zaktualizowaną niemal w czasie rzeczywistym.

Potrzebuję, aby oba działały razem. Potrzebuję statycznej listy, a jeśli JS jest aktywowany, chcę, aby obecne elementy były wstawiane do modelu i zarządzane przez angularjs.

Teraz mój obecny sposób to zrobić to:

• gdy mój model zainicjować, parthe listę DOM, wyodrębnić dane ręcznie i usunąć wszystkie liście podrzędnej
• wstrzyknąć kątową kod szablonu na liście
• niech kątowe zrobić jej magia

to jest do bani bo tracisz deklaratywny dobroć kanciasty, plus masz dużo kodu kotła to nie jest nawet generycznych, więc przepisać go na wigilię ry widget na twojej stronie.

Answer 1

To dobre pytanie, które już przyszło mi do głowy podczas korzystania z niektórych frameworków js.

Na razie chciałbym po prostu ukryć statyczny html i wyświetlić kątowy DOM, gdy włączony jest javascript.

Będziesz musiał wstrzyknąć model js równoważny statycznemu html, który generujesz, to nie jest miłe (nie DRY), ale próba uzyskania początkowych danych z DOM będzie trudniejsza w utrzymaniu IMHO. Możesz pakować wszystkie javascript/szablony w jeden plik js, w ten sposób strona statyczna będzie importować tylko jeden skrypt, a waga strony nie będzie miała wpływu na przeglądarkę noscript.