Angular 的应用

什么是 Angular？

Angular 是一个用 TypeScript 编写的开源 JavaScript 框架。Google 主要维护它用于开发单页应用程序。借助它，用户可以轻松构建和维护大型应用程序。

一些基本思想构成了 Angular 应用程序架构的基础。Angular 组件是 Angular 框架的基本单元。视图是屏幕元素的集合，Angular 可以根据程序的逻辑和数据来选择和修改这些元素。组件定义了这些视图。

为什么需要框架？

总的来说，框架不断提高重做代码的性能和效率。它们是节省时间的工具，为程序员提供了大量的附加功能，这些功能可以添加到应用程序中，而无需进一步的工作。

组件使用服务来执行与视图不直接相关的后台任务，例如数据获取。通过将这些服务作为依赖项注入到您的组件中，您可以使代码更高效、可重用和模块化。服务和组件被归类为装饰器标记的类。

应用程序的组件通常定义了一个视图层次结构。Angular 提供了 Router 功能来帮助您创建视图之间的导航路径。路由器具有高级的浏览器导航功能。

为什么选择 Angular？

Angular 有哪些不同的版本？

“Angular”一词指的是框架的所有不同版本。自 2009 年 Angular 最初开发以来，已经进行了许多修订。Angular 1 是 Angular 的初始版本，后来被称为 AngularJS。

接着是 Angular 2、3、4、5，直到 2020 年 11 月 11 日，推出了当前版本 Angular 11。Angular 的每个新版本都建立在前一个版本的基础上，修复错误，纠正问题，并适应现代平台日益增长的复杂性。

Angular 的特点包括

1. 文档对象模型 (DOM)

页面对象模型 (DOM) 将 XML 或 HTML 页面视为树状结构，每个节点代表内容的不同部分。

Angular 使用普通 DOM。想象一下，同一个 HTML 页面接收了十次修改。Angular 将更新整个 HTML 标签树结构，而不是只更新修改的部分。

2. TypeScript

用户可以使用 TypeScript 编写更易于理解的 JavaScript 代码，它为 JavaScript 定义了一组类型。每个 TypeScript 代码都与 JavaScript 兼容，并在所有平台上无缝运行。开发 Angular 应用程序不需要 TypeScript。尽管如此，它仍然强烈推荐，因为它提供了改进的语法结构，并有助于理解和维护代码库。

3. 数据绑定

使用网页浏览器，用户可以通过一种称为数据绑定的技术来更改网页元素。它不需要复杂的编码或编程，因为它使用了动态 HTML。在具有交互式组件的网站（例如计算器、教程、论坛和游戏）中使用了数据绑定。此外，当页面包含大量数据时，它能够更好地进行页面的增量显示。

4. 测试

Angular 使用 Jasmine 测试框架。Jasmine 框架提供了许多功能来编写各种类型的测试场景。测试的任务运行器 Karma 使用配置文件设置报告器、测试框架和启动。

既然您已经了解了 Angular 的基础知识，如果您想每天都使用它，您需要掌握它的架构。通过报名参加 Angular 认证培训课程，您可以深入了解 Angular，学习 TypeScript、Bootstrap 网格系统、SPA、表单、管道、Promise、Observable 和 Angular 类测试等主题。

数据绑定、指令和模板

HTML 和 Angular 标记在模板中组合，以便在显示 HTML 组件之前可以对其进行修改。模板指令提供程序逻辑，绑定标记将您的应用程序数据与 DOM 连接起来。存在两类数据绑定

• 事件绑定：此功能会根据目标环境中用户的交互来更新应用程序的数据。
• 属性绑定：此功能允许您将从应用程序数据计算出的值插入到 HTML 中。

依赖注入和服务

为了在与特定视图无关的组件之间通信数据或逻辑，您可以创建一个服务类。@Injectable() 装饰器紧跟在服务类定义之前。装饰器作为依赖项添加到您的类中，这些元数据是必需的。

路由

借助 Angular Router 模块，您可以查看应用程序中的层次结构，并设计各种应用程序状态之间的导航路径。它基于广为人知的浏览器导航标准

• 当您在地址栏中键入 URL 时，浏览器会将您带到确切的网页。
• 当您单击页面上的超链接时，浏览器会加载一个新页面。
• 您可以使用浏览器的后退和前进按钮在之前查看过的页面之间进行导航。
• 路由器映射 URL 风格的路径，而不是将页面映射到组件。

Angular 架构

Angular 是一个完整的模型-视图-控制器 (MVC) 框架。它提供了真实 DOM 以及双向数据流和关于应用程序应如何构建的明确指南。

Angular 应用程序由以下八个组件组成

1. 模块

AppModule 根模块提供了在 Angular 应用程序中启动应用程序的引导机制。

2. 组件

每个应用程序组件创建一个类，其中包含应用程序的数据和逻辑。通常，组件定义了用户界面 (UI) 的一部分。

3. 模板

HTML 和 Angular 标记在 Angular 模板中组合，以便在显示 HTML 元素之前可以对其进行修改。存在两类数据绑定

• 事件绑定：允许您的程序根据目标环境中的用户交互来更新其数据。
• 属性绑定：允许用户将从应用程序数据计算出的值插入到 HTML 中。

4. 元数据信息

类的元数据会告诉 Angular 如何处理它。它用于装饰类并配置其预期行为。

AngularJS 的指令

AngularJS 指令通过扩展 HTML 来提供额外的语法。指令可以通过使用前缀“ng-”轻松区分。将它们视为 DOM 元素上的标记，指示 AngularJS 对其应用特定行为，甚至完全修改它。

这里提供了两个指令示例

• ng-model 指令：ng-model 将 HTML 控件的值绑定到提供的 AngularJS 表达式的值。
• ng-bind 指令：此指令将 AngularJS 表达式的值替换为 HTML 控件的值。

结论

总而言之，Angular 是一个功能丰富且可靠的 Web 软件框架，它因能够加速和简化动态单页应用程序的开发而享有盛誉。Angular 的基于因子 (factor-based) 的架构、对 TypeScript 的支持以及各种集成工具和能力使开发人员能够编写可扩展、模块化且可维护的代码。

该框架通过强调 Observable、依赖注入和双向数据绑定，简化了创建响应式和交互式用户界面的过程。Angular 广泛的指令、服务和路由功能进一步促进了构建功能丰富的强大应用程序。