AngularJS 系列教程 ：PhoneCat 应用教程

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 - 启动