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

相关文章
|
3月前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
47 0
|
3月前
|
开发者 前端开发 开发框架
JSF与移动应用,开启全新交互体验!让你的Web应用轻松征服移动设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,移动设备的普及使得构建移动友好的应用变得至关重要。尽管JSF(JavaServer Faces)主要用于Web应用开发,但结合Bootstrap等前端框架,也能实现优秀的移动交互体验。本文探讨如何在JSF应用中实现移动友好性,并通过示例代码展示具体实现方法。使用Bootstrap的响应式布局和组件可以确保JSF页面在移动设备上自适应,并提供友好的表单输入和提交体验。尽管JSF存在组件库较小和学习成本较高等局限性,但合理利用其特性仍能显著提升用户体验。通过不断学习和实践,开发者可以更好地掌握JSF应用的移动友好性,为Web应用开发贡献力量。
48 0
|
前端开发 测试技术 C++
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)
333 0
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)
|
前端开发 JavaScript
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
457 0
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
|
前端开发 JavaScript
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
Angular模板简介
模板引擎是Web应用中用来生成动态HTML的一个途径, 负责将数据模型与HTML模板结合起来(即模板渲染),生成最终的HTML。 编写HTML模板的语法称为模板语法,模板语法的表达能力和可扩展性决定了模板引擎的易用性。本文将介绍在重构管理控制台中使用到的Angular的模板引擎ng-template。
187 0
|
.NET 程序员 C#
52abp框架asp.net core & Angular全栈开发实战视频课程
课程标题 52abp框架asp.net core & Angular全栈开发实战视频课程 课程简介 从零开始学 52ABP企业开发框架,企业项目是如何开发和技术选型,代码如何管理,团队协同开发。
3094 0
|
前端开发
angular+h5聊天室|聊天实战angular版
最近一直在学习angular,毕竟ng在前端开发中有很庞大的用户量,值得尝试一下,几天学习下来,发现并没有想象的难,如是就利用angular全家桶技术开发了个angular-chatroom仿微信聊天室项目。
2232 0
|
Web App开发 前端开发 .NET
【Web API系列教程】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(上)
前言 在传统的web应用程序中,客户端(浏览器)通过请求页面来启动与服务器的通信。然后服务器处理该请求,并发送HTML页面到客户端。
1044 0