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