angular-phonecat的编译运行

1.angular-phonecat是angularjs的官方tutorial示例。通过学习它，可以算是一个不错的入门angularjs的方法。
建议将代码git clone下来，跟着官方英文文档一步一步做。网上虽然有中文翻译版，但是太旧了。

文档： https://code.angularjs.org/1.4.0-rc.0/docs/tutorial
代码： https://github.com/angular/angular-phonecat

笔者按照文档编译运行时碰到了一些小问题，然后通过一些workaround解决了，本文算是对编译运行步骤的一个记录。

2.环境
Windows7 64bit
Chrome 41
nodejs 0.10.29
npm 2.8.3
bower 1.4.1
angularjs 1.3.15
bootstrap 3.1.1
jquery 2.1.3

3.具体步骤

3.1 克隆代码

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

以上命令只拉取最新的14次提交，而不是所有提交记录，可以缩短下载代码的时间。

3.2 安装好nodejs, npm，bower
这个不多说了，不会的参考其他文章吧

3.3 安装依赖

npm install

如果出现以下错的话，
fatal: unable to connect to github.com
说明git协议的端口被防火墙封了，可以考虑改用https协议，输入以下命令即可

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

bower install

以上没错了以后最后再执行一次npm install以确保没有报错就可以了。

3.4 单元测试

npm test

3.5 启动

npm start

然后浏览http://localhost:8000/app/index.html即可

3.6 运行E2E测试

npm start
npm run protractor

如果出现以下错的话，
Error: Got error Error: connect ETIMEDOUT from https://chromedriver.storage.googleapis.com/2.10/chromedriver_win32.zip
说明代理不行，大家都懂得，用代理自己去把上面这个地址的zip包下载下来把，
然后将chromedriver_win32.zip改名成chromedriver_2.10.zip复制到node_modules\protractor\selenium目录，并解压缩，得到chromedriver.exe

查看一下目录，应该有3个文件

D:\git\opensource\angular-phonecat>ls node_modules\protractor\selenium
chromedriver.exe  chromedriver_2.10.zip  selenium-server-standalone-2.42.2.jar

最后再来一次

npm run protractor

可以看到会自动打开Chrome浏览器，机器人会自动点击网页，进行E2E测试。

4. 结尾
至此，环境算是搭建成功了。后面的事就是跟着文档研究这个示例代码了。这个示例代码用上了很多新的技术和最佳实践，可以作为一个不错的学习案例。
tutorial从第0小节到第12小节，

git checkout -f step-0

此命令会将工程代码reset到step-0，对应于tutorial的第0小节。后面小节以此类推。