Angular6学习笔记14：核心知识--架构--angular架构预览

怼烎@ 2022-05-08 07:42 137阅读 0赞

# 架构预览：模块 Modules / 组件 Components / 服务与依赖注入 Services and dependency injection / 路由 Routing #

## 总览： ##

Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。

Angular 本身使用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，可以将它们导入应用中。

Angular 的基本构造块是 *NgModule*，它为*组件*提供了编译的上下文环境。 NgModule 会把相关的代码收集到一些功能集中。Angular 应用就是由一组 NgModule 定义出的。 应用至少会有一个用于引导应用的*根模块*，通常还会有很多*特性模块*。

*  组件定义*视图*。视图是一组可见的屏幕元素，Angular 可以根据你的程序逻辑和数据来选择和修改它们。 每个应用都至少有一个根组件。
 *  组件使用*服务*。服务会提供那些与视图不直接相关的功能。服务提供商可以作为*依赖*被*注入*到组件中， 这能让你的代码更加模块化、可复用，而且高效。

组件和服务都是简单的类，这些类使用*装饰器*来标出它们的类型，并提供元数据以告知 Angular 该如何使用它们。

*  组件类的元数据将组件类和一个用来定义视图的*模板*关联起来。 模板把普通的 HTML 和*指令*与*绑定标记（markup）*组合起来，这样 Angular 就可以在呈现 HTML 之前先修改这些 HTML。
 *  服务的元数据提供了一些信息，Angular 要用这些信息来让组件可以通过*依赖注入（DI）*使用该服务。

应用的组件通常会定义很多视图，并进行分级组织。 Angular 提供了路由 `Router` 服务来帮助你定义视图之间的导航路径。 路由器提供了先进的浏览器内导航功能。

（以上摘自Angular的官方文档）

这里，怎么能更好理解架构呢？

假设一个应用是一个完整的小汽车，组件（component）那么就是每一个轮胎，引擎之类的零件，服务（service）就是就轮胎的安装槽，使轮胎可以在这里安装，路由（Router）就是将每个连接各个零件的连接线，模版（Modules）就是汽车的底盘，组合所有的组件，通过路由连接，使之成为一个完整的汽车。