Angular 7 架构

Angular 7 是一个平台和框架，用于在 HTML 和 TypeScript 中创建客户端应用程序。 Angular 7 使用 TypeScript 编写。

Angular 7 将核心和可选功能实现为一组 TypeScript 库，您可以将这些库导入到您的应用程序中。

NgModules 是 Angular 7 应用程序的基本构建块。 它们为组件提供编译上下文。 Angular 7 应用程序由一组 NgModules 定义，NgModules 将相关代码收集到功能集中。

Angular 7 应用程序始终至少有一个启用引导的根模块，并且通常有许多其他功能模块。

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

组成部分

组件和服务都是简单的类，带有装饰器，用于标记它们的类型并提供指导 Angular 执行操作的元数据。

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

组件类的元数据

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

阅读有关 Angular 7 组件的更多信息

模块

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

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

Anngular 7 模块的一些重要功能

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

模板、指令和数据绑定

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

有两种类型的数据绑定

• 事件绑定： 事件绑定用于将事件绑定到您的应用程序，并通过更新您的应用程序数据来响应目标环境中的用户输入。 阅读有关事件绑定的更多信息
• 属性绑定： 属性绑定用于从组件类传递数据，并方便您将从应用程序数据计算出的值插入到 HTML 中。 阅读有关属性绑定的更多信息

服务和依赖注入

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

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

路由

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

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

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

路由器如何工作？

路由器将类似于 URL 的路径映射到视图，而不是页面。 每当用户执行操作时，例如点击将在浏览器中加载新页面的链接，路由器会拦截浏览器的行为，并显示或隐藏视图层次结构。

如果路由器发现当前应用程序状态需要特定功能，并且定义该功能的模块尚未加载，则路由器可以按需延迟加载该模块。

路由器根据您应用程序的视图导航规则和数据状态解释链接 URL。 当用户点击按钮或从下拉框中选择时，或者响应来自任何来源的其他刺激时，您可以导航到新视图。 路由器将活动记录在浏览器的历史记录中，因此后退和前进按钮也能正常工作。

要定义导航规则，您可以将导航路径与您的组件关联。 路径使用类似于 URL 的语法，该语法集成了您的程序数据，其方式与模板语法将您的视图与您的程序数据集成的方式非常相似。 然后，您可以应用程序逻辑来选择要显示或隐藏哪些视图，以响应用户输入和您自己的访问规则。