Angular 学习三-模块

1.NgModule经常使用模块 --功能模块

1. BrowserModule 导入自@angular/platform-browser ,使用场景:当想要在浏览器中运行应用时
2. CommonModule 导入自 @angular/common 使用场景:当想要使用Ngif 和NgFor时
3. FormsModule 导入自@angular/forms 使用场景:当要构建模板驱动表单时
4. ReactiveFormsModule 导入自@angular/forms 使用场景：当要构建响应式表单时
5. RouterModule 导入自@angular/router 使用场景: 当你想要使用RouterLink , forRoot() , forChild()要使用路由功能
6. HttpClientModule 导入自@angular/common/http 使用场景: 当你要和服务器对象时

2. @Component修饰器------视图、相关业务逻辑的封装

声明一个组件时，在组件类的之上要用@Component装饰器来告知Angular这是一个组件。

import { Component } from '@angular/core';

@Component({

`selector:app-root`
template:`
    <h1>{{title}}</h1>
    <h2>{{love}}<h2>
})`
复制代码

export class AppComponent{

title:'xxx',
love:'xxx'
复制代码

}

@Component最经常使用的几个选项时:

1. selector：这个 CSS 选择器用于在模板中标记出该指令，并触发该指令的实例化。
2. template：组件的内联模板，为组件展现的内容，通常内容比较少时使用。若是提供了它，就不要再用 templateUrl 提供模板了
3. templateUrl：组件模板文件的 URL。若是提供了它，就不要再用 template 来提供内联模板了,直接引用HTML文件
4. styleUrls: 直接引用css 文件
5. providers ：使用一个 令牌 配置该指令或组件的 注入器，该令牌会映射到一个依赖项的提供商
6. exportAs ：一个或多个名字，能够用来在模板中把该指令赋值给一个变量。当有多个名字时，请使用逗号分隔它们

3.@NgModule({})主要属性

1. declarations 模块内部的列表, 声明这个模块
2. imports 导入其余module，其余module暴露的出的，好比导入CommonModule,之后接收可使用Ngif , Ngfor
3. providers 指定应用程序的根级别须要使用的service
4. bootstrap 一般是app启动的根组件， 通常只有一个component. bootstrap中的组件会自动被放入到entryComponents
5. entryComponents 不会再模板中被引用到的组件，这个属性通常状况下只有ng 本身使用，通常是bootstrap组件或者路由组件， ng 会自动把bootstrap ， 路由组件放入其中，除非不经过路由动态将component加入dom 中，不然不会用到这个属性

3.特性模块的分类

1. 领域特性模块: 领域特性模块用来给用户提供应用程序领域中特有的用户体验，好比编辑客户信息或下订单等。它们一般会有一个顶级组件来充当该特性的根组件，而且一般是私有的。用来支持它的各级子组件。领域特性模块大部分由 declarations 组成，只有顶级组件会被导出。领域特性模块不多会有服务提供商。若是有，那么这些服务的生命周期必须和该模块的生命周期彻底相同。领域特性模块一般会由更高一级的特性模块导出且只导出一次。对于缺乏路由的小型应用，它们可能只会被根模块 AppModule 导入一次。
2. 带路由的特性模块:带路由的特性模块是一种特殊的领域特性模块，但它的顶层组件会做为路由导航时的目标组件。根据这个定义，全部惰性加载的模块都是路由特性模块。带路由的特性模块不会导出任何东西，由于它们的组件永远不会出如今外部组件的模板中。惰性加载的路由特性模块不该该被任何模块导入。若是那样作就会致使它被当即加载，破坏了惰性加载的设计用途。 也就是说你应该永远不会看到它们在 AppModule 的 imports 中被引用。 当即加载的路由特性模块必须被其它模块导入，以便编译器能了解它所包含的组件。路由特性模块不多会有服务提供商，缘由参见惰性加载的特性模块中的解释。若是那样作，那么它所提供的服务的生命周期必须与该模块的生命周期彻底相同。不要在路由特性模块或被路由特性模块所导入的模块中提供全应用级的单例服务。
3. 路由模块:路由模块为其它模块提供路由配置，而且把路由这个关注点从它的配套模块中分离出来。路由模块一般会作这些：定义路由。把路由配置添加到该模块的 imports 中。把路由守卫和解析器的服务提供商添加到该模块的 providers 中。路由模块应该与其配套模块同名，可是加上“Routing”后缀。好比，foo.module.ts 中的 FooModule 就有一个位于 foo-routing.module.ts 文件中的 FooRoutingModule 路由模块。 若是其配套模块是根模块 AppModule，AppRoutingModule 就要使用 RouterModule.forRoot(routes) 来把路由器配置添加到它的 imports 中。 全部其它路由模块都是子模块，要使用 RouterModule.forChild(routes)。按照惯例，路由模块会从新导出这个 RouterModule，以便其配套模块中的组件能够访问路由器指令，好比 RouterLink 和 RouterOutlet。路由模块没有本身的可声明对象。组件、指令和管道都是特性模块的职责，而不是路由模块的。路由模块只应该被它的配套模块导入。
4. 服务特性模块:服务模块提供了一些工具服务，好比数据访问和消息。理论上，它们应该是彻底由服务提供商组成的，不该该有可声明对象。Angular 的 HttpClientModule 就是一个服务模块的好例子。根模块 AppModule 是惟一的能够导入服务模块的模块。
5. 可视部件特性模块:窗口部件模块为外部模块提供组件、指令和管道。不少第三方 UI 组件库都是窗口部件模块。窗口部件模块应该彻底由可声明对象组成，它们中的大部分都应该被导出。窗口部件模块不多会有服务提供商。若是任何模块的组件模板中须要用到这些窗口部件，就请导入相应的窗口部件模块。