Angular 应用及其组件树的剖析
介绍
什么是 Angular 应用？它的构建块是什么？什么是 Angular 组件树？本指南将回答这些问题。
Angular 应用程序通常具有以下核心部分：
- 模块
- 服务
- 成分
在本指南中，您将了解如何使用这些构建块来构建现代应用程序。让我们开始吧！
模块
每个 Angular 应用/库都由一个或多个模块组成。模块本质上是 Angular 框架用于封装应用或库的一部分的机制。模块本身由一个或多个服务和组件组成，它们协同工作以构成给定的用途或功能集。要创建模块，您必须使用 Angular CLI 的ng generate module <module_name>命令或手动创建一个使用@NgModule装饰器装饰的类。请参阅以下示例：
import { NgModule } from '@angular/core';
@NgModule({
imports: [ ],
providers: [ ],
declarations: [ ],
exports: [ ],
bootstrap: [ ]
})
export class TestModule { }
除了创建自己的模块之外，Angular 还提供了许多现成的模块供您使用。其中一些模块包括：
- 表单模块
- ReactiveForms模块
- 通用模块
- HttpClient模块
- 路由器模块
上述模块带有用于处理表单、模板、路由和 HTTP 请求的内置 API。
模块最佳实践
使用模块时，需要注意一些最佳做法。最佳做法之一是按功能或应用工作流组织模块。这些类型的模块称为“功能”模块。通过创建功能模块，您可以轻松地将给定功能或工作流注入到您想要的应用部分中。
另一个最佳实践是创建一个单独的共享模块，其中包含应用程序中广泛使用的组件和服务。通过将所有共享逻辑封装到单个模块中，您可以轻松地将此共享模块导入到需要它的不同功能模块中。小心！您不希望共享模块变得太大，因为这会使在延迟加载时创建较小的 JavaScript 块变得更加困难。
最后，Angular 中与模块相关的另一个最佳实践是在您的应用中使用延迟加载。Angular 为您提供了动态导入模块的功能，仅在您的应用中需要它们时才导入。这意味着，您无需在应用加载时加载单个较大的 JavaScript 文件，而是可以创建分块构建，其中每个适当标记的模块在编译后都会拆分成自己的单独 JavaScript 文件。这些单独的 JavaScript 文件仅在应用需要使用时才加载到浏览器中。通过有效地将应用的视图层拆分为适当功能的模块，您可以延迟加载每个模块，将生产构建拆分为易于加载的 JavaScript 块。这可以大大提高应用的加载速度！
服务
Angular 框架以服务的形式提供了额外的抽象。Angular 服务与 Angular 框架的依赖注入系统协同工作，使您能够将类注入到应用程序的任何部分。
您可以使用 Angular CLI 命令ng generate s <service_name>或手动创建一个类并用@Injectable装饰器标记它来创建一个新的 Angular 服务。
您可以使用@Injectable装饰器的providedIn字段将 Angular 服务标记为单例（您的应用中只会有一个此服务实例），如下所示：
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class TestService {}
如果您希望服务的多个实例可用，那么您必须首先创建装饰服务，如下所示：
import { Injectable } from '@angular/core';
@Injectable()
export class TestService {}
现在，你可以将此TestService注入到任何 Angular 组件中，只需将其添加到Angular 提供的@Component装饰器中的提供程序数组中即可。请注意以下内容：
@Component({
selector: 'app-test',
template: `<div></div>`,
providers: [ TestService ]
})
class TestComponent {
constructor(private testService: TestService) { }
}
组件树
Angular 还提供了第三个抽象，涵盖了应用或库的视图层：组件。Angular 组件在功能上由模板 (.html)、业务逻辑层 (.ts) 和模板样式 (.css/.scss/.less) 组成。
每个 Angular 应用的视图层都由一个组件树组成。每个 Angular 应用都由一个根组件组成。然后，您可以创建各种子组件，这些子组件本身又由子组件组成。这构成了组件树，是您的应用的基本构建块。您可以使用 Angular CLI 命令ng generate c <component_name>或手动创建一个类并将@Component装饰器附加到它来创建 Angular 组件。请注意以下示例：
@Component({
selector: 'app-test',
templateUrl: './test.component.html'
})
export class TestComponent {
}
结论
在本指南中，您了解了 Angular 应用的所有结构。您学习了如何使用模块将 Angular 应用分解为可重复使用、可注入的代码块，这些代码块也可以延迟加载。您还学习了如何使用服务来封装业务逻辑的核心部分并将它们随意注入到应用架构的各个部分中。最后，您了解了 Angular 组件树以及如何以最符合您要解决的问题的方式构建您自己的应用的组件树。
现在，您可以放心构建架构合理且遵循最佳实践的现代 Angular 应用。有关更多信息，请查看Angular 文档。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~