PhoneCat是AngularJS官方的示例教学应用。你可先看看PhoneCat的在线运行效果。点击查看

AngularJS Phonecat

下载PhoneCat

PhoneCat的官方教程地址是:https://docs.angularjs.org/tutorial

PhoneCat的GitHub仓库是:https://github.com/angular/angular-phonecat,其中的一些包依赖的资源需要你自己安装,如果你对node.js,bower的相关知识不熟悉的话,你也可以下载我们已经整理好的压缩包。

Angular-PhoneCat.zip

解压后放到你的本地的web根目录下运行即可,你本地的web根目录可以使用任何你熟悉的编程技术,如 php 的 apache 环境,或.net环境。

当然,我们也给出PhoneCat完整版的官方安装方法。


安装Git

你可以从http://git-scm.com/download下载并安装Git。一旦安装好了,你应该能够访问到git命令行工具。你将需要用到的主要命令是:

  • git clone ... : 把一个远程的知识库克隆到你的本地机器上
  • git checkout ... : 检查一个特定的分支或一个代码的标记版本以破解

下载angular-phonecat

运行以下命令以克隆放置在GitHub上的 angular-phonecat repository

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

该命令在你当前的目录中创建了angular-phonecat目录。

该`--depth=14`的选项仅仅是告诉Git只拉下来最后的14次提交。这样使下载更小更快。

把你当前的目录变成angular-phonecat

cd angular-phonecat

从现在开始,本教程指令,假定你从angular-phonecat目录上运行所有的命令。


安装Node.js

如果你想运行预配置的本地web服务器以及测试工具,则你还需要Node.js v0.10.27+

你可以针对你的操作系统从http://nodejs.org/download/下载一个Node.js安装包。

运行以下的命令行,检查你已经安装的Node.js的版本:

node --version

在基于Debian的发行版中,与别的实用工具有一个名称冲突,它称为node。建议的解决方案是再安装nodejs-legacy apt 安装包,它会把node重命名为nodejs

apt-get install nodejs-legacy npm
nodejs --version
npm --version
如果你需要在你的本地环境中运行Node.js的不同版本,请考虑安装Node版本管理器(nvm)

一旦你已经在你的机器上安装了Node.js,你可以依靠运行以下代码下载该工具。

npm install

这个命令读取了angular-phonecat的package.json文件,并把以下工具下载到node_modules目录中:

运行npm install还将自动使用bower以把该Angular框架下载到app/bower_component目录。

注意angular-phonecat项目被设置为通过npm脚本安装并运行这些实用工具。这意味着要想跟随这个教程,你并非一定要让实用工具中的一个全局安装在你的系统中。参见下面的**安装助手工具**以了解更多信息。

该项目用一些npm助手脚本预配置,以使它容易运行你在开发时需要用到的常见的任务:

  • npm start : 启动一个本地开发Web服务器
  • npm test : 启动Karma单元测试运行器
  • npm run protractor : 运行Protractor端到端(E2E)测试
  • npm run update-webdriver : 安装Protractor所需要的驱动程序

安装助手工具(可选的)

Bower、Http-Server、Karma和Protractor模块也都中可执行的,它们可以全局安装,也可从终端/命令提示符中直接运行。跟随着这个教程,你不需要安装它,但是如果你决定你确实想要直接运行它们,你可以使用sudo npm install -g ...来全局安装这些模块。

作为实例,要想安装可执行的Bower命令行,你只需要输入以下指令:

sudo npm install -g bower

(Omit the sudo if running on Windows)

然后你可以直接运行该bower工具了,如下:

bower install

运行开发Web服务器

虽然Angular应用程序是纯客户端代码,而且能够直接从文件系统中,在web浏览器中打开它们,但是最好从一个HTTP web服务器中供应它们。特别是,为了安全原因,如果网页直接从文件系统中加载,很多现代浏览器不允许JavaScript发起服务器请求。

为了在开发期间托管应用程序,用一个简单的静态的web服务器配置angular-phonecat项目。运行以下指令以开启web服务器。

npm start

这将创建一个本地web服务器,鉴听你的本地机器上的端口8000。现在你可以在这个地址上浏览该应用程序了:

http://localhost:8000/app/index.html
要想在不同的IP地址或端口上供应该web应用程序,可以编辑package.json内部的“start”脚本。你可以使用`-a`以设置地址,使用`-p`以设置端口。

运行单元测试

我们使用单元测试以确保我们的应用程序中的JavaScript代码正确运行。单元测试关注于应用程序的小型的隔离部分。单元测试保存在test/unit目录中。

angular-phonecat项目被配置为使用Karma以针对本应用程序运行该单元测试。运行以下指令以开始Karma。

npm test

这将开始Karma单元测试运行器。Karma将读取在test/karma.conf.js中的配置文件。 这个配置文件告诉Karma要:

  • 打开一个Chrome浏览器,把它连接到Karma。
  • 在该浏览器中执行所有的单元测试
  • 报告在终端/命令行窗口中的那些测试的结果
  • 观察所有项目的JavaScript文件,每当有变化时重新运行测试

最后让它一直在后台运行,因为北会给你即时的回调,关于当你在操作代码时,你的改变是否通过了单元测试的回调。


运行端到端测试

我们使用端到端测试以确保应用程序作为一个整体运行。端到端测试被设计为测试整个应用客户端应用程序,特别是测试视图是否正确显示并有正确的行为。它在浏览器中运行,通过模拟真实用户与真实应用程序的交互。

端到端测试保存在test/e2e目录中。

该angular-phonecat项目被配置为使用Protractor以针对应用程序运行端到端测试。Protractor依赖于一组允许它与浏览器交互的驱动程序。你可以通过运行以下代码以安装这些驱动程序:

npm run update-webdriver

你只需要运行它一次。

因为Protactor通过与正在运行的应用程序交互来起作用,我们需要开启我们的web服务器:

npm start

然后在一个单独的终端/命令行窗口中,通过运行以下指令,我们可以针对该应用程序运行Protractor测试脚本:

npm run protractor

Protractor将读取在test/protractor-conf.js中的配置文件。该配置文件要求Protractor做:

  • 打开一个Chrome浏览器,把它连接到应用程序上
  • 在浏览器中执行所有的端到端测试
  • 报告在终端/命令行窗口中的那些测试结果
  • 关闭浏览器并退出

最好在每当你对HTML视图作了改变的时候运行端到端测试,或者当你想检查该应用程序作为一个整体是否正确执行时,运行端到端测试。通常在把一个新的改变提交到远程知识库之前运行端到端测试。

现在你已经测试好了你的本地机器,让我们开始这个教程吧:第一步 引导程序