AngularJs 整体架构简介
AngularJS 是一个开源的 Web 应用程序框架。它最初由 Misko Hevery 和 Adam Abrons 于 2009 年开发。现在由谷歌维护。截止目前它的最新的稳定版本是 v12.2.3
AngularJS 的官方定义如下
AngularJS 是动态 Web 应用程序的结构框架。它允许你使用 HTML 作为模板语言,并允许你对HTML 的语法进行扩展,从而清晰简洁地表达你的应用程序组件。它的数据绑定和依赖注入消除了当前必须编写的大部分代码。这一切都发生在浏览器中,这些足以使其成为任何服务器技术的理想合作伙伴。
AngularJs 特性
AngularJS 的一般特性如下
- AngularJS 是一个高效的框架,可以创建丰富的 Internet 应用程序 (RIA)。
- AngularJS 为开发人员提供了一个选项,可以以干净的模型视图控制器 (MVC) 方式使用 JavaScript 编写客户端应用程序。
- 用 AngularJS 编写的应用程序是跨浏览器兼容的。AngularJS 会自动处理JavaScript代码,使其兼容每个浏览器。
- AngularJS 是开源的,完全免费的,全世界成千上万的开发人员在使用它。它在 Apache 许可版本 2.0 下获得许可。
总的来说,AngularJS 是一个构建大规模、高性能和易于维护的 Web 应用程序的框架。
AngularJs 核心功能
AngularJS 的核心特性如下
- 数据绑定- 它自动同步模型和视图组件之间数据。
- Scope(范围)- 这些是引用模型的对象。它们充当控制器和视图之间的粘合剂。
- 控制器- 是绑定到特定范围的 JavaScript 函数。
- 服务- AngularJS 带有几个内置服务,例如 $http 来创建 XMLHttpRequests。这些是在应用程序中仅实例化一次的单例对象。
- 过滤器- 这些从数组中选择项目的子集并返回一个新数组。
- 指令- 指令是 DOM 元素上的标记,例如元素、属性、css 等。这些可用于创建用作新的自定义小部件的自定义 HTML 标记。AngularJS 具有内置指令,例如 ngBind、ngModel 等。
- 模板- 这些是带有来自控制器和模型的信息的渲染视图。这些可以是单个文件(例如 index.html)或使用partials在一个页面中的多个视图。
- 路由- 这是切换视图的概念。
- Model View Whatever- MVW 是一种设计模式,用于将应用程序划分为不同的部分,称为模型、视图和控制器,每个部分都有不同的职责。AngularJS 并没有实现传统意义上的 MVC,而是更接近于 MVVM(Model-View-ViewModel)。Angular JS 团队将其幽默地称为 Model View Every。
- 深度链接- 深度链接允许对 URL 中的应用程序状态进行编码,以便可以将其添加为书签。然后可以将应用程序从 URL 恢复到相同的状态。
- 依赖注入- AngularJS 有一个内置的依赖注入子系统,可以帮助开发人员轻松创建、理解和测试应用程序。
下图描绘了 AngularJS 的一些重要部分,对于其中的每一部分我们会在后续章节中进行介绍。
下面我们先看两个示例
示例1 AngularJs 指令
正如您所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。
<div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>
HTML5 允许扩展的(自制的)属性,以 data- 开头。AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。
示例2 AngularJs 表达式
AngularJS 表达式写在双大括号内:{{ expression }}。
AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 的优势
AngularJS 的优点是
- AngularJs 提供了以非常干净和可维护的方式创建单页应用程序的能力。
- AngularJs 为 HTML 提供数据绑定功能。因此,它为用户提供了丰富且响应迅速的体验。
- AngularJS 代码是可单元测试的。
- AngularJS 使用依赖注入并利用关注点分离。
- AngularJS 提供了可重用的组件。
- 使用 AngularJS,开发人员可以用很短的代码实现更多功能。
- 在 AngularJS 中,视图是纯 html 页面,由 JavaScript 编写的控制器进行业务处理。
最重要的是,AngularJS 应用程序可以在所有主流浏览器和智能手机上运行,包括基于 Android 和 iOS 的手机/平板电脑。
AngularJS 的缺点
虽然 AngularJS 有很多优点,但这里有一些不足的地方需要我们关注
- 不安全的 - 作为Javascript的唯一的框架,使用AngularJs是不安全的。服务器端身份验证和授权是确保应用程序安全所必需的。
- Not degradable - 如果您的应用程序的用户禁用了 JavaScript,那么除了基本页面之外,什么都看不到。
AngularJS 指令
AngularJS 框架的指令集可以分为三个主要部分
- ng-app - 该指令定义 AngularJS 应用程序并将其链接到 HTML。
- ng-model - 该指令将 AngularJS 应用程序数据的值绑定到 HTML 输入控件。
- ng-bind - 该指令将 AngularJS 应用程序数据绑定到 HTML 标签。