Angular 7架构

Angular是一个平台或框架，用于在HTML和TypeScript中构建基于客户端的应用程序。它是用TypeScript编写的。它实现了核心和可选的功能，作为一组TypeScript库，被导入到应用程序中。Angular由三个主要部分组成，即模块、组件和路由。

ngModules或模块是angular应用程序的基本构建模块。一个angular应用程序是由一组ngModules定义的。每个应用程序中都有一个根模块，这一点很重要。组件定义了视图，这是一组屏幕元素，Angular可以根据程序逻辑和数据在其中选择和修改。每个应用程序中至少要有一个叫做根组件的组件，这一点很重要。组件使用服务来相互通信和分享数据。路由包括多个组件之间的链接，以便导航到不同的组件。

模块:

一个NgModule声明了一组组件的编译上下文，该组件专门用于一个应用领域、一个工作流程或一组密切相关的能力。NgModule可以将其组件与相关代码（如服务）联系起来，形成功能单元。每个angular应用程序总是有一个被称为根模块的模块，在应用程序中被称为Appmodule。

我们可以从其他模块导入功能，并允许它们使用路由（RouterModule）导出并被其他模块使用。通过制作多个模块，我们可以划分功能，并允许代码的重用性。同时，制作模块可以减少加载模块的负担，因为它们是按需加载的，这个特点使Angular具有健壮的性质。

组件:

每个angular应用程序至少有1个被称为根组件的组件，它将组件层次结构与页面文档对象模型（DOM）连接起来。每个组件都定义了一个类，包含TypeScript格式的登录和HTML模板中的页面视图。

我们有三件事包括在一个组件中。

1. Templates:
   HTML模板具有页面的外观。由指令提供的模板逻辑和应用数据与页面DOM的链接是通过绑定完成的。数据绑定有两种类型，一种是事件绑定（基于事件的变化），另一种是属性绑定（基于应用程序的数据变化）。

2. 服务和依赖性注入。
   通过依赖性注入，我们的意思是通过订阅服务来允许访问服务。它作为服务的一个委托人。

3. 数据绑定。
   角度中的绑定有两种类型。

• 事件绑定。
  事件绑定是用来捕捉用户端在应用程序上的事件，并在目标环境中通过更新应用程序的数据对其进行响应。例如，每当用户点击按钮时，改变按钮的颜色。该事件绑定的是onclick事件。

• 财产绑定。
  属性绑定用于从组件类中传递数据，便于将从应用程序中计算出的数值插值到HTML中。例如，制作一个切换颜色的按钮，该按钮在每两次点击时都会将其颜色变回正常。在这种情况下，模板将从应用程序数据中获取数据，并查看切换是1还是0（可以是真还是假），这种类型的绑定是属性绑定。

组件类的元数据。

元数据是指关于数据的数据。它包括所提供的数据的内部信息。在组件的情况下，一个组件类的元数据包括2个基本的东西：-

1. 一个组件类的元数据有一个定义视图的模板。模板将普通的HTML与Angular指令和绑定结合起来，允许Angular在屏幕上呈现之前修改HTML。

2. 服务类的元数据包括Angular需要的信息，以便通过依赖性注入（DI）使其对组件可用。

为了更好地理解，你可以参考下面的图表。

路由:

Angular Router NgModule提供了一个服务，让你在应用中的不同应用状态和视图层次中定义一个导航路径。

路由器将类似URL的路径映射到其他组件而不是页面。当用户执行一个动作，如点击一个链接，路由器拦截浏览器的行为并显示或隐藏组件的层次结构。它允许按需加载功能，从而形成一个强大的应用程序。

就像网页一样，路由器也将活动记录在浏览器中，因此前进和后退按钮在路由的情况下也能发挥作用。

路由的工作

路由器将类似URL的路径映射到视图而不是页面。每当执行任何动作，如点击浏览器中的另一个页面的链接，路由器就会拦截浏览器的行为，并显示或隐藏视图的层次结构。

如果路由器发现当前的应用状态需要特定的功能，而定义该功能的模块还没有被加载，路由器可以按需懒散地加载该模块，这使得应用具有健壮性。

路由器根据你的应用程序的导航规则和数据状态来解释一个链接的URL。路由器将活动记录在浏览器的历史记录中，所以后退和前进按钮也可以工作。

为了定义导航规则，导航路径被链接到组件上。一个路径使用类似于URL的语法来整合程序数据。