angularjs 1.3.x入门教程 1 环境安装

首先感谢网络上翻译angular 入门教程的先辈。

不过那个教程已经有点过时了。和GITHUB上的代码都匹配不上， 后来的学习者造会有很大障碍，这里通过学习顺便翻译一下上买你的东西，光是重点，套话就不翻译了

PhoneCat Tutorial App 翻译（一）环境搭建

当你完成这个入门教程你应当可以

在所有的现代浏览器中创建一个动态应用

应用数据绑定从model写入view中

用Karma创建和运行UT

另外几项没翻译，今后不上，今天主要记录环境搭建的步骤和注意事项

1 安装GIT

http://git-scm.com/download

2 安装nodejs

http://nodejs.org/download/.

3 克隆示例代码

注意，因为后面的一些npm操作需要很深的目录，建议这个clone操作在某个分区的根目录进行我用的是D盘根目录

进入git bash

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

克隆完毕之后，会在D 盘看到angular-phonecat文件夹

以下下操作都在git bash 中进行，不然会报错，因为windows 的文件路径长度支持优先，在安装npm 工具的时候会出现目录太深，文件名太长出错，PS 我开始在CMD 中运行NPM 导致了很多问题。

4 在GIT BASH 中进入angular-phonecat

cd angular-phonecat

5 运行命令 npm install 安装相关的依赖

安装完成之后，会在node_modules 文件夹找到这些模块

• Bower - client-side code package manager
• Http-Server - simple local static web server
• Karma - unit test runner
• Protractor - end to end (E2E) test runner

npm install 这个命令会用bower 自动下载angularjs框架到app/bower_components 文件夹

到这里，安装部分基本完成

6 验证安装

运行 npm start 然后再浏览器中访问

http://localhost:8000/app/index.html

可以看到界面就对了

7 运行 unittest

输入命令npm test,会弹出系统的默认浏览器，在git-bush中会出现如下界面，表示测试成功

8 运行端对端测试

运行命令 下载相关的依赖报

npm run update-webdriver

这个命令会到https://chromedriver.storage.googleapis.com/2.10/chromedriver_win32.zip 去下载这个zip，由于在这奇葩的国度，无法访问这个地址，所以这个命令会失败

挽救方法：

手动下载https://chromedriver.storage.googleapis.com/2.10/chromedriver_win32.zip 这个zip包，然后放到D:\angular-phonecat\node_modules\protractor\selenium目录中解压。

运行

npm run protractor

会看到如下console和chrome弹出来，然后运行一堆测试。