Come eseguire un miglioramento progressivo su un elenco HTML con angularjs?

Question

Diciamo che sono legato ad avere un sito accessibile che verrà consultato con JS disabilitato.

Ho un elenco delle notizie che posso sintesi in questo modo:

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

Ogni volta che si ricarica la pagina, si ottiene le notizie più recenti ha aggiunto, e quello vecchio vengono scartati se hai più di 10 notizie .

Ora, se ho usato Angulard JS, devo inserire i dati in un modello e una ng-repeat e sbarazzarmi del mio codice HTML statico. L'elenco verrà popolato in modo dinamico, quindi le persone con JS vedranno l'elenco aggiornato in tempo quasi reale.

Quello che mi serve è far lavorare i due insieme. Ho bisogno dell'elenco statico e, se JS è attivato, voglio che gli elementi attuali vengano inseriti nel modello e gestiti da angularjs.

Ora il mio attuale modo per farlo è:

• quando il mio modello di inizializzare, Parthe la lista DOM, estrarre manualmente i dati, e rimuovere tutta la lista bambino
• iniettare codice modello angolare nella lista
• cerchiamo angolare fare la sua magia

fa schifo perché si perde la bontà dichiarativa di angolare, più si ha un sacco di codice caldaia non è ancora generica, in modo da riscrivere per eve ry widget nella tua pagina.

Answer 1

È una buona domanda che mi è già venuta in mente quando uso alcuni framework js.

Per il momento vorrei solo nascondere l'html statico e visualizzare il DOM angolare quando javascript è abilitato.

Dovrai iniettare il modello js equivalente all'html statico che generi, non è molto bello (non SECCO) ma cercare di ottenere i dati iniziali da DOM sarà più difficile da mantenere IMHO. Puoi unire tutti i javascript/modelli in un file js, in questo modo la pagina statica avrà solo un'importazione di script e il peso della pagina non verrà influenzato per i visualizzatori noscript.