【转载】图灵AngularJS入门教程

现在的位置: 首页 > 综合 > 正文

RSS

【转载】图灵AngularJS入门教程

2013年08月07日 ⁄ 综合 ⁄ 共 6092字 ⁄ 字号小中大 ⁄ 评论关闭

摘自图灵的AngularJS入门教程：http://www.ituring.com.cn/article/13471

感觉非常不错，所以推荐到首页一下！

（一）Hello World!

开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”：

使用您喜爱的文本编辑器，创建一个HTML文件，例如：helloworld.html。
将下面的源代码复制到您的HTML文件。
在web浏览器中打开这个HTML文件。

源代码

<!doctype html><html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Hello {{'World'}}!
    </body></html>

请在您的浏览器中运行以上代码查看效果。

现在让我们仔细看看代码，看看到底怎么回事。当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用：

<html ng-app>

这行载入AngularJS脚本：

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

（想了解AngularJS处理整个HTML页的细节，请看Bootstrap。）

最后，标签中的正文是应用的模板，在UI中显示我们的问候语：

Hello {{'World'}}!

注意，使用双大括号标记{{}}的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World’。

下面，让我们看一个更有趣的例子：使用AngularJS对我们的问候语文本绑定一个动态表达式。

Hello AngularJS World!

本示例演示AngularJS的双向数据绑定（bi-directional data binding）：

编辑前面创建的helloworld.html文档。
将下面的源代码复制到您的HTML文件。
刷新浏览器窗口。

源代码

<!doctype html><html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
        Hello {{yourname || 'World'}}!
    </body></html>

请在您的浏览器中运行以上代码查看效果。

该示例有一下几点重要的注意事项：

文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。
双大括号标记将yourname模型变量添加到问候语文本。
你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！

现在试着在输入框中键入您的名称，您键入的名称将立即更新显示在问候语中。这就是AngularJS双向数据绑定的概念。输入框的任何更改会立即反映到模型变量（一个方向），模型变量的任何更改都会立即反映到问候语文本中（另一方向）。

AngularJS应用的解析

本节描述AngularJS应用程序的三个组成部分，并解释它们如何映射到模型-视图-控制器设计模式：

模板（Templates）

模板是您用HTML和CSS编写的文件，展现应用的视图。您可给HTML添加新的元素、属性标记，作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的，这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记！

应用程序逻辑（Logic）和行为（Behavior）

应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同，您不需要另外编写侦听器或DOM控制器，因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。

模型数据（Data）

模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS作用域对象。

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。

此外，AngularJS还提供了一些非常有用的服务特性：

底层服务包括依赖注入，XHR、缓存、URL路由和浏览器抽象服务。
您还可以扩展和添加自己特定的应用服务。
这些服务可以让您非常方便的编写WEB应用。

（二）搭建学习环境

无论是Mac、Linux或Windows环境中，您均可遵循本教程学习编程。您可以使用源代码管理版本控制系统Git获取本教程项目的源代码文件，或直接从网上下载本教程项目源代码文件的镜像归档压缩包。

您需要安装Node.js和Testacular来运行本项目，请到Node.js官方网站下载并安装最新版，然后把node可执行程序路径添加到系统环境变量PATH中，完成后在命令行中运行一下命令可以查看是否安装成功：
```
node -version
```
然后安装Testacular单元测试程序，请运行如下命令：
```
npm install -g testacular
```
安装Git工具，然后用以下命令从Github复制本教程项目的源代码文件：
```
git clone git://github.com/angular/angular-phonecat.git
```
您也可以直接从网上下载本教程项目源代码的镜像归档压缩包。这个命令会在您当前文件夹中建立新文件夹angular-phonecat。
最后一件事要做的就是确保您的计算机安装了web浏览器和文本编辑器。
进入教程源代码文件包angular-phonecat，运行服务器后台程序，开始学习AngularJS！
```
cd angular-phonecat
node scripts/web-server.js
```

（三）引导程序

我们现在开始准备编写AngularJS应用——phonecat。这一步骤（步骤0），您将会熟悉重要的源代码文件，学习启动包含AngularJS种子项目的开发环境，并在浏览器端运行应用。

进入angular-phonecat目录，运行如下命令：
```
git checkout -f step-0
```
该命令将重置phonecat项目的工作目录，建议您在每一学习步骤运行此命令，将命令中的数字改成您学习步骤对应的数字，该命令将清除您在工作目录内做的任何更改。
运行以下命令：
```
node scripts/web-server.js
```
来启动服务器，启动后命令行终端将会提示Http Server running at http://localhost:8000,请不要关闭该终端，关闭该终端即关闭了服务器。在浏览器中输入http://localhost:8000/app/index.html来访问我们的phonecat应用。

现在，在浏览器中您应该已经看到了我们的初始应用，很简单，但说明我们的项目已经可以运行了。

应用中显示的“Nothing here yet!”是由如下HTML代码构建而成，代码中包含了AngularJS的关键元素，正是我们需要学习的。

app/index.html

<!doctype html><html lang="en" ng-app><head>
    <meta charset="utf-8">
    <title>My HTML File</title>
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="lib/angular/angular.js"></script></head><body><p>Nothing here {{'yet' + '!'}}</p></body></html>

代码在做什么呢？

`ng-app`指令：

<html lang="en" ng-app>

ng-app指令标记了AngularJS脚本的作用域，在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令，如<div ng-app>，则AngularJS脚本仅在该<div>中运行。

AngularJS脚本标签：

<script src="lib/angular/angular.js"></script>

这行代码载入angular.js脚本，当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本，angular.js脚本运行后将会寻找含有ng-app指令的HTML标签，该标签即定义了AngularJS应用的作用域。

双大括号绑定的表达式：

<p>Nothing here {{'yet' + '!'}}</p>

这行代码演示了AngularJS模板的核心功能——绑定，这个绑定由双大括号{{}}和表达式'yet' + '!'组成。

这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中，接下来的步骤我们将看到，DOM可以随着表达式运算结果的改变而实时更新。

AngularJS表达式Angular expression是一种类似于JavaScript的代码片段，AngularJS表达式仅在AngularJS的作用域中运行，而不是在整个DOM中运行。

引导AngularJS应用

通过ngApp指令来自动引导AngularJS应用是一种简洁的方式，适合大多数情况。在高级开发中，例如使用脚本装载应用，您也可以使用bootstrap手动引导AngularJS应用。

AngularJS应用引导过程有3个重要点：

注入器(injector)将用于创建此应用程序的依赖注入(dependency injection)；
注入器将会创建根作用域作为我们应用模型的范围；
AngularJS将会链接根作用域中的DOM，从用ngApp标记的HTML标签开始，逐步处理DOM中指令和绑定。

一旦AngularJS应用引导完毕，它将继续侦听浏览器的HTML触发事件，如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。这类事件一旦发生，AngularJS将会自动检测变化，并作出相应的处理及更新。

上面这个应用的结构非常简单。该模板包仅含一个指令和一个静态绑定，其中的模型也是空的。下一步我们尝试稍复杂的应用！

我工作目录中这些文件是干什么的？

上面的应用来自于AngularJS种子项目，我们通常可以使用AngularJS种子项目来创建新项目。种子项目包括最新的AngularJS代码库、测试库、脚本和一个简单的应用程序示例，它包含了开发一个典型的web应用程序所需的基本配置。

对于本教程，我们对AngularJS种子项目进行了下列更改：

删除示例应用程序；
添加手机图像到app/img/phones/；
添加手机数据文件(JSON)到app/phones/；
添加Twitter Bootstrap文件到app/css/ 和app/img/。

练习

试试把关于数学运算的新表达式添加到index.html：

<p>1 + 2 = {{ 1 + 2 }}</p>

总结

现在让我们转到步骤1，将一些内容添加到web应用程序。

（四）静态模板

为了说明angularJS如何增强了标准HTML，我们先将创建一个静态HTML页面模板，然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板。

在本步骤中，我们往HTML页面中添加两个手机的基本信息，用以下命令将工作目录重置到步骤1。

git checkout -f step-1

请编辑app/index.html文件，将下面的代码添加到index.html文件中，然后运行该应用查看效果。

app/index.html

<ul>
    <li>
        <span>Nexus S</span>
        <p>
        Fast just got faster with Nexus S.
        </p>
    </li>
    <li>
        <span>Motorola XOOM™ with Wi-Fi</span>
        <p>
        The Next, Next Generation tablet.
        </p>
    </li></ul>

练习

尝试添加多个静态HTML代码到index.html，例如：

<p>Total number of phones: 2</p>

总结

本步骤往应用中添加了静态HTML手机列表，现在让我们转到步骤2以了解如何使用AngularJS动态生成相同的列表。

（五）AngularJS模板

是时候给这些网页来点动态特性了——用AngularJS！我们这里为后面要加入的控制器添加了一个测试。

一个应用的代码架构有很多种。对于AngularJS应用，我们鼓励使用模型-视图-控制器（MVC）模式解耦代码和分离关注点。考虑到这一点，我们用AngularJS来为我们的应用添加一些模型、视图和控制器。

请重置工作目录：

git checkout -f step-2

我们的应用现在有了一个包含三部手机的列表。

步骤1和步骤2之间最重要的不同在下面列出。，你可以到GitHub去看完整的差别。

视图和模板

在AngularJS中，一个视图是模型通过HTML**模板**渲染之后的映射。这意味着，不论模型什么时候发生变化，AngularJS会实时更新结合点，随之更新视图。

比如，视图组件被AngularJS用下面这个模板构建出来：

<html ng-app><head>
  ...
  <script src="lib/angular/angular.js"></script>
  <script src="js/controllers.js"></script></head><body ng-controller="PhoneListCtrl">

  <ul>
    <li ng-repeat="phone in phones">
      {{phone.name}}
    <p>{{phone.snippet}}</p>
    </li>
  </ul></body></html>

我们刚刚把静态编码的手机列表替换掉了，因为这里我们使用ngRepeat指令和两个用花括号包裹起来的AngularJS表达式——{{phone.name}}和{{phone.snippet}}——能达到同样的效果。

在<li>标签里面的ng-repeat="phone in phones"语句是一个AngularJS迭代器。这个迭代器告诉AngularJS用第一个<li>标签作为模板为列表中的每一部手机创建一个<li>元素。
正如我们在第0步时学到的，包裹在phone.name和phone.snippet周围的花括号标识着数据绑定。和常量计算不同的是，这里的表达式实际上是我们应用的一个数据模型引用，这些我们在PhoneListCtrl控制器里面都设置好了。

模型和控制器

【上篇】AndroidManifest.xml文件详解（provider）
【下篇】AJAX+JSON 总结（一）

作者: feral

该日志由 feral 于11年前发表在综合分类下，最后更新于 2013年08月07日.
转载请注明: 【转载】图灵AngularJS入门教程 | 学步园 +复制链接

抱歉!评论已关闭.

返回首页

（其他合作也可洽谈）

必威体育

必威电竞

学步园