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=14 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视图的时候，而后就做为一个总体的能正确执行的程序去作检查。这种检查是很正常和须要的，尤为是在提交新的代码或者功能到远程服务器的时候。