本节书摘来自华章出版社《AngularJS实战》一 书中的第1章,第1.1节,作者:陶国荣,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
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的官方网站中下载最新版本的Angular文件库,该网站的页面如图1-1所示。
在Angular官网中,单击“Download”(下载)按钮,选择最新版本的Zip压缩文件包到本地,目前(截止到2014年4月)最新版为1.2.16,本书的全部案例都是基于此版本基础之上开发的。
2.?引入Angular文件库
当下载完最新版本的Angular压缩包后,不需要任何的安装,只需要将其中的angular.js文件通过使用
<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之旅了。