PhoneCat 教程

本教程将构建一个 Angular 应用。 这款应用可以显示 Android 设备列表，你可以筛选你感兴趣的设备，并查看任意设备详情。

Angular 让浏览器更智能，而不依赖于任何本地插件：

• 如何利用客户端数据绑定来构建动态数据视图，并立即根据用户交互做出相应变化
• 如何让视图与数据同步，但不用任何 DOM 操作
• 使用 Karma 和 Protractor 来测试应用
• 如何利用依赖注入和服务来简化操作，例如获取应用数据

学完本教程，你应该可以：

• 创建可在所有现代浏览器下运行的 web app
• 使用数据绑定来整合数据和视图
• 使用 Karma 来创建单元测试
• 使用 Protractor 来创建 end-to-end 测试
• 将应用逻辑从模板中剥离，放到组件和控制器中
• 使用 Angular 服务从服务器获取数据
• 使用 ngAnimate 模块为应用添加动画
• 模块化组织 Angular 应用，以便于大型项目扩展
• 能够进一步深入理解 AngularJS

本教程将演示构建一个应用的完整流程，包括如何进行单元测试和 end-to-end 测试。 每一步底部都有小实验为你进一步了解 AngularJS 和当前应用提供了建议。

你应该花上几个小时到一整天的时间来学习本教程。如果你需要的只是 AngularJS 的简介，可以查看 Getting Started 。

环境搭建

下面的教程将教你搭建本地环境。 如果只是想阅读教程，可以直接跳到下一步： Step 0 - 启动。

使用源码

你应该边看教程边在本机尝试修改示例代码。这样，可以通过实际操作来理解 Angular 代码并掌握测试工具的使用。

本教程使用 Git 版本控制系统来管理源码。 学习本教程不需要你了解任何关于 Git 的知识，除了安装和运行一些命令。

安装 Git

你可以从 http://git-scm.com/download 下载并安装 Git。 安装好之后，你应该可以在终端中使用 git 命令了。 主要的命令如下：

• git clone ...: 克隆远程仓库到本地
• git checkout ...: 检出特定分支或标签版本以进行编辑

下载 angular-phonecat

运行以下命令来克隆远程仓库 angular-phonecat repository ：

git clone --depth=16 https://github.com/angular/angular-phonecat.git

该命令在当前目录下创建了一个 angular-phonecat 子目录。

--depth=16 选项表明只用获取最近的 16 个提交。 这使得下载量更小，下载速度更快。

变更当前目录到 angular-phonecat。

cd angular-phonecat

从现在开始，本教程中的所有命令都假定你的当前目录为 angular-phonecat 。

安装 Node.js

如果你要运行预先配置好的本地 web 服务器和测试工具， 那么你需要 Node.js v4+。

你可以从 https://nodejs.org/en/download/ 下载当前操作系统对应的安装包。

运行下面命令以确定当前 Node.js 版本：

node --version

在基于 Debian 的发行版中， Node.js 可能和另一个 node 工具发生命名冲突。 建议同时安装 nodejs-legacy 包， 它会将 Node.js 命令重命名为 nodejs.

apt-get install nodejs-legacy npm
nodejs --version
npm --version

如果你需要在本地安装运行多个版本的 Node.js ， 可以考虑安装 Node Version Manager (nvm) 或 Node Version Manager (nvm) for Windows。

将 Node.js 安装之后， 可以通过以下命令下载依赖：

npm install

该命令读取 angular-phonecat 的 package.json 文件，并下载以下工具到 node_modules 目录：

• Bower - 客户端包管理工具
• Http-Server - 简单的静态 web 服务器
• Karma - 单元测试运行器
• Protractor - end-to-end (E2E) 测试运行器

运行 npm install 的同时也会自动调用 bower 来安装 AngularJS 框架到 app/bower_components 目录。

注意 angular-phonecat 项目被配置为通过 npm scripts 来安装并运行这些工具。 这意味着在本教程中，你不需要全局安装这些工具。 查看 安装辅助工具 以了解详情。

该项目使用了一些 npm 帮助脚本来简化开发时的常用任务:

• npm start: 启动本地开发 web 服务器
• npm test: 启动 Karma 单元测试运行器
• npm run protractor: 运行 Protractor end-to-end (E2E) 测试
• npm run update-webdriver: 安装 Protractor 所需的驱动

安装辅助工具 （可选）

Bower， Http-Server， Karma 和 Protractor 模块同时也是可执行程序， 可以全局安装并从命令行直接运行。 在本教程中你不用去全局安装这些程序，但如果确实需要全局安装，可以使用 sudo npm install -g ... 命令。

例如，你可以这样安装 Bower 命令行工具：

sudo npm install -g bower

（在 Windows 下忽略 sudo）

然后你就可以直接运行 Bower 程序了：

bower install

运行开发服务器

尽管 Angular 应用是纯客户端代码，也可以直接从文件系统中打开浏览器查看，但最好还是从 HTTP web 服务器中打开。尤其是出于安全考虑，对于直接从文件系统中打开的页面，大多数现代浏览器都不允许 javascript 直接发送请求到服务器。

angular-phonecat 配置了一个简单的开发服务器。通过下面的命令打开服务器：

npm start

这会创建一个服务器监听 8000 端口。你可以打开 http://localhost:8000/index.html 来查看应用。

要指定不同的IP和端口， 编辑 package.json 中的 "start" 脚本。 你可以使用 -a 选项来指定地址， -p 选项来指定端口。你需要同时更新 e2e-test/protractor.conf.js 中的 baseUrl 配置项。

单元测试

我们使用单元测试来确保 JavaScript 代码在应用中正常运行。单元测试专注于测试应用独立的小单元。单元测试文件 (specs) 应该和应用文件放在一起。 这样可以便于查找文件，并在应用更新时同步更新它们。同时也使得改变应用结构更加容易，因为测试文件和代码一起移动。

angular-phonecat 项目使用 Karma 来运行单元测试。 通过以下命令来启动 Karma ：

npm test

这会启动 Karma 单元测运行器。 Karma 会读取项目根目录。 karma.conf.js 文件。配置文。包括了以下内容。

• 打开 Chrome 和 Firefox 浏览器并连接到 Karma
• 这些浏览器中执行所有单元测试
• 在终端中都输出所有单元测试结果
• 监测所有 JavaScript 文件，当文件发生变化时重新运行测试。

建议始终在后台运行单元测试。这样，你在修改代码时可以立即获得单元测试反馈。

E2E 测试

我们使用 E2E (end-to-end) 测试来确保应用按照预期的方式来运行。 E2E 测试用于测试客户端应用，尤其是视图的正确显示和响应。它通过模拟真实用户行为来测试应用。

E2E 测试用例放在 e2e-tests 目录下面。

angular-phonecat 项目使用 Protractor 运行 E2E 测试。Protractor 依赖于一系列驱动来与浏览器交互。 通过下面的命令来安装这些驱动：

npm run update-webdriver

你不必手动来运行这些命令。 npm 脚本在运行测试时会自动执行这些命令。

由于 Protractor 要与正在运行的应用进行交互，我们需要启动服务器：

npm start

然后，在另一个终端窗口中运行 Protractor 测试脚本：

npm run protractor

Protractor 会读取 e2e-tests/protractor.conf.js 文件。 配置文件的作用是：

• 打开 Chrome 浏览器并连接到应用
• 在浏览器中执行所有 E2E 测试
• 在终端中显示测试报告
• 关闭浏览器并退出

通常在视图改变，或需要测试整个应用时运行 E2E 测试。当你确定要提交变更到远程仓库时，也应该运行测试。

常见问题

防火墙/代理问题

Git 和其他工具经常使用 git: 协议来从远程仓库获取文件。一些防火墙配置阻挡了 git:// 地址，这常常到导致下载仓库和依赖时出错 （例如，企业防火墙就经常阻挡 git:）

如果碰到这种情况，可以强制使用 https: 协议。只需要使用如下命令： git config --global url."https://".insteadOf git://

升级 WebDriver 耗时太长

运行 update-webdriver 可能要花上几秒到几分钟的时间（取决于你的硬件配置和网络环境）。如果你取消了操作（比如用 Ctrl+C ），可能在稍后运行 Protractor 时出错。

如果碰到这种情况，可以删除 node_modules/ 目录并重新运行 npm install 。

Protractor 依赖

当下，Protractor 使用了 Selenium Standalone Server，这依赖于本地安装的 Java Development Kit (JDK) 。 可以通过 java -version 命令来检查是否已安装 JDK。

如果 JDK 未安装，可以从 这里 获取。

服务器运行错误

web 服务器使用了 8000 端口。 如果该端口已经被占用（比如被其他的 web 服务器占用） ，可能出现 EADDRINUSE 错误。 在运行 npm start 之前，请确保该端口可用。

设置好了本地环境， 可以开始下一步： Step 0 - 启动