How to make a progressive enhancement on an HTML list with angularjs?

Question

Let's say I'm tied to have an accessible site that will be consultated with JS disabled.

I have a news list that I can summary this way:

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

Everytime you reload the page, you get the most recent news added, and the old one are discarded if you got more than 10 news.

Now, If I used Angulard JS, I have to put the data in a model, and an ng-repeat, and get rid of my static HTML. The list will be populated dynamically, so people with JS will see the list updated in almost real time.

What I need is to make the two work together. I need the static list, and if JS is activated, I want the current elements to be insert in the model and manage by angularjs.

Now my current way to do it is:

• when my model initialize, parthe the list DOM, extract the data manually, and remove all the child list
• inject angular template code in the list
• let angular do its magic

It sucks because you loose the declarative goodness of angular, plus you have a lot of boiler code is isn't even generic, so you rewrite it for every widget in you page.

Answer 1

It's a good question that already crossed my mind when using some js frameworks.

For the moment I would just hide the static html and display the angular DOM when javascript is enabled.

You'll need to inject the js model equivalent to the static html you generate, it's not really nice (not DRY) but trying to get initial data from DOM will be harder to maintain IMHO. You can bundle all the javascript/templates in one js file, that way the static page will only have one script import and the page weight will not be impacted for noscript viewers.