Angular的Module文件下各组件和注解以及常用模块等

 什么是组件和模块？

设计上看，组件（带有@Component装饰器的类）强调重复调用，就像零件一样，一颗螺丝、螺丝帽分别是一个零件——组件化就好比：做一个网站，可以把一个个区域拆成多个组件，比如导航栏是一个组件、编辑区是一个组件、页脚是一个组件，可以尽情拆分，一个组件包含了html、css和js代码，可以简单理解为页面的一块，可以根据需要把它放在页面的任何部位，也可以和其他组件组成新的组件。每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；

模块（带有@NgModule装饰器的类）强调职责，侧重功能的封装，隔离、组织复制的js代码，将它们封装成一个个具有特定功能的模块，每个模块都是一个独立的作用域，是可以独立运行的，这样也降低了块与块之间的耦合性。

NgModule 模块是Angular中的一个重要的点，Angular的基本构造NgModule。NgModule 会把相关的代码收集到一些功能集中，形成功能单元。在使用Angular CL 命令新建一个项目的时候，会给我们生成一个根模块，命名为 AppModule，根模块有一个根组件AppComponent，引导这个根模块就可以启动应用。Angular 应用是模块化的，我们在开发中会根据其功能 作用 以及其特性，建立大大小小各种模块，从而构建其成为一个应用程序，任何模块都能包含任意数量的其它组件。

举个最简单的module

• declarations：用来放组件、指令、管道的声明。
• imports：用来导入外部模块。
• providers：需要使用的 Service 都放在这里。
• bootstrap：定义启动组件。你可能注意到了这个配置项是一个数组，也就是说可以指定做个组件作为启动点，但是这种用法是很罕见的。
• schemas：不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明。

还可能有exports：导出组件or指令管道等，以供引用此模块的模块可以使用此模块的组件or 指令管道等。

更好理解：假设module A 导入了module B，则module A的declarations区域的所有Component，能使用module B的exports区域定义的Component。

父子关系有一种特点，当它在子池子找不到它的依赖性，它会去父池子里面找，这也解释了为什么在Module中Provider的东西，你在Module当中的Component也能用，而且在父组件中Provider的东西，子组件也能用。

也就是说，AppModule(引导 module )里注册的服务，能在该应用的任何位置被注入。

RouterModule.forRoot例子的module

比如：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailsComponent } from './product-details/product-details.component';
import { ProductAlertsComponent } from './product-alerts/product-alerts.component';
import { CartComponent } from './cart/cart.component';
import { HttpClientModule } from '@angular/common/http';
import { ShippingComponent } from './shipping/shipping.component';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ProductListComponent },
      { path: 'products/:productId', component: ProductDetailsComponent },
      { path: 'cart', component: CartComponent },
      { path: 'shipping', component: ShippingComponent }
    ])
  ],
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent,
    ProductDetailsComponent,
    CartComponent,
    ShippingComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

第一个属性 path 定义了该路由的 URL 路径。第二个属性 component 定义了要让 Angular 用作相应路径的组件。

常用模块

首先要知道跑起来一个项目需要引用什么基本的模块，以下是Angular 提供的一些官方的模块。

NgModule	导入自	为何使用
BrowserModule	@angular/platform-browser	当你想要在浏览器中运行应用时
CommonModule	@angular/common	当你想要使用 NgIf 和 NgFor 时
FormsModule	@angular/forms	当要构建模板驱动表单时（它包含 NgModel ）
ReactiveFormsModule	@angular/forms	当要构建响应式表单时
RouterModule	@angular/router	要使用路由功能，并且你要用到 RouterLink,.forRoot() 和 .forChild() 时
HttpClientModule	@angular/common/http	当你要和服务器对话时

 学习笔记查阅资料参考各位大神