Angular框架简述

Angular是一个前端Javascript框架，Angular是用TypeScript编写的，它将核心和附加功能实现为一组TypeScript库。 Angular架构并不难理解。特别是，当您熟悉基于它的各种概念时：

Angular应用程序有几个部分。任何Angular应用程序都由7个基本组成部分组成。这些是：

1. 组件
2. 模板
3. 元数据
4. 数据绑定
5. 指令
6. 服务
7. 依赖注入又名DI

组件

任何Angular应用程序都必须至少拥有一个组件。这称为 根组件 。它通过组件层次结构与页面DOM（文档对象模型）对应连接起来。无论Angular应用程序具有多少组件，每个组件都定义了一个有关数据逻辑的类，组件在应用中扮演的角色取决于该组件的类。每个类都与一个HTML模板相关联，该模板定义了界面视图。

在组件 @Component ()  下定义的是装饰器decorator，每个装饰器都将特定类型的元数据附加到使用它们的原始类中，装饰漆作用是让系统知道这些类是什么以及它们应该做什么。

模板

顾名思义，这些是将HTML与Angular标记结合起来的，它们能够在将HTML元素投射到屏幕上之前对其进行修改。模板利用管道来改善用户体验。管道通过转换显示值来实现。这仅仅意味着可以使用管道根据用户的区域设置添加时间和货币等单位。Angular带有大量预定义的管道。但是，也可以定义自己的管道。

元数据

类如何处理取决于元数据，类装饰器用于将元数据附加到类。任何附加了@ Component类装饰器的类都称为Component类 。为了提供Angular创建组件所需的必要信息，类Decorator通过配置选项进行配置，这些配置选项是指令，选择器和templateURL。

数据绑定

绑定标记负责将应用程序数据与DOM连接。有两种类型的数据绑定，即：

• 事件绑定 - 允许应用程序响应目标环境中的用户输入。它通过更新应用程序数据来实现
• 属性绑定 - 允许插值，这些值是从应用程序数据计算到HTML中的

与用户选择一样，DOM的变化会反映在程序数据中。这称为[双向数据绑定]。它是通过 ngModel指令实现的 。

指令

模板指令负责提供逻辑。在显示视图之前，Angular会评估指令并解析模板中存在的绑定语法，以便修改DOM和HTML元素。这是根据程序数据和逻辑完成的。有三种类型的指令：

1. 属性指令 - 修改组件，元素或其他指令的行为或外观
2. 组件 - 这些是带有模板的指令
3. 结构指令 - 通过添加或删除DOM元素来修改DOM布局

服务

当需要某些与特定视图无关的数据或逻辑时，将创建服务类。此外，这些数据或逻辑需要跨组件共享。

服务类定义紧跟在 @Injectable（）装饰器 之前。它的作用是提供元数据，允许服务以依赖的形式注入客户端组件。

依赖注入（DI）

简单地说，DI可以使组件类保持精简和高效。这使类能够委派任务，例如从服务器获取数据，直接登录到控制台，以及验证用户对服务的输入。

其他重要概念

除了典型的Angular应用程序的7个基本部分外，还有两个概念在起作用。分别是模块和路由，每个模块和路由描述如下：

1.模块

每个Angular应用程序都有一个名为AppModule的根模块。它提供了启动应用程序的引导机制。通常，Angular应用程序包含多个功能模块。

虽然 NgModules 与JavaScript（ES2015）模块不同，但前者补充后者。尽管如此，NgModules允许分别从其他NgModule导入和导出功能。这类似于JavaScript模块。NgModule的目的是声明一组组件的编译上下文。这些组件可能属于应用程序域或工作流。为了形成功能单元，NgModule可以将其组件与相关代码（如服务）相关联

为了便于开发复杂的应用程序，可以将代码组织成不同的功能模块。此外，这样做有助于设计可重用性并从延迟加载中受益，从而最小化代码在应用程序启动时加载所需的时间。

2.路由

Router NgModule有助于在Angular应用程序中定义许多应用程序状态和视图层次结构之间的导航路径。这个特殊的NgModule是根据流行的浏览器导航约定建模的，它们是：

1. 在浏览器的地址栏中输入一些URL以导航到相应的页面
2. 单击网页上的链接允许浏览器导航到新的网页
3. 点击浏览器中的后退和前进按钮，按照相应的顺序，通过浏览器历史记录向后和向前导航，

一旦用户执行某些操作，路由器就会拦截浏览器的行为并通过隐藏或显示视图层次结构来响应。路由器如何解释链接URL取决于应用程序的视图导航规则和数据状态。

路由器也使用 延迟加载 。如果路由器发现尚未加载定义当前应用程序状态所需的某些特定功能的模块，则完成此操作。

路由器在浏览器历史记录中记录活动。这允许后退和前进按钮工作。当用户单击按钮或从投递箱中选择某些内容时，将导航到新视图。或者，它可能是对来自某个来源的某些其他操作的回应。

导航路径 与用于定义导航规则的组件相关联。导航路径使用类似URL的语法，该语法与程序数据集成。这类似于模板语法如何将视图与程序数据集成。

此后，应用程序逻辑以根据用户输入和定义的访问规则选择要显示的视图和要隐藏的视图。

工作原理

NgModules是任何Angular应用程序的基本构建块，因为它们为组件提供了编译上下文。任何Angular应用程序都由一组NgModule定义。这些NgModules将相关代码收集到功能集中。Angular应用程序至少有一个根模块，可以启用引导和几个 功能模块 。组件定义视图。这些是根据程序逻辑和数据选择和修改的屏幕元素集。

此外，组件使用提供与视图不直接相关的特定功能的服务。服务提供程序作为依赖项注入组件。这使代码高效，模块化和可重用。

组件和服务是类。装饰器标记其类型并提供决定如何使用它们的元数据。某些组件类的元数据将其与模板相关联，所有这些都用于定义视图。

模板将普通HTML代码与Angular指令以及绑定标记相结合，这允许Angular在为显示呈现相同内容之前修改HTML。服务类的元数据提供Angular需要通过DI提供给组件的信息。

以上总结了Angular架构的概念。为了更好地理解这一点，实践是关键。它将帮助您深入了解Angular应用程序的确切工作方式。