---恢复内容开始---

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

获取源代码

PhoneCat项目的源代码托管在GitHub上,因此获取源代码之前需要安装Git,安装Git后,可以通过git clone来下载源代码:

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

–depth=14选项的意思为:仅下载最近14次的代码提交版本;这么做可以减少下载的文件大小,加快下载。

安装依赖包

PhoneCat是一个Web应用程序,因此最好在Web服务器中运行,以期获得最佳结果。官方推荐安装Node.js

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

angular学习之angular-phonecat项目的实现的更多相关文章

  1. Angular 学习笔记 (Angular 9 & ivy)

    refer : https://blog.angularindepth.com/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde47 ...

  2. angular学习笔记-angular中怎么获取dom元素

    步骤分解: 第一步:给要获取的元素一个ng-model变量,并且绑定事件啦! <div class="home" ng-model="dirName" n ...

  3. Angular学习笔记—创建一个angular项目

    开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 如何安装node.js和npm npm使用介绍 1.安装angul ...

  4. angularjs学习笔记2—运行phonecat项目

    如果你去angularjs中文网看它的教程,你会发现一开始它提供了一个phonecat的引导项目,这个项目是angular官方给出的一个类似于demo的教程项目,并配有相应文档,按照这个项目并配合文档 ...

  5. angular学习第1步

    #### 最专业,最全面的angular的学习文档 https://www.jianshu.com/p/f0f81a63cbcb ### https://www.cnblogs.com/xiaowei ...

  6. Angular 学习思路

    近些年前端框架非常多,主流的有 Vue.React.Angular 等.我参与的项目中使用较多的是 Vue.因为 Vue 学习难度不大,上手很快,代码简洁,而且使用 Vue 全家桶(Vue + Vue ...

  7. Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

    前言: 首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...

  8. angular学习资源

    angular学习资源   angularjs库: https://developers.google.com/speed/libraries/devguide?hl=zh-CN#angularjs ...

  9. 使用Angular CLI生成 Angular 5项目

    如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...

随机推荐

  1. maven 如何将自己的jar包添加到本地仓库

    1 准备一个需要添加到本地仓库的jar包 我这里准备了一个名为mail.jar 的jar包,放到E:\Install Files目录下面 2 下面演示如何将准备的jar包添加到本地仓库 1 语法 mv ...

  2. PHP用mysql数据库存储session

    大部分使用php的人一旦应用到session都会使用cookie. cookie虽好可是它也会给我们带来一些隐患的. 隐患一:如果客户端机器的cookie一旦因病毒而失效了,那么session也就相当 ...

  3. hduoj 2546饭卡

    饭卡 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  4. Cannot convert value '0000-00-00 00:00:00' from column 1 to TIMESTAMP解决办法

    在Mysql数据库中使用DATETIME类型来存储时间,使用JDBC中读取这个字段的时候,应该使用 ResultSet.getTimestamp(),这样会得到一个java.sql.Timestamp ...

  5. Wpf鼠标点击坐标转为屏幕坐标/后台重新设置在Canvas和Grid上的位置

    Point getP = PointToScreen(Mouse.GetPosition(this)); DockPanel.SetValue(Canvas.LeftProperty, 1.0); D ...

  6. HTML超链接实用

    1.文本链接: <a href="http://www.meng.com/" target="_blank">访问meng!</a> 2 ...

  7. Visual Studio无法推送提交到Github的解决方法

    前言 当出现Visual Studio推送变更失败时,卸载系统中所有Git以及Visual Studio 的Git工具再重装即可 前情概要 今天由于要尝试使用RabbitMQ,所以打算先在本地做些小D ...

  8. ASP.NET MVC 音乐商店 - 3. 视图与模型

    上一篇中使用字符串,这一篇我们就开始使用视图来处理. 我们已经可以从控制器的 Action 中返回一个字符串,这可以帮助我们更好地理解 Controller 是如何工作的.但是对于创建一个 Web 程 ...

  9. ndk制作so库,ndk-build不是内部或外部命令。。。的错误

    想了想大概就需要下面这几步: 1.下载ndk 2.配置ndk的环境变量 3.在android studio添加一些ndk的配置 4.编写c文件 5.生成so库 6.调用so库 上面提到的大部分问题你都 ...

  10. Android 修改圆形progressBar颜色

    查了半天资料,没查到怎样修改progressBar的方法,全都是重新写个ProgressBar,其实很简单在只要一句xml里一句化就可以 android:indeterminateTint=" ...