【译】基于MEAN的全栈开发实例教程3：通过Angular展示数据(3)_H5之家

首先，需要添加Angular脚本到应用中。打开 views>layout.jad 添加以下3个脚本文件引用在 head的末尾（一般考虑性能会放在body标签的末端）。

script(src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js') script(src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-resource.js') script(src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.js')

确保他们的缩进空格数相等，因为jad对缩进空格非常敏感。Express Generator生成Jade视图的时候将会把两个空格当做缩进。所以你需要遵循同样的缩进并且不能省略。否则将会报错。

这些是什么脚本？第1个是Angular框架的主脚本，第2个是用来调用RESTful APIs，第3个是用来管理路由的。通过路由来定义应用导航对应展示的页面。

在Angular脚本之后，添加 vidzy.js 引用

script(src='/javascripts/vidzy.js')

请再次确保缩进空格数一致。

现在主要脚本已经引入，可以添加Angular到我们的应用了。添加Angular包括两步：

第1步，在HTML元素上添加 ng-app 属性。当Angular脚本加载完时，它将在DOM中找到这个属性然后挂载应用程序。

第2步，为应用创建一个Angular模块。Angular应用通常由1个或者多个模块构成。这个简单的应用，你只需要一个 app 模块。但是随着应用的扩展，为了提升代码结构和可维护性，你可能需要划分不同的功能到不同的模块。

打开 layout.jade 添加 ng-app 到html元素。

doctype html html(ng-app='Vidzy')

在Jade中，我们使用括号来为HTML标签添加属性。当该行被Jade模板引擎渲染时，我们将获取以下HTML元素

我们给ng-app设置的值就是应用的名称。现在我们需要创建这个模块。

打开 vidzy.js输入以下代码：

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

Angular 现在是一个全局可用的对象， module 方法可以用来定义一个新的模块或者获取已有模块的引用。第1个参数和我们之前在 ng-app 中定义的值一致。第2个参数是一个依赖数组。这里传入一个空数组来声明当前模块不依赖任何其他模块。

我们做这些就是为了将Angular挂载到我们的应用上。接下来我们将重构首页，使用Angular来展示数据库中所有的视频。

第4步：用Angular重构首页

Express Generator生成的默认项目使用了Jade做为视图引擎。这些Jade视图在服务端被解析和渲染成HTML然后返回给客户端。这就是很多网页框架如何工作的。但是在本应用中，我们将使用一种不同的构建风格。我们将返回JSON给客户端（Angular）来渲染视图来替代返回HTML。下面说一说这样做的原因。

开始的时候，在本章关于“什么时候使用Node”中，我提到一种通用的场景：Node擅长在文档数据库上构建基于RESTful APIs的应用。通过这种架构，我们不必把时间花在数据转换上。我们存储JSON对象在Mongo中，通过RESTful API导出它们并且直接在客户端进行展示（通过Angular）。JSON就是Javascript和MongoDB的原生对像。所以用它来贯穿整个技术栈，我们就减少了匹配和转换数据的工作。通过从API返回JSON对象然后在客户端渲染视图，来提高性能和可扩展性。因为服务器的CPU将不会被浪费在为大量并发用户渲染视图上。另外，我们可以重用同样的API去构建另一个客户端，例如Iphone和Android app。

在这一步中，我们将用Angular视图来取代首页上默认的Jade视图。

在 public 下创建一个新的叫做 partials 的文件夹用来存储视图文件。在这个文件夹下创建一个新的文件home.html，在文件中输入

现在，我们需要告诉Angular当跳转到这个首页时渲染这个视图。我们通过Angular路由来实现这个功能。

在 vidzy.js 中，改变 app 模块的声明如下：

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

在依赖数组中我添加了一个 ngRoute 的引用。 ngRoute 是构建Angular模块中用来配置路由的。

在 app 模块声明中写下如下代码：

app.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/', { templateUrl: 'partials/home.html' }) .otherwise({ redirectTo: '/' }); }]);

让我来为你讲解一下。我们使用 app 模块的 config 方法来为我们的应用提供配置。这个代码将在Angular检测到 ng-app 并且视图启动的时候执行。 config 方法的参数是一个数组：

app.config([]);

这个数组可以有0个或更多的依赖以及一个函数来实现配置逻辑。这里我们有一个依赖 $routeProvider，这是一个在 ngRoute 中国定义的模块。这就是我们修改app模块声明来依赖 ngRoute 的原因。配置函数接收$routeProvider 作为一个参数

app.config(['$routeProvider', function($routeProvider){ }]);

在我们的配置函数中，我们使用 $routeProvider 的 when 方法来配置路由。

$routeProvider .when('/', { templateUrl: 'partials/home.html' })

第1个参数('/')是相对路径。第2个参数是一个对象，定义了路径对应的视图(通过 templateUrl)。我们可以多次调用 when 方法，每次定义个不同的路由。最后，我们使用 otherwise 方法来声明如果用户浏览其他URLs，将被重定向到根路径('/')。

现在还差一点点。我们只需要做一些小小的改动来时使Jade视图映射到首页。打开 views>index.jade 然后改变文件的内容：

extends layout block content div(ng-view)