精通 MEAN 当 MEAN 遇到 Meetup.com 和微数据(8)
 
- UID
- 1066743
|
精通 MEAN 当 MEAN 遇到 Meetup.com 和微数据(8)
隐藏闪烁的无样式内容 在主页首次呈现到它向 Meetup.com 发出 Ajax 请求的时间间隔里,您可能注意到了讨厌的 FOUC(Flash of Unstyled Content,无样式内容闪烁)。如果没有看到,刷新浏览器两次,就应该会看到。
FOUC 不是特别重大的错误,但它们无疑会使您的应用程序看起来不太专业。所幸,AngularJS 开发人员为这个常见问题提供了一个简洁的解决方案。
使用 ng-show 对 home.client.view.html 执行最后一次更改,以隐藏视图,直到模型数据就位:
1
2
3
4
| <div class="row center-block event"
itemscope
itemtype="http://data-vocabulary.org/Event"
ng-controller="EventsController" ng-show="event">
|
将 ng-show 属性添加到 <div> 中,会导致整个 <div> 隐藏,直到填充了 $scope.event 变量。对 Meetup.com 的 Ajax 请求返回 JSON(模型)时,将显示 <div>(视图)。
结束语UGLI 应用程序真正开始成形了。您从外部 API 拉入了 JSON 数据,并使用微数据格式化了得到的视图,以便搜索引擎和其他自动化流程可与查看网页的人访问到相同的信息。
在下一期,我将使用 OAuth 解决授权和验证问题。请届时继续阅读 “精通 MEAN”。 |
|
|
|
|
|