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.

Gothar

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 generated, it's not really nice but trying to get initial data from DOM will be harder to maintain IMHO. In a perfect world you would generate the static page with a javascript engine and angular on the server to don't have to replicate code/templates but there's no easy way to do that atm. – Vasilikivasilis

It wouldn't be my perfect world, as I dislike coding in JS :-) I like your approach (you should make it an answer so I can upvode) because it's simple and maintainable. Bt means uploading twice the size of the data set, so we are definitly not in an ideal world. – Gothar

Thanks, I'll make a small answer with that ;) – Vasilikivasilis

Yes to be optimal we could need to inject the initial state of angularJS and skip initial rendering, I think it's discussed in the angularJS google group. – Vasilikivasilis

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.

Vasilikivasilis

Do you thinks it doable to make a plugin that would take initial markup marked with somes classes and load it automatically in a model ? This way I could solve my problem and share that with others. But I don't want to spend time on it if it's not doable. – Gothar

It's doable but I don't think the time investment worth it compared to the simplicity of just rendering in the page a json object containing your initial model data. – Vasilikivasilis