Angular 8 架构

Angular 8 是一个平台和框架，用于使用 HTML 和 TypeScript 构建客户端应用程序。

Angular 8 用 TypeScript 编写。 它实现核心和可选功能，作为一组 TypeScript 库，您可以将其导入到您的应用程序中。

Angular 应用程序的基本构建块是 NgModules，它们为组件提供编译上下文。 NgModules 将相关的代码收集到功能集；一个 Angular 应用程序由一组 NgModules 定义。 一个应用程序总是至少有一个根模块，用于启动，并且通常有更多功能模块。

• 组件定义视图，视图是屏幕元素的集合，Angular 可以根据您的程序逻辑和数据在这些元素之间进行选择和修改。
• 组件使用服务，这些服务提供不直接与视图相关联的特定功能。 服务提供程序可以作为依赖项注入到组件中，使您的代码模块化、可重用且高效。

Angular 8 架构的关键部分

Angular 8 组件

在 Angular 8 中，组件和服务都是带有修饰符的简单类，这些修饰符标记它们的类型并提供元数据，这些元数据指导 Angular 执行操作。

每个 Angular 应用程序总是至少有一个组件，称为根组件，它将页面层次结构与页面 DOM 连接起来。 每个组件定义一个类，该类包含应用程序数据和逻辑，并与一个 HTML 模板相关联，该模板定义要在目标环境中显示的视图。

组件类的元数据

• 组件类的元数据将其与定义视图的模板关联起来。 模板将普通 HTML 与 Angular 指令和绑定标记相结合，这些标记允许 Angular 在呈现 HTML 以供显示之前对其进行修改。
• 服务类的元数据提供了 Angular 需要的信息，以便通过依赖注入 (DI) 使其可用于组件。

模块

Angular 8 NgModules 与其他 JavaScript 模块不同。 每个 Angular 8 应用程序都有一个根模块，称为 AppModule。 它提供了启动应用程序的启动机制。

通常，每个 Angular 8 应用程序都包含许多功能模块。

Anngular 8 模块的一些重要特性

• Angular 8 NgModules 从其他 NgModules 导入功能，就像其他 JavaScript 模块一样。
• NgModules 允许其自身的功能被导出并被其他 NgModules 使用。 例如，如果您想在您的应用程序中使用路由器服务，您可以导入 Router NgModule。

模板、指令和数据绑定

在 Angular 8 中，模板用于将 HTML 与 Angular 标记相结合，并在显示 HTML 元素之前对其进行修改。 模板指令提供程序逻辑，绑定标记将您的应用程序数据和 DOM 连接起来。

有两种类型的数据绑定

1. 事件绑定：事件绑定用于将事件绑定到您的应用程序，并通过更新您的应用程序数据来响应目标环境中的用户输入。

2. 属性绑定：属性绑定用于从组件类传递数据，并帮助您将从您的应用程序数据计算得出的值插入到 HTML 中。

服务和依赖注入

在 Angular 8 中，开发人员创建一个服务类，用于与特定视图无关且他们希望在组件之间共享的数据或逻辑。

依赖注入 (DI) 用于使您的组件类精简高效。 DI 不从服务器获取数据、验证用户输入或直接记录到控制台； 它只是将此类任务呈现给服务。

路由3

在 Angular 8 中，Router 是一个 NgModule，它提供一个服务，帮助开发人员定义应用程序中不同应用程序状态和视图层次结构之间的导航路径。

它的工作方式与浏览器的导航方式相同。 也就是

• 在地址栏中输入一个 URL，浏览器将导航到相应的页面。
• 单击页面上的链接，浏览器将导航到一个新页面。
• 单击浏览器的后退或前进按钮，浏览器将根据您看到的历史页面向后或向前导航。