如何使用angularjs在HTML列表上进行渐进增强？

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

假设我有一个可访问的站点,将与JS禁用的人进行协商。

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.

每次重新加载页面时,都会添加最新的新闻,如果您收到超过10条新闻,则会丢弃旧的新闻。

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.

现在,如果我使用Angulard JS,我必须将数据放入模型和ng-repeat中,并摆脱我的静态HTML。该列表将动态填充,因此拥有JS的人员几乎可以实时更新列表。

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.

我需要的是让两者协同工作。我需要静态列表,如果JS被激活,我希望当前元素插入模型并由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

当我的模型初始化时,将列表DOM分开,手动提取数据,并删除所有子列表

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.

它很糟糕,因为你失去了角度的声明性优点,而且你有很多锅炉代码甚至不是通用的,所以你为你页面中的每个小部件重写它。

1 个解决方案

#1

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

在使用一些js框架时,这是一个很好的问题。

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

目前我只是隐藏静态html并在启用javascript时显示角度DOM。

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.

你需要注入相当于你生成的静态html的js模型,它不是很好(不是DRY)但是尝试从DOM获取初始数据将更难维护恕我直言。您可以将所有javascript /模板捆绑在一个js文件中,这样静态页面只会导入一个脚本,并且页面权重不会受到noscript查看器的影响。

#1