精通 MEAN 当 MEAN 遇到 Meetup.com 和微数据（5）

look_w

创建一个 AngularJS 控制器搭建一个模块后，搭建一个控制器也非常容易。键入 yo meanjs:angular-controller events 并选择          events 模块，如清单 7 所示。
清单 7. 生成一个控制器

1 2 3 4 5 6 7 8 9

[?] Which module does this controller belongs to?   articles   core ? events   talks   users     create public/modules/events/controllers/events.client.controller.js create public/modules/events/tests/events.client.controller.test.js

可以看到，Yeoman 生成器将该控制器放在 controllers 目录中，将关联的测试放在您指定的模块的 tests 目录中。
此刻要问的一个合理的问题是 “为什么我创建了一个控制器，为什么我应该关注它？”回想一下，AngularJS 是一个客户端   框架。您最终将得到一个视图（在本教程前面创建的 HTML <div> 元素），其中填入了模型数据（一个填入了来自        Meetup.com 的活动数据的 JSON 结构）。该视图如何访问该模型？控制器的工作是将各部分集合起来，为视图提供它需要的模型数据。
以下这个简单示例演示了 MVC 的各部分如何融合在一起。在文本编辑器中打开        public/modules/events/controllers/events.client.controller.js，如清单 8 所示。
清单 8. 一个空的、无存根的 AngularJS        控制器

1 2 3 4 5 6 7 8

'use strict'; angular.module('events').controller('EventsController', ['$scope',   function($scope) {     // Events controller logic     // ...   } ]);

稍后，我们会将此控制器绑定到一个特定的 DOM 元素。$scope 变量将负责将模型传递给视图的重要工作。
向 $scope 添加一个 title 变量（模型），如清单 9 所示。
清单 9. 将一个 $scope 变量添加到 AngularJS          控制器

1 2 3 4 5 6 7 8

'use strict'; angular.module('events').controller('EventsController', ['$scope',   function($scope) {     $scope.title = 'High Performance WebSocket';   } ]);

接下来，将 EventsController 添加到 public/modules/core/views/home.client.view.html 中的          Event DOM 元素（视图）中：

1 2 3 4

<div class="row center-block event"        itemscope        itemtype="http://data-vocabulary.org/Event"        ng-controller="EventsController">

您可能已猜到，此代码将控制器绑定到 DOM 元素。$scope 变量仅对此 <div>        和它的子元素有效。如果愿意，可将一个控制器绑定到许多不同的 DOM 元素。每个元素会获得一个新控制器的唯一实例和它自己的唯一 $scope。
接下来，向您的线框 HTML 添加一个 {{title}} 占位符以取代硬编码的文本：

1 2	<h3 class="event-title"><a href="http://www.meetup.com/HTML5-Denver-Users-Group/events/160326502/" itemprop="url"><span itemprop="summary">{{title}}</span></a></h3>

在 Web 浏览器中查看结果时，您应看到 {{title}} 占位符替换为了通过 EventsController        提供的文本，如图 6 所示。
图 6. 占位符替换为了实际文本
现在您已有一个简单、有效的示例，是时候详细分析分析它了。（换句话说，您的应用程序已能正常工作，是时候再次破坏它了。）如果愿意，可向 $scope        添加许多变量，这些变量可以是简单的单个值，或者完整的 JSON 对象。
很快，您将会看到如何向 Meetup.com 发出一个 HTTP 请求，以检索下一个即将举办的活动的 JSON。到那时，在 $scope        中添加一些简化的模拟数据，以模拟您将从实际的 Ajax 调用获取的数据，如清单 10 所示。
清单 10. 模拟的 JSON        响应

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

'use strict'; angular.module('events').controller('EventsController', ['$scope',   function($scope) {         $scope.title = 'High Performance WebSocket';         $scope.event = {           'name': '"Developing Offline Applications" and "HTML 5 Animations"',           'time': 1411430400000,           'event_url': 'http://www.meetup.com/HTML5-Denver-Users-Group/events/160326502/',           'description': '<p><b>6 pm : "Developing Offline           Applications with HTML 5" by Venkat Subramaniam</b></p>',           'venue': {             'name': 'Rally Software',             'address_1': '1550 Wynkoop',             'city': 'Denver',             'state': 'CO',           }              }     } ]);

可以看到，$scope.event 变量包含一个复杂、嵌套的 JSON 对象。编辑您的视图来利用这个新模型数据，如清单 11 所示。
清单 11. 向 HTML        添加更多占位符

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<h3 class="event-title"><a href="{{event.event_url}}" itemprop="url"><span itemprop="summary">{{event.name}}</span></a></h3> <div class="col-md-4">   <h4>When</h4>   <p>{{event.time}}</p>   <h4>Where</h4>   <address itemprop="location"            itemscope            itemtype="http://data-vocabulary.org/Organization">     <span itemprop="name">{{event.venue.name}}</span><br>     <span itemprop="address"           itemscope           itemtype="http://data-vocabulary.org/Address">       <span itemprop="street-address">{{event.venue.address_1}}</span><br>          <span itemprop="locality">{{event.venue.city}}</span>,       <span itemprop="region">{{event.venue.state}}</span><br>     </span>   </address> </div> <div class="col-md-8" itemprop="description">   {{event.description}} </div>

在 Web 浏览器中查看结果时，只要向模板视图添加了占位符，就应显示来自 $scope.event 的值，如图 7 所示。
图 7. 包含模拟的 JSON 数据的 UGLI 主页
创建 AngularJS 服务来获取实际、实时的数据之前，必须完成两个与视图相关的简单任务：添加一些 AngularJS 过滤器来格式化日期，并在          {{event.description}} 占位符中显示所呈现的 HTML — 而不是原始的、转义的 HTML 代码。 —