PhoneCat App 教程

https://docs.angularjs.org/tutorial

AngularJS教程第一篇文章的翻译，因为我在看中文版的AngularJS的翻译的时候，发现第一篇文章翻译的不准确，很有可能是陈旧了，英文官方版本更新了，造成我开始就进入不了教程中得实例，无法进行下去，所以直接去官方看原文章，顺便翻译出来，给懒得看英文的、打不开英文站点的同学一些参考，当然我翻译的不一定准确哈，请多多留言指正，以下为翻译内容：

给你介绍AngularJS比较好的方式就是带你看下这篇教程，这个教程说的是开发了一个款简单的手机分类浏览Web程序，可以让你过滤你感兴趣的机型，然后可以进入详情页面等。

通过看这个教程可以了解AngularJS是如何不增加页面扩展和插件的情况下让浏览器更优雅的执行Web程序。

通过例子可以理解，如何通过客户端的数据绑定，来处理用户的一些操作动作引起的页面数据动态变化，然后页面要立即做出响应这样的情况。
理解AngularJS是如何做到在不需要增加额外的DOM操作代码的情况下，保持视觉界面和数据的同步变化的
了解一种更好的、更简单的方式去测试你的Web应用程序----Karma和Protractor。
了解如何使用依赖注入和服务去构建Web任务，比如更容易的获取数据到你的应用中

当你看完这个教程之后，你应该能够：

在主流浏览器上创建动态应用程序
使用数据绑定去绑定你的数据模型到你的视图程序中
使用Karma创建和运行单元测试
使用Protractor创建和运行端到端的测试
从模板中转移应用程序的逻辑到控制器中
通过Angular服务从服务端获取数据
在你的应用程序中使用ngAnimate完成动画效果
获知更多学习AngularJS的资源

这个教程指导你书写一个简单的应用程序，包括书写和运行单元测试和端到端的测试。在每一步的开发中都会给你提出关于AngularJS的使用建议。

你既可以花费几个小时来看这个教程，也可以花费一天的时间来深入的研究它。如果你想照一个短一点的AngularJS介绍，请点击上手文档。

上手

接下来的内容告诉你如何在你的机器上运行这些代码。如果你只是读读这些代码，不想在你本地机器上运行它，你直接去看第一篇文章：第0步-起步

使用这些代码运行

你可以继续跟随这篇教程，在你熟悉的电脑上调试这个列子的代码。如果是这样的话，你会得到手把手的操作实践，去书写AngularJS和测试工具。

这个教程依赖Git版本控制源码管理工具。你可以不需要知道太多Git，只是跟随教程执行寥寥无几的Git命令即可。

安装Git

你可以从http://git-scm.com/download下载和安装Git。一旦你安装完Git，你应该就有git命令行工具了。你可能用到的主要的命令是：

git clone ... ：克隆一个远程仓库到你的本地电脑
git checkout ... ：检出一个特定的分支或者标记版本

下载 angular-phonecat

通过下面的命令克隆存在GitHub上的 angular-phonecat仓库

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

这个命令会在你的本地电脑上创建 angular-phonecat 目录。

--depth=14 选项只是告诉Git下去最新的14次提交。这样会让下载更小更快。

进入到 angular-phonecat 目录。

cd angular-phonecat

这里提示下，从现在开始，假设你所有的命令行操作都是基于 angualar-phonecat 目录进行的，如果不是的话，请先切换到这个目录。

安装Node.js

如果你想运行提前配置好的本地Web服务器和测试工具，你还需要 Node.js v0.10.27+。

你可以从http://nodejs.org/download/为你的操作系统下载一个Node.js 安装器。

通过下面的命令检查下你安装的Node.js的版本：

node --version

在基于Debian发行的版本中，有一个名字相冲突的实用工具叫node 的。这里建议也安装 nodejs-legacy apt 包，然后重命名node为nodejs。

apt-get install nodejs-legacy

nodejs --version

如果你希望在你的本地机器上同时运行另一个不同版本的node.js，建议你安装 Node 版本管理工具(nvm)

一旦你在本地机器上安装了node.js，你就可以通过下面的命令下载项目所以来的各种工具：

npm install

这个命令会下载如下工具到 node_modules 目录：

Bower - 客户端代码包管理工具
Http-Server - 简单的本地静态Web服务器
Karma - 单元测试工具
Protractor - 端到端(E2E)测试工具

运行 npm install 也会自动的使用 bower 下载Angular框架到 app/bower_components 目录。

注意：angular-phonecat 项目被安装和运行是通过这些npm脚本工具。这意味着你不需要把这些工具安装到你操作系统的全局环境中。看下面的 安装助手工具 了解更多内容。

这个项目被预先配置了一些npm助手脚本来帮助你非常容易的运行你在开发过程中需要用到的几个任务：

npm start ：启动一个本地开发Web服务器
npm test ：启动Karma单元测试
npm run protractor ：运行Protractor 端到端(E2E)测试
npm run update-webdriver ：安装Protractor需要的驱动

安装助手工具（可选）

Bower，Http-Server，Karma 和 Protractor模块也是可以单独执行的，可以在终端/命令行中安装到全局环境。你可以不用这么做，在接下来的教程中，但是如果你决定单独直接运行他们，也就是说你想把他们安装到全局环境中，你可以这么做： sudo npm install -g ...

sudo npm install -g bower

(如果你在windows操作系统中就删除上面的sudo)

之后，你就可以单独运行bower，像这样：

bower install

运行开发Web服务器

因为Angular应用程序是一个纯客户端的代码程序，所以它可以直接浏览器中打开运行，但是呢，他们最好还是通过一个HTTP服务器的方式运行比较好。在一些情况下，处于安全性的考虑，大多数的主流浏览器不运行JavaScript发送服务端请求，如果这个页面是直接在文件夹里运行的话。

angular-phonecat项目已经配置了简单的静态Web服务器，所以这样就可以启动它：

npm start

这样的话，就会创建一个Web服务器，监听端口是8000，你现在可以这样在浏览器上访问它了：

http://localhost:8000/app/index.html

可以在package.json中编辑‘start’选项中得 -a 参数改变ip地址，-p 参数改变监听端口号

运行单元测试

我们使用单元测试来确保JavaScript代码在我们的程序中得操作是正确的。单元测试专注在测试孤立的程序功能。单元测试被放在 test/unit 目录。

angular-phonecat项目被配置使用Karma来运行单元测试。这样启动Karma：

npm test

这样就启动了Karma单元测试。Karma会读取 test/karma.conf.js 配置文件。这个配置文件告诉Karma：

打开一个Chrome浏览器并连接到Karma上
在这个浏览器上执行所有的单元测试
在终端/命令行中打印这些单元测试的结果
检测项目中得所有js文件，一点有修改就立刻重新运行单元测试

这样让单元测试始终在后台检测和运行是非常好的，它会立刻给你反馈，直到你通过所有测试。

运行端到端的测试

我们使用端到端的测试确保应用程序就像预期的那样是一个完整操作。端到端的测试被设计为去测试整个客户端应用，确保视图可以被正确的展示和表现。它就像一个真实的用户交互一样在浏览器中操作应用程序。

端到端的测试放在这个目录：test/e2e 。

angular-phonecat项目使用Protractor运行端到端的测试。Protractor依赖一系列的驱动程序。你可以这样安装这些驱动程序：

npm run update-webdriver

（你只需要运行一次就可以了）

应为Protractor运行需要依赖一个正在运行的应用程序，所以我们首先需要保证我们的Web服务是开启的：

npm start

然后在另一个终端/命令行中再启动Protractor：

npm run protractor

Protractor会读取 test/protractor-conf.js 配置文件。这个配置文件告诉Protractor：

打开一个Chrome浏览并连接到应用程序
执行所有的端到端测试在这个浏览器中
在终端/命令行中打印所有的测试结果
关闭浏览器并退出

这是件好事，每当你改变html视图的时候，然后就作为一个整体的能正确执行的程序去做检查。这种检查是很正常和需要的，尤其是在提交新的代码或者功能到远程服务器的时候。