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项目的开发与测试环境的更多相关文章

  1. 搭建PhoneCat项目的开发与测试环境

    AngularJS官方网站提供了一个用于学习的示例项目:PhoneCat.这是一个Web应用,用户可以浏览一些Android手机,了解它们的详细信息,并进行搜索和排序操作. 获取源代码 PhoneCa ...

  2. (B)springboot配置开发和测试环境并添加启动路径

    嗯,开发和测试环境要分离,这是一般共识(虽然我工作过的公司都没有这种分离),spring boot也可以按照配置文件的读取来做到这一点. 上图有三个application开头的配置文件,要达到能够读取 ...

  3. ios-实现项目在开发、测试、正式环境快速部署

    快速部署:简单的来说,就是不用更改开发.测试.正式环境下的 url ,来实现在同一台测试手机快速部署三种项目状态. Bundle ID一样只会出现一个app:不一样会出现三个app: 具体步骤: 一. ...

  4. 区块链入门(1):搭建(Ubuntu系统)Truffle v3.2.1 开发和测试环境

    本文主要讲解ubuntu 16.04下, truffle开发测试环境的搭建.  第一步:安装nodejs 和 npm,有两种比较常见的方法. 方法1:直接在nodejs官网下载nodejs-v6.10 ...

  5. 使用Vagrant部署虚拟分布式开发和测试环境

    同步更新到笔者个人博客,可以访问我的博客查看原文:https://www.rockysky.tech 创建自动化配置开发环境 最近由于最近研究和学习的关系,需要经常配置和搭建多个虚拟机组成的分布式系统 ...

  6. 【转】MEAN:Nodejs+express+angularjs+mongodb搭建前端项目框架NJBlog

    http://www.cnblogs.com/mz121star/archive/2013/03/13/njblog.html 项目地址:https://github.com/mz121star/  ...

  7. Windows下mock环境搭建-加速项目Api开发

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 公司进行技术部拆分,以项目制作为新的开发模式,前端+移动端+后端,于是加速Api开发变得很有必要,准 ...

  8. https://www.cnblogs.com/beileixinqing/p/7724779.html vue-cli生成的项目配置开发和生产环境不同的接口 vue-cli生成的项目,vue项目配置了不同开发环境的接口地址,axios.defaults.baseURL如何引用这个地址,这是在我发布项目的时候考虑的,于是想到了

    方法二:(集热心网友提供的方案) 一般项目webpack会有两个或多个配置文件,如: webpack.prod.conf.js 对应线上打包 webpack.dev.conf.js 对应开发环境 使用 ...

  9. vue-cli生成的项目配置开发和生产环境不同的接口

    vue-cli生成的项目,vue项目配置了不同开发环境的接口地址,axios.defaults.baseURL如何引用这个地址,这是在我发布项目的时候考虑的,于是想到了 方法一: config下配置文 ...

随机推荐

  1. 拥抱ARM妹纸第二季 之 第三次 给我变个月亮,让约会更浪漫!

    嗯嗯,效果不错.趁着这个热乎劲,接到俺的LED测试板上试试.呃~~~ 竟然和小LED的效果不一样啊,不一样.不但闪烁而且完全没有调光效果.郁闷内,查查原因呗.看看那里出问题.迅速在PT4115手册里翻 ...

  2. OBIEE 11g:Error:nQSError 36010 Server version 318 cannot read the newer version of the repository

    biee11g升级到最新版以后,发现了一些bug,需要回退到原来的版本,卸载掉升级包以后,启动BI服务,会报上述错误.这是因为资料库文件已经升级为了最新版本.这时候我们需要将资料库文件进行降版本操作. ...

  3. c++各种数据类型表示范围

    符号属性     长度属性     基本型     所占位数     取值范围       输入符举例      输出符举例 --            --          char        ...

  4. Java中如何防止内存泄漏的发生

    在Java开发中我们常常会遇到内存泄漏的情况发生.那么为什么会发生内存泄漏,以及怎样去防止! 内存泄漏的定义:对象已经没有被应用程序使用,但是垃圾回收器没办法移除它们,因为还在被引用着. 为什么会发生 ...

  5. 【BZOJ 1007】 [HNOI2008]水平可见直线

    Description 在xoy直角坐标平面上有n条直线L1,L2,...Ln,若在y值为正无穷大处往下看,能见到Li的某个子线段,则称Li为可见的,否则Li为被覆盖的.    例如,对于直线:    ...

  6. JSP访问Spring中的bean

    JSP访问Spring中的bean <%@page import="com.sai.comment.po.TSdComment"%> <%@page import ...

  7. div均匀分布代码实例

    多个div在同一行以相同间隔分布: 这样的布局效果使用非常的频繁,也就是让多个div在一行分布,并且div于div之间的间隙是一样的,多用在对于产品的展示之用,下面就介绍一下如何实现此中布局,代码实例 ...

  8. ELF

    http://www.360doc.com/content/11/0826/13/7588214_143424472.shtml 链接,装载都是基于数据结构ELF.

  9. 2013 Asia Regional Changchun

    Hard Code http://acm.hdu.edu.cn/showproblem.php?pid=4813 #include<cstdio> ]; int main(){ int t ...

  10. 编译为 Release 与 Debug 的区别

    class Program { static void Main(string[] args) { DoWork(); } static void DoWork() { new Person().Ru ...