AngularJS官方网站提供了一个用于学习的示例项目:PhoneCat。这是一个Web应用,用户可以浏览一些Android手机,了解它们的详细信息,并进行搜索和排序操作。
对于PhoneCat项目的开发环境和测试环境的搭建,官方网站上提供了详细的指导:http://docs.angularjs.org/tutorial。
获取源代码
PhoneCat项目的源代码托管在GitHub上,因此获取源代码之前需要安装Git (http://git-scm.com/download)。安装Git后,可以通过git clone来下载源代码:
git clone --depth=14 https://github.com/angular/angular-phonecat.git
–depth=14选项的意思为:仅下载最近14次的代码提交版本;这么做可以减少下载的文件大小,加快下载。
安装依赖包
PhoneCat是一个Web应用程序,因此最好在Web服务器中运行,以期获得最佳结果。官方推荐安装Node.js (http://nodejs.org/download/)。
PhoneCat项目的运行与测试依赖一些别的工具,可以在安装Node.js后通过npm命令来安装这些依赖包。以下命令需在angular-phonecat项目路径下运行:
npm install
运行该命令后,会在angular-phonecat项目路径下安装以下依赖包:
- Bower. 包管理器
- Http-Server. 轻量级Web服务器
- Karma. 用于运行单元测试
- Protractor. 用于运行端到端测试
运行PhoneCat项目
完成上述工作后,运行PhoneCat项目很简单,在angular-phonecat项目路径下运行以下命令即可:
npm start
PhoneCat运行后,可以在浏览器中打开http://localhost:8000/app/index.html来访问该Web应用。
运行单元测试
PhoneCat项目中的单元测试是使用Karma来完成的,所有的单元测试用例都存放在test/unit目录下。可以通过执行以下命令来运行单元测试:
npm test
值得一提的是,在运行单元测试前,计算机上必须安装Google Chrome浏览器。
运行端到端测试
PhoneCat项目使用端到端测试来保证Web应用的可操作性,而这个端到端测试是通过使用Protractor来实现的,所有的端到端测试用例都存放在test/e2e目录下。可以通过执行以下步骤来运行端到端测试:
//更新webdriver,此命令只需运行一次 npm run update-webdriver //运行PhoneCat npm start
打开另一个命令行窗口,在其中运行:
npm run protractor
相关推荐
组件式AngularJS应用示例(Phonecat)用现代Javascript和Webpack实现
AngularJS项目搭建技术入门,文档中教你用Grunt、Gulp搭建完整的前端运行框架,以及对于新手如何快速上手angularjs起到很大的帮助。
基于ionic+cordova+angularJs搭建移动端App开发环境。
根据官网上做的,跟网上有点小出入,测试没写!
angularjs phonecat和karma cache 包
reactjs电话猫================================================== ===============================================### Phonecat类似于中的Angularjs phonecat
1.安装Node.js.(node -v) 2.安装Ruby.(ruby -v) 3.进入Ruby安装目录 (cd C:\Ruby200-x64) 4.进入命令行本地来安装插件:gem install --local G:\compass***.gem gem install --local E:\soft\gem\compass***.gem ...
开发环境搭建 2017 标准课程第八章 angularjs开发环境搭建编写readme
简单的AngularJS入门级项目搭建,以及网络请求封装、模拟Android的toast效果、前台数据MD5加密工具类
疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战