第1章 初识Angular

Angular是Google公司提供的一套开源的项目框架，准确地说，是一套基于MVC结构的JavaScript开发工具，该工具的核心功能就是对现有HTML编码以指令方式进行扩展，并使扩展后的HTML编码可以通过使用元素声明的方式来构建动态内容。因此，这样的扩展具有划时代的意义，这也是Angular框架自诞生起就备受关注的重要原因。

本章将从Angular最基础的概念讲起，并结合几个简单经典的小示例，快速带领大家进入Angular所构建的“神奇”世界中。

1.1 Angular简介

从开始的概述中我们知道，Angular是基于HTML基础进行扩展的开发工具，其扩展的目的就是希望能通过HTML标签构建动态的Web应用。要实现这样的目的，需要在Angular内部利用了两项技术点，一个是数据的双向绑定，另一个是依赖注入。下面我们来简单介绍这两个新概念。

在Angular中，数据绑定可以通过{{}}双花括号的方式向页面的DOM元素中插入数据，也可以通过添加元素属性的方式绑定Angular的内部指令，实现对元素的数据绑定，这两种形式的数据绑定都是双向同步的，即只要一端发生了变化，绑定的另一端会自动进行同步。

依赖注入是Angular中一个特有的代码编写方式，其核心思想是在编写代码时，只需要关注为实现页面功能要调用的对象是什么，而不必了解它需依赖于什么，像逻辑类中的$scope对象就是通过依赖注入的方式进行使用的。

这两项技术点，我们将在后续的章节中进行详细介绍，在此只作概念了解即可。

在Angular框架中，通过双向绑定和依赖注入这两个功能，极大减少了用户的代码开发量，只需要像声明一个HTML元素一样，就可以轻松构建一个复杂的Web端应用，而这种方式构建的应用的全部代码都由客户端的JavaScript代码完成。因此，Angular框架也是有效解决端（客户端）对端（服务端）应用的方案之一。

1.1.1 特点

Angular是在原有的HTML语法基础之上进行扩展的。因此，要学习Angular框架，首先需要了解它扩展后的基本语法特点。概括起来，包括以下几个部分。

❑使用双大括号{{}}语法对动态获取的数据进行绑定。这种绑定是一种双向的绑定，即如果客户端发生了变化，绑定的服务器端数据也会更新。同样，如果服务器端发生了变化，被绑定的客户端数据同样也会随之变更。

❑能将HTML元素代码通过分合的方式组成可重用的组件。这一功能可以将HTML页面中的某块代码作为模块在多处重复使用。通过这种方式可以增加代码的重复使用，减少代码的开发量，提高开发效率。

❑支持表单和表单的验证功能。表单元素在HTML页面中占有重要的地位，而Angular框架可以很好地支持该元素，包括它的数据验证功能，这为开发人员提供了很大的方便。

❑能使用逻辑代码与DOM元素相关联。通过逻辑代码的结果控制DOM元素片段的隐藏或显示，这样可以避免在逻辑代码中编写大量的HTML元素代码，大大提高JavaScript代码的执行效率。

1.1.2 适用范围

由于Angular是构建一个MVC类结构的JavaScript库，是一个开源的代码类库，因此，为了更好体现它的最大优势，笔者建议在构建一个CRUD（增加Create、查询Retrieve、更新Update、删除Delete）应用时使用它，而对于那些图形编辑、游戏开发等应用，使用Angular就不如调用其他JavaScript类库方便，如jQuery。

1.1.3 搭建开发Angular应用的环境

1.下载Angular文件框架库

在Angular的官方网站（http://angularjs.org/）中下载最新版本的Angular文件库，该网站的页面如图1-1所示。

在Angular官网中，单击“Download”（下载）按钮，选择最新版本的Zip压缩文件包到本地，目前（截止到2014年4月）最新版为1.2.16，本书的全部案例都是基于此版本基础之上开发的。

2.引入Angular文件库

当下载完最新版本的Angular压缩包后，不需要任何的安装，只需要将其中的angular.js文件通过使用＜script＞标记导入到页面中即可。假设该文件下载后保存在项目的Script文件夹中，那么，只需要在页面的＜head＞＜/head＞元素中加入如下的代码。

    ＜script src="../Script/angular.min.js" type="text/javascript"＞＜/script＞

通过加入上述代码便完成了Angular框架的引入，这种方式是对下载后的本地框架库的引入。还可以直接通过＜script＞元素调用CDN中的Angular框架文件，CDN地址为：https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js，因此，将加入＜head＞＜/head＞元素中的代码修改为：

    ＜script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.
js" type="text/javascript"＞＜/script＞

这两种方式都可以实现Angular框架文件引入页面的功能。在完成框架文件的引入之后，就可以开启“神奇”的Angular之旅了。

1.2 开发简单的Angular应用

首先，我们来编写一个简单的Angular应用，参见下列的示例。

示例1-1 编写一个简单的Angular程序

（1）功能描述

当页面加载时，在页面的正文部分显示“Hello，欢迎来到angular世界！”的字样。

（2）实现代码

新建一个HTML文件1-1.html，加入如代码清单1-1所示的代码。

代码清单1-1 第一个简单的Angular程序

    ＜!doctype html＞
    ＜html ng-app＞
    ＜head＞
        ＜title＞第一个简单的angular程序＜/title＞
        ＜script src="../Script/angular.min.js"
                 type="text/javascript"＞＜/script＞
    ＜/head＞
    ＜body＞
        {{'Hello，欢迎来到angular世界！'}}
    ＜/body＞
    ＜/html＞

（3）页面效果

HTML文件1-1.html最终实现的页面效果如图1-2所示。

（4）源码分析

在本示例的代码中，我们先在＜html＞元素中增加了一个“ng-app”属性，这一属性的功能是通知引入的Angular文件框架，页面中的哪个部分开始接受它的管理。既然是在＜html＞元素中增加这个属性，表明Angular可以管理整个页面文件，“ng-app”属性还可以添加至某个＜div＞元素中，表明仅在这个＜div＞范围内，可以调用Angular框架管理其中包含的DOM元素。

此外，在页面的＜body＞元素中，使用两个大括号的方式包含了一个字符串，其中两个大括号是Angular框架插入动态数据的一种方式，我们称之为“双花括号插值语法”。在通常情况下，通过这种方式插入的数据均为表达式，并且在插入时已获取了表达式的结果值，并直接将该值显示在页面中。在本实例中，由于表达式是字符串内容，因此，直接显示在页面中。

接下来，我们再来看一个Angular示例，进一步了解Angular数据插入功能。

示例1-2 编写一个具有计算功能的Angular程序

（1）功能描述

当页面加载时，在页面的正文部分通过插入数据的方式计算任意一对数值的和，并将计算后的结果显示在页面中。

（2）实现代码

新建一个HTML文件1-2.html，加入如代码清单1-2所示的代码。

代码清单1-2 一个计算功能的Angular程序

    ＜!doctype html＞
    ＜html ng-app＞
    ＜head＞
        ＜title＞一个计算功能的angular程序＜/title＞
        ＜script src="../Script/angular.min.js"
                 type="text/javascript"＞＜/script＞
    ＜/head＞
    ＜body＞
        ＜h3＞计算并显示下列两个数值的和＜/h3＞
        1.98 + 2.98 = {{ 1.98 + 2.98 | number:0}}
    ＜/body＞
    ＜/html＞

（3）页面效果

HTML文件1-1.html最终实现的页面效果如图1-3所示。

（4）源码分析

在本示例的代码中，除了在＜html＞元素中添加“ng-app”属性，表明整个页面代码都由Angular框架进行管理外，在使用双花括号插入数值时，先通过加号“+”运算符计算出两个数值的结果并返回给页面，然后，在计算数值时使用了一个“|”管道符号，这个符号在Angular中表示调用过滤器格式化数据，它的调用方法如下。

    {{exp | filtername : para1:...paraN}}

在上述调用方法中，exp表示Angular可以识别的任意表达式，f iltername表示过滤器的名称。

Angular内置了很多的过滤器，如currency、date、number和uppercase等，para1表示对过滤器功能的进一步描述，如示例中的“number:0”表示除掉小数后的数值，保留整数部分。当然，除使用Angular内置的过滤器外，还可以自定义自己的过滤器，具体实现的方式将会在后续的章节中进行详细的介绍。

通过上述两个示例的介绍，相信大家已经被Angular的语法所吸引，更被它“神奇”的数据插入功能所折服。上述两个示例都采用以双花括号插入表达式的形式，将数据添加至页面的模板中，如果将表达式的数据与页面中的元素直接进行绑定，又会发生什么样的事情呢？接下来，我们再来看一个简单的示例。

示例1-3 编写一个绑定页面元素的Angular程序

（1）功能描述

在页面中，先添加一个用于文本输入的＜input＞元素，并通过Angular指令绑定一个表达式，然后，再添加一个＜div＞元素，通过Angular中的双花括号插入相同的表达式，当文本输入框中的内容变化时，＜div＞元素插入的内容也随之发生变化。

（2）实现代码

新建一个HTML文件1-3.html，加入如代码清单1-3所示的代码。

代码清单1-3 一个绑定页面元素的Angular程序

    ＜!doctype html＞
    ＜html ng-app＞
    ＜head＞
        ＜title＞一个绑定页面元素的angular程序＜/title＞
        ＜script src="../Script/angular.min.js"
                 type="text/javascript"＞＜/script＞
    ＜/head＞
    ＜body＞
        ＜h3＞请在下列文本框中输入任意内容＜/h3＞
        ＜div ng-controller="usercontroller"＞
            ＜input id="Text1" type="text" ng-model="user.name" /＞
            ＜div＞{{user.name}}＜/div＞
        ＜/div＞
        ＜script type="text/javascript"＞
            function usercontroller($scope) {
                  $scope.user = { name: "" };
            }
        ＜/script＞
    ＜/body＞
    ＜/html＞

（3）页面效果

HTML文件1-3.html最终实现的页面效果如图1-4所示。

（4）源码分析

在本示例的源代码中，在＜html＞元素中添加了“ng-app”属性，表明Angular可以管理整个页面。此外，向＜div＞元素添加了一个名为“ng-controller”的属性，该属性是Angular的另外一个指令，用来声明Angular中控制器类的名称，并且这个被声明的类将管理＜div＞中的全部元素。

接下来，再向文本框元素添加一个“ng-model”属性，绑定逻辑层中的user.name数据，并同时通过双花括号向页面中的另外一个＜div＞元素插入相同的user.name内容。在Angular中，使用“ng-model”方式绑定数据是双向变化的，即如果数据源发生了变化，被绑定的元素中的内容也将会自动进行同步变化，反之，数据源也会随被绑定的元素值的变化而变化。

因此，当用户在文本框中输入任意内容时，改变了绑定的数据源，而其他插入的相同数据源也将随之进行同步，页面插入的user.name内容也将跟随变化，而实现这一切，都无需注册任何文本框的change事件去监听，就可以让页面中的元素绑定的数据自动刷新。

这一特征也同样适用于服务器端的更新，即当我们向服务器请求一个数据时获取了最新的user.name值，而在页面中绑定的输入框内容和插入显示的数据也将会同时自动更新为最新值。

除此之外，Angular还可以通过数据绑定的方式，将重复格式的多项数据内容显示在页面各个元素中，接下来我们再通过一个简单的示例来进行说明。

示例1-4 编写一个绑定多个页面元素的Angular程序

（1）功能描述

在页面中，通过Angular中的数据元素绑定的方式，将一个数组集合中的各项元素与页面中的多个＜span＞元素绑定，并通过遍历的方式将全部数据插入至页面的模板中。

（2）实现代码

新建一个HTML文件1-4.html，加入如代码清单1-4所示的代码。

代码清单1-4 一个绑定多个页面元素的Angular程序

    ＜!doctype html＞
    ＜html ng-app＞
    ＜head＞
        ＜title＞一个绑定多个页面元素的angular程序＜/title＞
    ＜script src="../Script/angular.min.js"
             type="text/javascript"＞＜/script＞
＜/head＞
＜body＞
    ＜h3＞以列表的方式显示绑定的多项数据＜/h3＞
    ＜div ng-controller="stucontroller"＞
      ＜ul＞
          ＜li ng-repeat="stu in data"＞
                ＜span＞{{stu.name}}＜/span＞
                ＜span＞{{stu.sex}}＜/span＞
                ＜span＞{{stu.age}}＜/span＞
                ＜span＞{{stu.score}}＜/span＞
          ＜/li＞
      ＜/ul＞
    ＜div＞
    ＜script type="text/javascript"＞
        function stucontroller($scope) {
            $scope.data = [
            { name: "张明明"，sex: "女"，age: 24，score: 95 }，
            { name: "李清思"，sex: "女"，age: 27，score: 87 }，
            { name: "刘小华"，sex: "男"，age: 28，score: 86 }，
            { name: "陈忠忠"，sex: "男"，age: 23，score: 97 }
            ];
        }
    ＜/script＞
＜/body＞
＜/html＞

（3）页面效果

HTML文件1-4.html最终实现的页面效果如图1-5所示。

（4）源码分析

在本示例的源代码中，除在＜li＞元素中声明的控制器管理类“stucontroller”之外，还在＜li＞元素中添加了一个名为“ng-repeat”的属性，该属性是Angular的一个新指令，表示复制的意思，即对于“data”数组中的每个元素，都会将＜li＞元素中的结构复制一次，在每次复制使用时，再将“stu”的属性值赋予复制的＜li＞中各个元素。因此，“data”数组中的数量与复制后的＜li＞元素的数量是一致的，并且在每次复制成功之后，都将数组中的各个元素内容通过双花括号的方式插入到＜li＞元素中，从而实现了在＜li＞元素中显示全部“data”数组内容的功能。

而当“data”数组中的源数据发生变化后，使用双花括号绑定的数据内容也将会随之发生变化，而这些变化，在Angular中都是自动完成的，无须注册任何监测的事件。

1.3 本章小结

在本章中，我们通过一个个简单示例，由浅入深地介绍Angular应用开发的过程，相信通过本章的学习，读者会对Angular代码的风格有一个初步的了解，但Angular毕竟是一种全新的语言，需要学习者学习许多新的概念，我们将在接下来的章节中继续介绍Angular的更多基础知识。