Angularjs Tutorial-step0

文章目录

注：本系列文章翻译自Angularjs官方范例教程，本人英语三级未过，翻译能力有限，附上原版网址：http://docs.angularjs.cn

PhoneCat Tutorial App

通过这个简单的教程，能够使你更加清晰地了解Angularjs网页应用的构成。跟随这个教程，你将会完成一个能展示手机列表的网页应用，这个应用包含关键字搜索，查看详情页等功能。

通过这个简单的教程，你将会发现Angular可以在完全不需要任何本地扩展和插件的情况下，让网页应用变得如此美妙：

当你完成了这个教程后，你将会get如下技能：

此教程将按步骤引导你构建一个简单的应用，其中包括书写和运行单元测试与端到端测试。在每一个步骤的最后会有一些实验，提供些建议来帮助你更深入的学习Angularjs。

本教程使用 Git 作为代码版本控制工具，对于Git，你只需要懂得如何进行安装和一些简单的git命令即可。

你可以从Git的官方网站上下载 http://git-scm.com/download。当安装完Git后，就可以使用 git 的命令行工具了。在本教程中，你将会频繁使用到如下两个命令：

在终端运行如下语句来克隆 Github 上的 angular-phonecat repository ：

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

这条命令在你的当前目录下创建了 angular-phonecat 项目。

--depth=14 选项告知Git仅下载最新的14次commits，这会让下载的文件更少，速度也就相应提高了。

切换到 angular-phonecat 的目录下。

cd angular-phonecat

确保在接下来的操作中，你都是在目录 angular-phonecat 下。

Node.js的官网下载地址如下： http://nodejs.org/download/ 。
检查你所安装的 Node.js 版本：

node --version

在 Debian 系统中，node 会有命名冲突。建议安装 nodejs-legacy 。

apt-get install nodejs-legacy npm 
nodejs --version
npm --version

如果你想在本地环境中运行多个版本的 node.js, 你可以安装 Node Version Manager (nvm) 。

安装完 Node.js 后，就可以下载依赖包了：

npm install

这条命令会下载以下几个工具包到 node_modules 文件夹下：

执行 npm install 语句会自动使用 bower 来下载Angular框架到 app/bower_components 文件夹下。
项目已经预先定义好了许多npm脚本用来执行一些在开发中通用的功能：

安装bower工具

sudo npm install -g bower

在windows系统中，请忽略 sudo
运行bower工具：

bower install

由于Angular应用是运行在客户端的应用，所以我们可以直接在文件系统中将网页打开，但还是在web server中打开比较好，尤其，出于安全的考虑，大多数的浏览器不会允许Javascript请求运行在文件系统中。
运行phonecat项目的命令如下：

npm start

这样，在你本地的机器上，服务器开始监听8000端口。你可以在浏览器中输入如下网址便可以访问了：

http://localhost:8000/app/index.html

想要让应用运行在其他ip地址或是端口，可以修改在package.json中的”start”脚本，你可以使用 -a 来设置ip地址，使用 -p 来设置端口。

在实际开发过程中，我们经常使用单元测试来验证我们的JS代码运行是否正确。单元测试专注于测试分离出来的小模块。在本项目中，所有的单元测试均在 test/unit 目录下。

本项目使用 Karma 来运行单元测试：

npm test

Karma 会读取 test/karma.conf.js 中的配置信息，配置信息中包括：

最好在后台一直运行Karma，这样在你进行代码修改的时候，就能马上得到测试的反馈。