Angular知识点梳理一
目录
架构梳理：
Angular本身是用TS实现的一个JS框架，一个Angular项目至少包含一个根模块也就是AppModule，在根模块中引入很多特性模块如路由模块。模块(NgModule)为组件编译提供了上下文环境，一个模块中可以包含多个组件，每一个组件通常包含视图与服务。
所谓视图通俗来说就是模板，模板可以把HTML，Angular指令，绑定标记组合的这个产物。
所谓服务通俗来说是一个普通的类，包含的是你自己的逻辑(例如访问后台获取数据，组装对象等)。
所谓装饰器是TS提供的面向服务的一种写法，类似C#中的特性/Java中的注解，在Angualr中内置或者说提供了很多装饰器例如@Component，@Injectable。装饰器在Angular中的作用 => 用来为Angular的视图与服务提供元数据，也就是说标记出视图和服务，然后让Angular识别出来，按照框架内既定好的规则去执行，装饰器里的属性就是所谓的元数据。
模块梳理：
所谓模块更多的是体现出模块化编程的思想，抽离出内聚较高的逻辑代码为一个模块，该模块在系统中充当一个特性模块。在Angular中模块是被@NgModule装饰器所装饰的类，@NgModule中元数据如下：
declarations：声明那些属于本模块的组件，指令，管道。
exports：可以在其它模块的组件中被应用的，在declarations中声明过的对象。
import：本模块的组件中需要应用/依赖的其它模块。
providers：本模块向全局服务中提供的服务，这些服务可以在应用的任何部分使用。
bootstrap：启动项，也就是根组件。
Angular中的模块与ES中的模块是没有任何关系的，不过在Angular中彼此没有冲突。对于ES模块中导入导出，该怎么用就怎么用，Angular本身的模块系统对它是没有限制的。
组件梳理：
说明
用@Component修饰的类，主要元数据如下
selector：是一个标签选择器，在Angualr项目中，在HTML中如果存在指定名称的选择器那么就会把该组件的实例插入标签，这也就是Angular渲染出来的页面和普通HTML渲染的页面不一样的地方，总会在页面中多出一些component的节点。
templateUrl：HTML模板的相对路径地址。
providers：当前组件所需要依赖的服务，用以做依赖注入。
相关概念
组件中三个重要的概念，绑定，管道，指令。
绑定：
数据绑定/双向绑定/MVVP，其实都是一个概念，在传统的页面编写中，我们需要把值手动的添加到具体的元素上，实现的方式是借助JQuery/原生JS操作DOM，然后给指定的DOM去赋值，这个过程是枯燥，乏味并且容易出错。借助于数据绑定，我们可以摒弃掉这种方式，因为Angular会监测所绑定属性值的变化，保证属性值为最新的值。检测的方式是在每次事件循环中处理绑定的数据，从组件树的根部开始递归全部子组件。（对于Vue和React监控的方式与Angular不同，他们是通过创建虚拟DOM然后在处理数据变化，相比于Angular遍历的方式更简单，这也是为什么Angular相对较慢的原因）
绑定的形式：
{{value}} 用以绑定在标签内部显示，单向
[子组件属性]="value" 用以将父组件的值传送到子组件的属性上，单向
<input [(ngModel)] = "value"> 用于类似文本框的value绑定，用在模板表单内。双向，这是最能体现双向绑定的方式，是属性绑定与事件绑定的结合，数据将值流到输出框，用于修改输出框的值后，通过事件绑定流回到组件。
管道：
管道是指将组件中声明的值到数据呈现的这段逻辑/空间距离。是用@Pipe修饰的类，管道的修饰符|，形式{{value|管道名}}。
指令：
指令是作用于DOM的，Angular在渲染页面的时候根据指令会对DOM进行转换，指令是用@Directive()修饰的类。
结构指令*ngFor，属性指令ngModule
服务：
说明
所谓服务其实是一种广义的说法，类似于传统三层架构中的Service层，实现的事儿也就是逻辑与表现分离，用以提高复用性与模块化/高内聚，未来实现这些好处，Angular系统内提供了依赖注入的方式，用@Injectable修饰的类即是可以被注入的类，为什么不说就是服务那，因为@Injectable也可以修饰组件，管道，模块等，@Injectable只是表明可以被注入/有一个依赖，但不是所有用@Injectable都是一个服务。
Angular依赖注入
关于依赖注入概念就不解释了，不太理解的自行百度。咱们来聊聊Angular中的DI是怎么回事，在Angular工程启动的时候会自动创建一个全局/应用级别的注入器，该注入器做两件事儿创建依赖和维护依赖容器(其实就是一个链表)。具体使用的流程当你在组件的构造函数中constructor(this demoService:DemoService)想引入一个服务的时候，注入器会去检查自己的容器中存不存在一个DomoService服务的对象，如果不存在就会使用注册的服务去创建一个实例并保存到依赖链表中，然后提供给组件的构造函数使用。那么如何注册服务那，其实之前提到过了，在这里再次标明。
在模块的@NgModule修饰器的providers中注册，模块内都有效，如果是AppModule，那么应用内都有效。
在组件内@Component修饰器的providers中注册，组件内有效。
在服务本身的@Injectable修饰器的provideIn中注册，write onece， apply anywhere。
本章以Angular整体的角度梳理了一下，都是比较糙的点，后续会逐一深入递进。