精通 MEAN 当 MEAN 遇到 Meetup.com 和微数据(4)
 
- UID
- 1066743
|

精通 MEAN 当 MEAN 遇到 Meetup.com 和微数据(4)
让您的浏览器能感知微数据现在您已向网站添加一些微数据,如何确定您已正确添加?最简单的方法是为浏览器使用一种微数据扩展。在多种非官方的微数据扩展中,我喜欢在 Chrome 中使用的是 。
安装之后,此浏览器扩展通常会保持隐藏,直到您访问一个使用微数据的网站。Semantic inspector 在当前网页中找到微数据时,它会在地址栏显示一个红色的 m 图标。您可能对这个小图标弹出的频率很吃惊;您会在许多流行、主流的网站上看到它,包括 Google、Time.com 和 Walmart.com 等。单击该图标可显示详细信息,如图 5 所示:
图 5. 使用 Semantic inspector 查看微数据
现在您已有标注了微数据属性的基本的 HTML 线框图,是时候从这些连线中填入全新的 JSON 了。为此,创建一个新的事件模块,其中包含控制器、视图、模型和服务。
创建一个 AngularJS 模块在 中,您使用 Yeoman 搭建了一个完整的 CRUD 模块,包括 Express 路由和一个 Mongoose 模型。对于此用户案例,不需要服务器端基础架构,因为原始 JSON 数据来自外部 Web 应用程序。幸运的是,MeanJS Yeoman 生成器的创建者预见到了这一需求,单单为应用程序的客户端 AngularJS 部分提供了另一个生成器。
键入 yo meanjs:angular-module events 来创建一个名为 events 的新 AngularJS 模块。AngularJS 是特定于您应用程序中一种特定数据类型的文件的逻辑分组。根据官方 AngularJS 文档的描述,“可将模块视为您应用程序的不同部分(控制器、服务、过滤器、指令等)的容器。”
收到提示时,选择列表中的所有元素,如清单 6 所示。
清单 6. 生成一个模块1
2
3
4
5
6
7
8
9
10
11
12
| [?] Which folders would you like your module to include?
? config
? controllers
? css
? directives
? filters
? img
? services
? tests
? views
create public/modules/events/events.client.module.js
|
根据刚才的描述,您的模块只是一个空目录集合。您不会在编写的每个 AngularJS 模块中使用每个目录,但知道有一个容易记住、容易理解的地方来在时机成熟时放入模块的各部分,也很不错。
下一步是向模块添加一个控制器。 |
|
|
|
|
|