我溢出了视图中之前的内容(Welcom to Express)添加了一个带有 ng-view 的 div。这个属性告诉Angular在当前dom下渲染视图。通过这个设置，用户首次进入主页时，Jade视图将会在服务端渲染并且返回给客户端。在实际项目中，站点视图将有基础的模板（）例如导航条，logo等）。它也有一个内容区（通过 ng-view 声明）由Angular来渲染视图。当用户通过应用来访问页面时，Angular将用不同的Angular视图来替换内容区域。这样避免了整个页面的刷新从而带来了更好的效果。这就是我们称这些应用为单页应用的原因：从本质上说只有一个页面被完整地从服务器下载，然后其他子页面只是简单的用来替换内容区。

注意：我必须再一次强调Jade对空格符非常敏感。在同一个视图中你不能混淆空格和tab键的缩进。Express Genrator默认生成的Jade视图用两个空格键来缩进。确保添加两个空格在 div(ng-view) 前面，否则你运行时将报错。

在最后一步之前让我们快速测试一下。回到你的浏览器，输入:3000.你将看见我们通过Angular构建的新首页

第5步：实现控制器

首页已经被正确地挂载了。现在需要从服务端获取视频并渲染到首页。在Angular或其他MVC中，这是控制器的主要职责。视图只负责展现响应的数据，控制器负责为视图获取数据或者处理视图中发生的事件。

现在为我们的首页视图创建一个控制器。打开 vidzy.js 并且改变 app 模块的声明：

var app = angular.module('Vidzy', ['ngResource', 'ngRoute']);

现在我们依赖两个模块：ngResource，用来调用RESTful APIs和ngRoute来管理路由。

接下来在文件末尾输入以下代码来创建一个控制器：

app.controller('HomeCtrl', ['$scope', '$resource', function($scope, $resource){ }]);

这里我们使用 app 模块提供的 controller 方法来定义一个新的控制器。

第1个参数是1个字符串，用来定义控制器的名称。按照管理，我们通常在Angular控制器名末尾添加 Ctrl。

第2个参数是数组。这个数组可以引用0个或更多的字符串，每个代表了1个控制器的依赖。这里定义了依赖$scope 和 resource。这些都是Angular的内部服务，所以她们都有一个前缀"$"。$scope用来传递数据给视图，$resource用来调用RESTful API。数组中最后一个对象是函数，这个函数就是控制器的主体。在这个例子中，我们的函数获取了两个参数 $scope 和 $resource 。因为我们依赖了 $scope 和 $resource 在函数声明之前。

让我们实现控制器的主体部分。在控制器函数内部，输入以下代码

app.controller('HomeCtrl', ['$scope', '$resource', function($scope, $resource){ var Videos = $resource('/api/videos'); Videos.query(function(videos){ $scope.videos = videos; }); }]);

这里我们调用 $resouce 方法通过给定的API端点（/api/videos）来获取一个资源对象。这个对象将提供一些方法来访问我们的 API。我们用 query 方法来获取所有视频。 query 方法在查询结果就绪后将得到一个回调函数。这个函数将获得我们从服务端获取的视频。最后我们将视频存储到 $scope对象中然后渲染到视图中。记住 $scope 就是视图和控制器之间的胶水。

现在我们需要改变视图来渲染视图中的列表。打开 partials>home.html 然后输入代码：

<ul> <li ng-repeat='video in videos'>{{video.title}}</li> </ul>

我们用ul和li来渲染视频列表。li标签有一个Angular定义的属性叫做 ng-repeat。这些属性在Angular中叫做指令，用来为HTML元素添加一些行为。ng-repeat属性的值是一个类似js中foreach的表达式。videos变量是我们之前在 $scope中定义的属性。video in videos表示一次从数组中获取一个video。所以li元素将会被数组中的video对象重复渲染。我们用双花括号来编写表达式。这里我们简单的渲染video对象中的title属性在li标签中。

最后我们需要将这个控制器注册到路由上。回到 vidzy.js，改变路由配置

.when('/', { templateUrl: 'partials/home.html', controller: 'HomeCtrl' })

完成了这些步骤，当用户进入网站根路径时，Angular将展示 partials/home.html 并且为它添加 HomeCtrl控制器。

回到浏览器并刷新首页。你将看到视频列表。

如果你是一个Angular新手并且还有些困惑，没关系，在接下来的章节中我们将继续使用更多的Angular控制器，视图和路由。

总结下，本章节中，为我们的应用添加了第一个功能。我们开始用RoboMongo来连接MongoDB。我们创建了一个数据库然后填充了一些视频文档。然后我们创建了一个API用Express来导出视频列表。最后，我们添加Angular到应用中来调用API渲染视频列表。

在下一节中，我们将添加另一个功能到应用中。

这一部分的内容很多，翻译花费了很多时间。原文作者写教程的时候确实是很用心的，这也是我答应作者翻译这篇教程的一个原因。如果想看更多教程可以去作者的官网，如果觉得这篇教程不错，还请点个赞~谢了~

博客：
作者：亚里士朱德

随着各种技术发展，很多人都在吹捧大数据。然而如同股市一样，越是高涨，越是需要警醒，在大数据热火朝天前行的路上，多一点反思，多一份冷静，或许能让这路走的更好、更远。本文的10个小故事，或许能让你有所得。...

阅读原文