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弹出来,然后运行一堆测试。








你可能感兴趣的:(angular,js,angularjs,入门指南,入门教程)