《AngularJS实战》——1.1 Angular简介

简介:

本节书摘来自华章出版社《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,本书的全部案例都是基于此版本基础之上开发的。

ef96c7123c252ece0c0a06c4f2cdb55326e90736

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之旅了。

相关文章
|
6月前
|
开发者
Angular Schematics 实战 - 项目根目录新建一个文件
Angular Schematics 实战 - 项目根目录新建一个文件
30 0
|
前端开发 测试技术 C++
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)
282 0
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)
|
前端开发 JavaScript
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
395 0
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
|
前端开发 JavaScript
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
Angular模板简介
模板引擎是Web应用中用来生成动态HTML的一个途径, 负责将数据模型与HTML模板结合起来(即模板渲染),生成最终的HTML。 编写HTML模板的语法称为模板语法,模板语法的表达能力和可扩展性决定了模板引擎的易用性。本文将介绍在重构管理控制台中使用到的Angular的模板引擎ng-template。
157 0
|
JavaScript 前端开发
AngularJs Angular数据类型判断
angular.isArray 判断括号内的值是否为数组。 格式:angular.isArray(value); value: 被判断是否为数组的值。 --------------------------------------------------------------- angular.isDate 判断括号内的值是否是一个时间。
|
缓存 JavaScript 前端开发
Angular Universal:Angular 统一平台简介
Angular Universal:Angular 统一平台简介
177 0
Angular Universal:Angular 统一平台简介
|
缓存 JavaScript 前端开发
Angular Universal:Angular 统一平台简介
Angular Universal:Angular 统一平台简介
134 0
Angular Universal:Angular 统一平台简介
|
前端开发
angular+h5聊天室|聊天实战angular版
最近一直在学习angular,毕竟ng在前端开发中有很庞大的用户量,值得尝试一下,几天学习下来,发现并没有想象的难,如是就利用angular全家桶技术开发了个angular-chatroom仿微信聊天室项目。
2172 0