`

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

阅读更多

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--angular-phonecat

    尽管描述中提到这个项目可能与网上的教程存在一些小差异且没有包含测试部分,但它仍然是学习AngularJS的一个宝贵资源。 首先,让我们深入了解AngularJS的一些核心概念: 1. **双向数据绑定**:AngularJS的核心特性...

    组件式AngularJS应用示例Phonecat用现代Javascript和Webpack实现

    **组件化AngularJS应用——Phonecat的现代JavaScript与Webpack实现** 在现代Web开发中,组件化已经成为构建可维护、可复用和可扩展应用程序的重要模式。AngularJS,一个由Google维护的JavaScript框架,以其强大的...

    基于ionic+cordova+angularJs搭建移动端App

    基于ionic+cordova+angularJs搭建移动端App开发环境。

    AngularJS项目搭建技术入门

    AngularJS项目搭建技术入门,文档中教你用Grunt、Gulp搭建完整的前端运行框架,以及对于新手如何快速上手angularjs起到很大的帮助。

    angularjs phonecat

    **AngularJS PhoneCat 教程详解** `AngularJS PhoneCat` 是一个官方提供的经典示例应用,用于教学和展示 `AngularJS` 框架的基本用法和特性。这个项目对于初学者来说是一个很好的起点,它涵盖了从创建基本的前端...

    AngularJs搭建大型多页面应用

    ### AngularJs搭建大型多页面应用 #### AngularJs简介与历史发展 AngularJs是Google于2010年推出的一款开源JavaScript框架,它旨在简化Web应用的开发过程,并提高其维护性。随着Web技术的发展,前后端开发逐渐分离...

    reactjsPhonecat:类似于Reactjs中Angularjs的Phonecat

    reactjs电话猫================================================== ===============================================### Phonecat类似于中的Angularjs phonecat

    AngularJS整合Springmvc、Spring、Mybatis搭建开发环境

    在搭建基于AngularJS整合Springmvc、Spring、Mybatis的开发环境时,首先要明确各个组件的作用和它们之间的关系。Spring是一套全面的Java/Java EE应用开发框架,提供了丰富的功能支持,包括事务管理、数据访问、Web层...

    ruby,node,angularJs环境搭建包

    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 ...

    AngularJS入门之简单的项目搭建

    2. **项目搭建** - **环境准备**:确保已安装Node.js和npm,使用`npm install -g angular-cli`全局安装AngularJS CLI工具。 - **初始化项目**:运行`ng new AngularDemo`命令创建新项目,然后进入项目目录`cd ...

    AngularJS开发指南33:单元测试1

    【AngularJS开发指南33:单元测试1】 在软件开发中,单元测试是一种重要的实践,它专注于测试程序中的最小可测试单元,通常是函数或方法。AngularJS作为一个强大的前端框架,非常注重可测试性,它提供了内置的机制...

    疯狂前端开发讲义——jQuery+AngularJS+Bootstrap前端开发实战

    《疯狂前端开发讲义——jQuery+AngularJS+Bootstrap前端开发实战》是一本深入浅出的前端开发教程,它涵盖了三个核心的前端技术:jQuery、AngularJS和Bootstrap。这些技术在现代网页开发中扮演着至关重要的角色,使得...

    疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战

    《疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战》是一本专注于前端开发的实践教程,由知名IT作者李刚编著。本书旨在帮助读者深入理解和掌握前端三大热门框架——jQuery、AngularJS和Bootstrap的使用...

    开发环境搭建 2017 标准课程第八章 angularjs开发环境搭

    开发环境搭建 2017 标准课程第八章 angularjs开发环境搭建编写readme

Global site tag (gtag.js) - Google Analytics