什么是 AngularJS？ Archi结构、特点和优势
詹姆斯·哈特曼
⚡ 智能摘要
本文为初学者介绍了 AngularJS 的架构和特性，涵盖了模型-视图-任意设计、双向数据绑定、指令、可运行的第一个应用程序，以及每个团队都应该了解的 2021 年 12 月长期支持结束等内容。
什么是 AngularJS？
AngularJS 是一个用编程语言编写的开源模型-视图-控制器（MVC）框架。 JavaScriptAngularJS是2010年代最流行的Web框架之一，它被用于开发。ping 主要为单页应用程序。该框架由一群开发人员开发。 Google 本身。
由于各方的大力支持 Google 该框架汲取了广泛的社区论坛的意见，并在其活跃生命周期内不断更新。它还融合了当时的领先开发趋势，这也是为什么如今仍有大量生产代码运行在其上的原因。
⚠️ 重要提示：AngularJS 已停止维护。 Google 2018 年 7 月 1 日，微软将 AngularJS 1.x 纳入为期三年的长期支持计划，并因 COVID-19 疫情将其延长了六个月。该支持计划于 [日期缺失] 结束。 31 December 2021 1.8.3 版本是最终版本， Google 不再发布任何错误修复或安全补丁。学习 AngularJS 以维护现有系统，并选择现代化的方案。 角度方向 任何新鲜事物。
有一点术语值得尽早明确。AngularJS 通常被描述为 MVC 框架，这是一个很好的起点。然而，AngularJS 团队本身更倾向于使用“AngularJS”这个标签。 MVW（模型-视图-其他）因为运行时的行为更接近于模型-视图-视图模型（MVV），而不是传统的MVC模式。 AngularJS 文档 我们称之为动态 Web 应用程序的结构框架。既然如此，接下来我们将介绍各个部分是如何组合在一起的。
AngularJS Archi质地
AngularJS 遵循 MVC 架构。MVC 框架的结构图如下所示：
AngularJS Archi结构图
这三层结构各司其职：
- 控制器代表具有业务逻辑的层。用户事件触发存储在控制器中的功能。用户事件是控制器的一部分。
- 视图用于表示提供给最终用户的呈现层。
- 模型用于表示您的数据。模型中的数据可以简单到只有原始声明。例如，如果您正在维护一个学生应用程序，您的数据模型可能只有学生 ID 和姓名。或者它也可以通过结构化数据模型而变得复杂。如果您正在维护一个汽车所有权应用程序，您可以使用结构来定义车辆本身，包括其发动机容量、座位容量等。
实际上，控制器很少手动将数据推送到视图。AngularJS 会监视模型并自动刷新视图，这种自动同步功能由接下来介绍的特性集提供支持。
AngularJS 的功能
AngularJS 具有以下关键特性，使其成为市场上功能最强大的框架之一：
- MVC – 该框架建立在著名的概念之上 MVC（模型视图控制器）。这是所有现代 Web 应用程序中使用的设计模式。此模式基于将业务逻辑层、数据层和表示层拆分为不同的部分。划分为不同的部分是为了更轻松地管理每个部分。
- 数据模型绑定 您无需编写特殊代码将数据绑定到 HTML 控件。AngularJS 只需添加几段代码即可完成此操作。
- 编写更少的代码 – 在执行 DOM 操作时，很多 JavaScript 过去，设计任何应用程序都需要编写代码。但使用 AngularJS，您会惊讶于 DOM 操作所需的代码量如此之少。
- 单位 测试与验证 准备就绪——设计师们 Google 不仅开发了 AngularJS，还开发了一个名为“Karma”的测试框架，该框架有助于为 AngularJS 应用程序设计单元测试。
- 指令 诸如此类的标记 ng-app、ng-model 和 ng-repeat 为普通HTML元素添加行为。
这些功能只有实际运行后才最容易理解，因此下一节将从头开始构建一个可运行的页面。
如何设置 AngularJS 并构建你的第一个应用程序
阅读数据绑定的相关知识是一回事，亲眼见证它的实际应用又是另一回事。AngularJS 不需要包管理器、打包器或编译器，因此你的第一个应用程序就是一个直接从硬盘运行的单个 HTML 文件。
步骤 1）添加 AngularJS 库
使用一个 script 标签从 CDN 加载库。1.8.3 版本是 AngularJS 的最终版本，因此请将页面锁定到该版本，而不是使用浮动版本。
步骤 2）使用 ng-app 标记应用程序根目录
ng-app 指令告诉 AngularJS 编译器它拥有页面的哪个部分。将其放在 html 标签中会将整个文档交给框架，而您提供的值则定义了您即将创建的模块。
步骤 3）使用 ng-model 和表达式绑定数据
ng-model 指令将输入元素绑定到作用域中的某个属性，而双括号表达式则会在页面上的其他位置打印该属性。由于绑定是双向的，因此ping 框内会立即更新标题，无需您自己的事件处理程序。
步骤 4）添加逻辑控制器
控制器是一个简单的 Java该脚本函数接收 $scope 对象并为其设置初始值。将其注册到模块后，即可供 ng-controller 指令使用。
<!DOCTYPE html> <html ng-app="helloApp"> <head> <meta charset="UTF-8"> <title>AngularJS Hello World</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script> </head> <body> <div ng-controller="GreetController"> <input type="text" ng-model="name" placeholder="Enter your name"> <h3>Hello {{ name }}!</h3> </div> <script> // Step 1: create the module named in ng-app angular.module("helloApp", []) // Step 2: register a controller on that module .controller("GreetController", function ($scope) { $scope.name = "World"; }); </script> </body> </html>
步骤 5）运行页面并检查结果
将文件另存为 index.html 并用任意浏览器打开。页面标题最初显示“Hello World!”，每次按键都会刷新标题。整个过程无需任何 Web 服务器或构建步骤。
如果没有任何显示，请打开浏览器控制台，确认 CDN 脚本已加载，并且 ng-app 中的模块名称与传递给 angular.module 的名称完全一致，因为名称不匹配会导致程序静默失败。这个小页面已经展示了接下来要描述的优势。
AngularJS 的优势
以下是 AngularJS 的优点：
- 由于它是开源框架，因此错误或问题的数量应该很少。
- 双向绑定——AngularJS 保持数据层和表示层同步。您无需编写额外的代码。 Java脚本代码用于保持 HTML 代码和数据层中的数据同步。AngularJS 会自动完成此操作，您只需指定哪个控件绑定到模型的哪个部分即可。
- 路由——AngularJS 可以处理路由，也就是视图之间的跳转。这是单页应用程序的关键基础；在单页应用程序中，您可以根据用户交互跳转到不同的功能，但仍然停留在同一个页面上。
- AngularJS 支持测试，两者兼备。 单元测试和 整合测试.
- 它通过提供称为指令的自定义元素来扩展 HTML。简而言之，指令是 DOM 元素上的标记（例如属性、元素名称、注释或 CSS 类），用于指示 AngularJS HTML 编译器将特定行为附加到该 DOM 元素。这些指令有助于扩展现有 HTML 元素的功能，从而增强 Web 应用程序的强大功能。
AngularJS 的优点
保持平衡的观点同样重要，因此接下来将列出各种权衡取舍。
AngularJS 的缺点和局限性
任何框架都有其取舍，AngularJS 也不例外。以下是维护 AngularJS 应用的团队最常提到的局限性：
- 它本身没有安全层。 – AngularJS 既不提供身份验证也不提供授权，因此这两项都必须在服务器端强制执行。
- 完全依赖 Java脚本 – 如果访客禁用 Java如果脚本出错，页面将回退到纯标记，并且不会渲染。
- 消化循环性能 – 通过反复比较监视的值来检测变化，因此具有数千个绑定的页面可能会感觉很慢。
- 陡峭的学习曲线 – 范围、指令、工厂、服务和供应商之间存在重叠，而且通常有多种方法可以达到相同的结果。
- 搜索引擎可见性 – 视图是在浏览器中组装的，因此在爬虫可靠地索引页面之前，需要进行额外的工作，例如预渲染。
- 没有进一步更新 – 自 2021 年 12 月 31 日起，没有官方补丁，因此，除非商业供应商提供修复程序，否则新发现的漏洞将一直处于未修复状态。
最后一点促使大多数团队转向后续框架，尽管名称相同，但它是一个不同的产品。
AngularJS 与 Angular：它们有什么区别？
AngularJS 和 Angular 经常被混淆，因为它们的名称非常接近，但它们是两个独立的框架，使用不同的语言、架构和版本线。AngularJS 仅指本页所述的 1.x 系列。Angular 指的是版本 2 及之后的所有版本，它是 2016 年发布的完全重写版本，目前仍在积极开发中。 Code 没有刻意迁移，它们之间不会流动。
| 比较基础 | AngularJS (1.x) | Angular（2 及更高版本） |
|---|---|---|
| 语言 | JavaScript | TypeScript |
| 积木 | 控制器和 $scope | 组件和类 |
| 卓越 | MVC / MVW | 基于组件 |
| 移动支持 | 并非为移动设备设计 | 内置移动支持 |
| 依赖注入 | 基于字符串，多种语法 | 层级式、基于类型的 |
| 命令行工具 | 未提供 | 角度CLI |
| 支持状态 | 截至2021年12月31日 | 积极维护 |
实际结果是，AngularJS 控制器不能直接移植到 Angular 项目中。迁移意味着将每个控制器重写为一个组件，因此应将其视为真正的工程工作，而不是简单的升级。简而言之，应将 AngularJS 视为维护技能，而将 Angular 视为新开发的平台。
