搭建和学习Angularjs官方示例angular-phonecat项目

1、简介

最近须要学习angularjs，但是官方的网站在中国不是很友好，访问不是很方便。

还好找到了下面的一个更齐全点的官方示例angular-phonecat项目的教程网站PhoneCat 入门教程 App 导言

不过在真正进行这个示例项目以前，能够参考下Angular-Phonecat项目初探 ，对这个学习项目的构成初步了解以及了解一些环境搭建的问题，而后在正式开始入门教程学习。

这个示例是基于AngularJS1.3.0的，且还须要安装chrome和Firefox浏览器。

2、环境搭建

虽然示例中有详细的搭建步骤，不过在实际机器(win7)上搭建时仍是有不少问题，简要说明下须要安装的环境

• git

• nodejs(内置npm工具)

• jdk

而后若是须要设置代理的话（在公司中常常须要代理才能联网）还须要配置代理见windows环境下设置命令行CMD、Git和NPM代理

angular-phonecat学习项目

官方angular-phonecat学习项目在github上有step-0~step12个项目checkout点，分别对应着学习步骤0~步骤12。

也能够在github的该学习项目的托管地址在线查看两个学习步骤之间的详细修改https://github.com/angular/angular-phonecat/compare/step-1...step-2 。效果以下：

同时，也能够经过以下地址在线查看每一个步骤(将地址的step-2换成任意的step-*)的运行效果：http://angular.github.io/angular-phonecat/step-2/app/

git下载源码

找一个目录下载angular-phonecat项目的step-0：

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

运行示例项目注意事项

注意事项一：

运行这个测试项目过程当中，有一点须要注意，项目默认的http-server是0.6.1版本的，在最新的chrome浏览器上运行会出出现问题（不合法的字符），在按照导言的步骤，从官网clone了项目后，须要修改目录下的package.json文件，将 原来的

"http-server": "^0.6.1" 修改为更加新的"http-server": "^0.9.0", 而后在运行命令npm install

注意事项二：

运行项目进行karma单元测试时，会出如今新版本的Firefox上闪退，并在命令行中出现"fix: invalid characters in the headers on Node"的提示信息。这是karma的一个bug，参考fix: invalid characters in the headers on Node 5.6.0

解决方法是，更新karma到0.13.0和karma-firefox-launcher到0.1.7。

如下是我修改后package.json文件

  "devDependencies": {
    "karma": "^0.13.0",
    "karma-chrome-launcher": "^0.2.3",
    "karma-firefox-launcher": "^0.1.7",
    "karma-jasmine": "~0.3.0",
    "protractor": "^3.2.0",
    "http-server": "^0.9.0",
    "tmp": "0.0.23",
    "bower": "^1.7.1",
    "shelljs": "^0.6.0"

  }

注意事项三：

运行protractor端对端自动测试时，须要使用本地的Selenium服务器来控制浏览器，而Selenium服务器是经过Java虚拟机运行的，所以在运行以前须要检查Java Development Kit (JDK) 是否已经安装。检查命令是经过命令行界面输入：

java -version

若是没有安装JDK，在运行protractor时会提示Error: listen EACCES 0.0.0.0:63386 at Object.exports._errnoException

注意事项四：

会提示一个gyp的Err，相似以下：

c:\Users\dhb\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\src\win
_delay_load_hook.c(16): fatal error C1083: 没法打开括文件:“windows.h”: No such file or directory [F:\work\evcp-html\node_modules\utf-8-validate\build\binding.sln]
gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (C:\Users\dhb\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\build.js:276:23)

出现这个一般须要安装python而且配置python环境变量，以及安装.net framwork sdk。

好像能够直接在当前项目的目录下安装node-gyp来规避。

npm install node-gyp --save-dev

--save-dev参数能够将node-gyp软件写进package.json依赖配置文件中。

3、单元测试套件karma-jasmine

Karma 是Google 开源的一个基于Node.js 的 JavaScript 测试执行过程管理工具。Karma 项目主页 http://karma-runner.github.io/0.13/index.html。Karma免去了构建测试测试配置方面的负担，这样可让开发者将主要精力放在构建核心应用逻辑上面。

Karma支持多种测试框架，默认是Jasmine，Jasmine是一个用于测试JavaScript代码的行为驱动开发框架。

Jasmine的官方文档参考：Jasmine Behavior-Driven JavaScript Documentation  上面有很一个很详细的测试示例。

一个简单的karma-Jasmine安装教程能够参考自动化测试之karma和jasmine

4、自动化端对端测试框架protractor

单元测试工具Karma和jasmine能够测试控制器和其余由JavaScript写的组件, 但不能方便测试DOM操做和咱们的程序进行功能测试。此时，就须要使用protractor端对端测试套件。protractor是自动化集成测试框架，基本信息见 Protractor入门介绍

官方网站地址：http://www.protractortest.org/ 和github https://github.com/angular/protractor

注：不知道是否是protrator官网是Google的缘由，官网打不开，所以相应的文档能够参考Github上的Doc文档：https://github.com/angular/protractor/tree/master/docs

Protractor是一个又AngularJS团队编写的端对端测试工具，它是一个对 webdriverJS的封装，同时Jasmine在这里被指定用来测试。

什么是WebDriverJS？首先就要说到webDriver，或者是selenium，它会自动操做你的浏览器，所以是用于自动化测试的绝佳工具。不管你在测试你的应用时作了些什么，如导航到一个页面，点击了一个按钮，在一个输入框中写了一些文字，提交了一个表单等等，Selenium均可以替你自动完成这些事。

之因此叫作端对端e2e，由于含有浏览器客户端和Selenium server的服务器端，二者之间经过JSON wire protocol进行交流。对于不一样语言如ruby，Python等对这个JSON wire protocol进行封装就叫作对该语言的绑定，其中对于JavaScript的绑定的项目就叫作 WebDriverJS。