【一起学AngularJS】第一章、入门教程说明

该AngularJS中文教程由目前（2016/3/3）最新的官网英文翻译而来，因为AngularJS中文站的教程似乎有点断片，而且英文官方文档里对应的代码存在一些版本兼容问题，容易给读者造成很大困惑，所以决定自己翻译一遍（我会尽量尝试以比较轻松愉快的表达手法完成），其中可能会有一点个人的理解部分（会以注释标注），离考雅思已经过3个年头，表示英语退化迅速，解释不当的地方还请理解 :) Here we start.

PhoneCat 入门Web应用示例

通过这个入门教程来介绍AngularJS是一个非常不错的选择， 它将向你演示如何创建一个AngularJS Web应用。马上我们要做的这个web app用来展示安卓手机，你可以过滤掉其他的手机，只留下你喜欢的，并且可以查看任意手机的详情。

PhoneCat页面

这个教程将让你明白AngularJS在无需本地扩展和插件的情况下是如何让浏览器变得更加机智的，它会让你学到：

• 如何使用“客户端数据库绑定”来创建可以实时响应用户操作的数据展示视图。
• Angular是如何让页面视图能够与模型数据保持一致的，并且无需操作DOM元素。
• 如何使用Karma 和 Protractor来更简单、更好的测试你的网络应用。
• 如何使用依赖注入(dependency injection)和服务(services)来更简单的完成一般的网络任务，比如获取数据。

当你完成了这个教程的学习之后，你将学会以下这些：

• 创建一个适用于所有流行浏览器的动态网络应用。【注释：能用得到JS的网络应用，目前* 来说就网站和H5手机APP吧，动态网络应用，我觉得可以直接理解成网站（虽然广义上还包括WS等，但这里我觉得就是网站）】
• 使用“数据绑定”来绑定数据模型和页面视图(views)。
• 使用Karma来创建和运行单元测试。
• 使用Protractor来创建和运行端到端的测试。
• 把应用逻辑部分从模版（template）里隔离开来，放到控制器(Controllers)中。【注释：在AngularJS范畴里，模版就是指HTML页面了，因为一定意义上它规范了数据的展示模版】
• 使用Angular服务（services）来从服务器获取数据。【注释：以前我们一般用ajax】
• 使用ngAnimate来完成网站动画。
• 每个部分结束还有AngularJS进阶的学习资料。

这个教程将教会我们使用AngularJS搭建简单网站的整个过程，包括编写和运行单元测试和端到端测试。每一个部分结束会有一些小实验，它们将让你更好的学习AngularJS和将要搭建的这个网站。
或许你只需要花几个小时走马观花，又或许你愿意花一天时间好好的研究研究，没关系，都可以。如果你要简单过下的话，看直接看 Getting Started 。

准备开始

接下来我们搭建开发环境。如果只是想读一读教程，并不打算运行它，可以直接进入教程的第一部分：第二章、入门引导。

调试代码

你可以一边看教程，一边开开心心的在自己的电脑上自由的调试代码。这是我们推荐的学习方式，因为这样可以让你手把手的进行AngularJS编程实践。
教程所使用的代码都使用Git版本管理系统来进行管理。不过你不用担心，你不需要知道太多关于Git的知识，只需要按照教程敲打几条命令而已。

安装GIT

git clone ... : 复制一份代码并且放到本地目录种。
git checkout ... : 牵出某个分支或者某个版本的代码，以便于你修改

载网站源代码（就是PhoneCat网站）

从远程的PhoneCat仓库（放在Github上）克隆代码到本地（首先创建一个文件夹，然后右击文件夹选择GitBash可以打开Git命令框）：

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

这个命令将在你新建的文件夹下创建一个angular-phonecat目录。--depth=14代表只迁出最近14次提交。
进入项目目录：

cd angular-phonecat

接下来教程里出现的其他命令，都应该在该目录下输入。

安装 Node.js

如果你想使用预先配置好的网站服务器和相关的测试工具，得需要下载Node.js。点Node.js v0.10.27+下载。
下载完安装后，我们简单验证下Node.js的版本。

node --version

在Debian分布式系统中，node.js有一个叫node的模块和系统自身有一个命名冲突。这种情况下，建议安装 nodejs-legacy apt安装包，并且把 node 重命名成 nodejs.

apt-get install nodejs-legacy npmnodejs --versionnpm --version

注：如果你需要在您的计算机上安装多个版本的Node.js，可以考虑装一个 Node Version Manager (nvm) 。

安装好Node.js后，你就可以使用以下命令下载其他的依赖工具了：

npm install

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

• Bower : 客户端代码包管理器
• Http-server : 简单本地静态网站服务器
• Karma : 单元测试工具
• Protractor : 端到端（E2E）测试工具

运行 npm install 还会自动的使用 Bower 工具下载AngularJS框架代码到 app/bower-components 目录下。

注：angular-phonecat项目将通过npm脚本来安装和运行上述的这些工具。这意味着你不需要为了学习这个教程在你的电脑上全局的安装这些工具（注解：意思就是绿色版的，放在文件夹下就行了，不需要全局安装）。下面的 安装帮助工具 章节中会提供更多的信息。

该项目预先配置了一些帮助脚本，它们可以帮助你完成开发中需要的一些常见任务：

• npm start : 启动一个本地的web服务器
• npm test : 启动Karma单元测试器
• npm run protractor : 启动Protractor运行 E2E测试
• npm rum update-webdriver : 安装Protractor需要的一些驱动

安装帮助工具(可选)

上文提到过的Bower、Http-server、Karma、Protractor模块本身自己也都是可执行文件，它们都可以被直接安装在你的计算机中，以便你任意打开一个控制台窗口都可以通过敲击命令来运行它们。当然了，你没必要为了本次教程而这么做。但是如果你想直接从任意控制台窗口来运行它们，你可以通过 sudo npm install -g ... 这样的命令形势来安装它们到你的计算机中。
比如，通过以下命令可以安装 Bower 命令行

sudo npm install -g bower

注：如果在Windows下，去掉sudo

然后你就可以直接运行bower了。

bower install

运行网站服务器

尽管AngularJS是纯粹的客户端代码，你可以直接从本地文件夹内，通过浏览器打开文件运行，但是我们推荐你使用HTTP网站服务器来运行它。尤其是现在很多流行的浏览器出于安全考虑，并不允许JavaScript进行网络请求。
我们已经为angular-phonecat项目配置了一个简单的静态网站服务器用于开发过程中的网站调试。通过以下命令启动网站服务器：

npm start

这将运行一个监听在8000端口的本地服务器。然后你可以使用以下网站访问网站了：
http://localhost:8000/app/index.html

注：如果你想修改IP地址和端口号，打开package.json文件中的start脚本，使用 -a 设置网络地址，用-p设置端口)

运行单元测试

我们一般使用单元测试保证JS代码能正确运行。单元测试的目标在于测试应用的某一部分单独的隔离开的代码的功能。本项目的单元测试代码在 test/unit 目录中。
在该项目中，我们使用Karma测试框架进行单元测试。通过以下命令运行Karma：

npm test

Karma运行后将从 test/karma.conf.js 读取配置。这些配置将指导Karma完成：

• 打开Chrome浏览器并且链接到Karma
• 在浏览器中执行所有的单元测试
• 在终端(Linux-core )或者控制台(Windows) 中显示单元测试的结果。
• 监视整个项目的JS文件，并且在这些文件发生改动时自动的重新进行单元测试。

让它一直运行在后台是很好的习惯，因为它会实时的反馈告诉你，你的JS代码是否通过的单元测试。

运行端到端（E2E）测试

E2E测试主要用于保证整个网站整体能够运行正确。本项目中的E2E测试将用来测试客户端应用，尤其要保证页面能够正确展示和交互。它将通过模拟用户真实交互来实现这个测试。
E2E测试的代码都放在 test/e2e 目录中。
在该项目中，我们将使用Protractor来运行E2E测试。由于Protractor需要好几个驱动来和浏览器交互，你需要通过以下命令安装:

npm run update-webdriver

注：上述命令只需要运行一次

你需要安装JAVA来确保Protractor能正确调用Selenium单机版。通过在终端或者控制台中输入 java -version 来确认你是否安装了JAVA, 如果没有安装，要先安全JAVA并且配置好环境变量。
由于Protractor只能与一个运行的网站应用交互，所以我们先要启动我们的网站服务器：

npm start

然后重新打开一个终端或者控制台窗口，通过以下命令启动E2E测试：

npm run protractor

Protractor将去读取 test/protractor-conf.js 配置，这些配置将指导Protractor完成以下任务：

• 打开一个Chrome窗口并且连接到网站应用。
• 在浏览器中执行所有的端到端测试。
• 在终端/控制台中显示测试结果。
• 关闭浏览器并且退出。

当你改动的HTML代码并且想整体测试以下时，做一下E2E测试是很好的选择。当你PUSH自己的改动代码前，先做好E2E测试也是很常见并且值得鼓励的。
到此为止，你已经配置好了本地开发环境。

下面开始正式进入教程。

原博客文章地址： http://www.tbwood.cn/articles/2016/03/03/1456997889326.html