[英文原文地址:https://docs.angularjs.org/tutorial(已被墙)]
通过运行本教程来介绍Angularjs是一个很好的方法,本教程可以让你了解一个使用AngularJs web应用的结构。你将要创建的这个程序是一个展示Android设备列表的目录,通过过滤列表你可以查看你感兴趣的设备,并且还可以查看任意设备的详细信息。
跟着以下教程你会了解在没有使用本地扩展或插件的情况下,使用AngularJs是怎样使浏览器变得更敏捷的:
分析样例,该样例说明了怎样使用客户端数据绑定来构建数据的动态视图,且这些视图会根据用户的操作立即变化。
了解使用AngularJs如何在不需要DOM操作的情况下保持视图与你的数据同步。
使用Karma和Protractor,学习一种更好、更容易的测试你的web应用的方法。
学习如何试用依赖注入和服务来更容易的创建通用的web任务,例如向你的应用中插入数据。
当你完成了上述教程后,你将能: - 创建一个能在所有现代浏览器上运行的动态应用程序。 - 使用数据绑定来将你的数据模型绑定到你的视图中。 - 使用Karma创建及运行单元测试。 - 使用Protractor创建及运行端对端测试。 - 将应用的业务逻辑从模板移到Controllers中。 - 使用AngularJs服务从一个服务器获取数据。 - 试用ngAnimate在你的应用中添加动画。 - 确定学习更多AngularJS知识的资源
这个教程会全程引导你创建一个包含编写及运行单元测试和端对端测试的简单应用。每一步结尾的实验将为你提供更多的了解AngularJS以及正在创建的应用的建议。
你可以花一两个小时通读一下教程全文,或者你也可以花一整天时间一步步按教程执行下去。如果你正在寻找一个AngularJs更简短的介绍,请查看开始文档。
本页的剩余部分将告诉你怎样在你的机器上搭建开发环境。如果你仅仅想阅读教程,那么你可以直接跳转到第一步:Step 0 - Bootstrapping
你可以跟随本教程并修改代码以适应你的电脑。通过这种方法你可以得到真实的编写AngularJS代码以及试用推荐测试工具的动手实践。
本教程依赖于Git版本控制系统。除了安装和运行几行小代码外跟随本教程你不需要知道任何关于Git的知识。
你可以从Git下载页面下载和安装Git。安装成功后,你需要能访问git命令行工具。以下是你需要用到的主要命令:
git clone ... : 克隆一个远程存储库到你的本地机器上
git checkout ... : 检出一个特定分支或者标签版本。
通过运行以下命令克隆angular-phonecat存储库:
git clone --depth=14 https://github.com/angular/angular-phonecat.git
该命令将直接在你当前目录下创建angular-phonecat文件夹。
--depth=14可选项告诉git仅仅下载最近14次提交。这使得下载非常快捷。
使用以下命令将当前目录改为angular-phonecat:
cd angular-phonecat
从现在起,本教程所有命令都将在angular-phonecat中执行。
如果你想像使用预先配置的本地web服务器和测试工具,那么你也需要Node.js v0.10.27+.
你可以从Nodejs下载页下载一个适合你的操作系统的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版本管理器
当你在你的机器上安装好了Node.js后,你可以通过运行以下命令来下载依赖组件:
npm install
该命令将下载以下工具到node_modules文件夹:
bower - 客户端代码打包管理工具
Http-Server - 简单的本地静态web服务器
Karma - 单元测试工具
Protractor - 端对端(E2E)测试工具
运行npm install 将自动试用bower下载Angular框架到app/bower_components文件夹
注意angular-phonecat项目是通过npm脚本来安装和运行这些工具的,那意味着按照本教程,你并不需要将所有的工具都安装到你的系统里。查看辅助工具安装你就获得更多信息。
为了方便你在开发中方便的运行一些通用任务,项目预置了一些辅助的npm脚本:
npm start : 开启一个本地开发用的web服务器
npm test : 开启一个单元测试工具
npm run protractor : 运行端对端(E2E)测试
npm run update-webdriver : 安装Protractor需要的驱动
Bower, Http-Server, Karma 和 Protractor模块都是可执行程序,他们都可以通过终端/命令行来安装和直接执行。依据教程你可以不用安装他们,但是你如果确实想直接运行他们的话,你可以通过执行命令sudo npm install -g ...来安装这些模块。
例如要安装Bower你需要执行以下命令:
sudo npm install -g bower
(windows上执行时去掉sudo)
然后你可以直接运行bower工具,例如:
bower install
虽然Angular应用是纯碎的客户端代码,可以直接通过浏览器在文件体系中运行他们,但是通过Http web服务器运行他们更好。特别是,处于安全考虑,大多数现代浏览器不允许直接从文件系统中加载的文件中的javascript直接进行服务器请求。
angular-phonecat项目配置了一个静态的web服务器用来在开发中托管应用。使用以下命令开启web服务器:
npm start
该命令将在你的本地机器上创建一个监听8000端口的web服务器。你现在可以在浏览器中访问以下地址。
http://localhost:8000/app/index.html
如果希望在指定的ip或端口上面提供webapp服务,那么你可以编辑package.json中的"start"脚本,试用-a 指定ip,-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
(你仅仅需要执行该命令一次。)
然后在一个重新开启终端/命令行窗口中,我们可以通过运行以下命令来在应用上执行Protractor测试脚本:
npm run protractor
Protractor将读取配置文件test/protractor-conf.js.该配置文件就告诉Protractor:
打开一个Chrome浏览器,并连接到应用。
在浏览器中运行所有的端对端测试程序
在终端/命令行窗口中反馈结果。
关闭浏览器并退出。
你最好在任何你更改了html视图或者想检查应用程序作为一个整体是否执行正确时运行端对端测试。人们通常在将一份新的提交发送到远程存储之前进行端对端测试。