ng翻译-Tutorial

出于学习，对ng官网资料https://docs.angularjs.org/tutorial进行翻译，若有译误，欢迎指正。

PhoneCat 应用教程

一个很好的了解ng的方式是学习这个教程，它会使你透视到一个ng 网页应用的结构。这个应用是创建一个安卓设备列表的目录，能够对目录进行过滤只列出来你感兴趣的设备，而且能够浏览任何设备的详情。

按照这个教程将会看到ng如何使浏览器更聪明-没有使用本地扩展或者插件：

• 看到一些示例，展现了如何经过客户端数据绑定创建数据的动态视图，这些动态视图会作出实时的变化来响应用户的操做。
• 看到ng是如何在没有操做DOM状况下，实现数据和视图的同步。
• 学习一种经过使用Karma和Protractor工具更好更容易的测试应用的方法。
• 学习如何使用依赖注入和服务去完成常见的网页任务，例如使应用更容易的得到数据。

当你完成了这个教程，你将得到的能力：

• 能够建立一个兼容全部浏览器的动态应用。
• 使用数据绑定来连接你的数据模型和视图。
• 经过Karma建立和运行单元测试。
• 经过Protractor建立和运行端到端测试。
• 将业务逻辑从template中移出，并放入components和controllers中。
• 使用ng services从一个服务中得到数据。
• 经过ngAnimate组件将动画使用到你的应用中。
• 用一种组件化的方式组织ng应用，具良好的有项目扩展性。
• 鉴定关于ng进一步学习的资源。

 这个教程引导你贯穿创建一个小应用的整个过程，包括编写且运行单元和端到端测试。在每一步结尾的Experiments中，都为你提供了进一步学习ng和创建应用的建议。

 你能够花费几个小时浏览整个教程或者用一天的时间深刻研究它。若是你正在寻找关于ng的简介，查看Getting Started文档。

 

环境配置

本页的其他部分将展现如何本地搭建开发环境。若是你想读教程，能够直接跳到第一步：Step 0 - Bootstrapping。

 

代码使用

你能够遵循整个教程并下载代码到本地。如此，你能够着手练习写ng代码和使用推荐的测试工具。

这个教程使用git做为代码管理器。听从这个教程，出了指导如何安装和运行一些Git命令，你不须要了解关于git 的任何事情。

 

安装Git

从 http://git-scm.com/download下载和安装。一旦安装，你就可使用运行git命令的工具。你将用到的主要命令有：

• git clone ...:从远程库复制代码到本地。
• git checkout...:切换一个特殊分支或者一个标记的代码版本。

下载angular-phonecat

运行下面的命令从GitHub上下载angular-phonecat：


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

这个命令在你当前的路径下建立了一个angular-phonecat的子目录。

选项--depth=16是告诉Git去下载最近16次提交的代码，这样能够是下载更小更快。

进入angular-phonecat目录下：

cd angular-phonecat

从如今开始，这个教程的说明，都假定你在angular-phonecat目录下运行全部的命令。

 

安装Node.js

若是你想运行配置好的本地服务和测试工具，你须要Node.js v4+。

你能够从 https://nodejs.org/en/download/下载且安装Node.js。

运行下面命令检查你已经安装的Node.js版本。

node --version

在基于Debian的发行版本，node可能会引发和另外一个实用程序的命名冲突。建议的解决方法是安装一个能够将node重命名为nodejs的nodejs-legacy包。

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's 下的package.json文件，而后下载下面这些工具到node_modules目录下：

• Bower -客户端代码包管理
• Http-Server-简单的本地静态网页服务
• Karma-单元测试运行者
• Protractor-端到端（(E2E）测试运行者

运行npm install 将自动的使用bower去下载AngularJs框架到app/bower_components目录。

注意这个angular-phonecat项目是经过运行npm脚本安装和运行这些实用程序的。这意味着遵循这个教程，在你的系统中没必要要全局安装这些实体应用。看下面的Installing Helper Tools得到更多信息。

这个工程预先配置了不少在开发时须要的npm脚本，使得运行一般任务更加容易。

• npm start： 开启一个本地开发网页服务。
• npm test：开启Karma单元测试运行者。
• npm run protractor：运行Protractor端到端测试。
• 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

 

运行开发网页服务

ng应用都是存粹客户端代码，所以直接从文件系统中打开它们是可能的。但更好的方式是从Http网页服务器中使用它们。尤为，从安全考虑，若是页面从本地文件系统加载，多数流行浏览器是不容许JavaScript作服务器请求的。

这个angular-phonecat项目为了能够托管应用已经配置了一个简单的静态网页服务器。经过运行以下命令开启网页服务。

npm start

这将在你的本地机器上建立一个网页服务，监听端口为8000.你可经过http://localhost:8000/index.html 浏览应用

编辑package.json中的“start”脚本能够改变服务网页应用的IP地址和端口号。能够用-a设置地址和-p设置端口。你须要更新在e2e-test/protractor.conf.js中的baseurl配置属性。

 

运行单元测试

咱们经过单元测试保证应用中的Javascript代码执行正确。单元测试专一测试应用中的小的独立的部分。单元测试代码在specs测试文件中，与应用代码同一路径下。这样能够方便代码更新和查询。同时也易于咱们应用结构的重构。

angular-phonecat工程为应用配有Karma进行单元测试。运行以下启动Karma：

npm test

这将启动Karma单元测试运行者，Karma将读karma.conf.js配置文件，该文件位于工程的根目录。这个配置文件告诉Karma进行以下操做：

• 打开谷歌和火狐浏览器连接karma
• 在浏览器中执行全部的单元测试
• 在终端命令行中报告测试结果
• 监视项目中Javascript文件且一旦有改变当即从新执行单元测试

在后端一直运行这个测试是有好处的，由于当你在修改代码的时候，这个单元测试会提供你当即的反馈。

 

运行端到端测试

经过端到端测试保证整个应用按照预期运行。端到端测试是为了测试整个客户端应用，尤为是应用的试图呈现和行为正确。这是经过在浏览器中模拟真实用户和真实应用的交互实现的。

端到端测试代码在e2e-tests目录下。

angular-phonecat工程配置Protractor为应用运行端到端测试。Protractor依靠一些驱动来与浏览器交互。经过执行以下安装这些驱动：

npm run update-webdriver

你不须要手动执行这些命令，npm配有这些命令，所以在执行端到端测试时，它将自动的执行。

因为Protractor是经过与一个正在执行的应用交互工做的，所以咱们须要启动网页应用。

npm start

而后，在一个独立的终端命令窗口中，能够运行以下Protractor脚本对应用进行测试。

npm run protractor

Protractor将读配置文件e2e-tests/protractor.conf.js，这个文件告诉Protractor去作：

• 打开谷歌浏览器且连接到应用
• 在浏览器中执行全部的端到端测试
• 在终端命令行中报告测试结果
• 关闭浏览器并退出

不管什么时候你在html视图中作了改变或者想检查应用总体运行是否正确，它是有好处的去运行端到端测试。常见的作法是向远程库提交代码前执行端到端测试。

 

常见的问题

防火墙/代理问题

Git和其它工具，经常使用git:协议从远程库得到文件。一些防火墙配置拦截git：//urls，这将致使在复制代码库或者下载依赖时出现错误（例如企业防火墙）

若是你遇到这个问题，你可使用https：代替，运行以下命令：

git config --global url."https://".insteadof git://

 

更新WebDriver花费时间长

第一次执行update-webdriver可能花费几秒到几分钟（取决与你的硬件和网络）。若是你取消执行（例如使用ctrl + c），当再次执行Protractor你可能会遇到错误。

这种状况，你能够删除node—modules/目录，而后再次执行npm install

 

Protractor 依赖

在这个引擎下，Protractor使用Selenium Standalone Server，它反过来须要在系统中安装JDK。经过执行java -version检查。若是JDK没有安装，你能够在这下载安装。

 

在网页服务器中错误执行

这个服务器配置端口号为8000，若是这个端口已经被占用（例如被另外一个正在执行的网页服务占用），你将得到一个错误EADDRINUSE。在运行npm start以前肯定端口可用。

 

如今你已经创建了本地环境，咱们开始学习教程：Step 0 - Bootstrapping。