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

2019独角兽企业重金招聘Python工程师标准>>>

一、简介

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

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

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

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

二、环境搭建

虽然示例中有详细的搭建步骤，不过在实际机器(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依赖配置文件中。

三、单元测试套件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

四、自动化端对端测试框架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。

转载于:https://my.oschina.net/u/658505/blog/664264