1.NgModule常用模块 --功能模块
BrowserModule导入自@angular/platform-browser,使用场景:当想要在浏览器中运行应用时CommonModule导入自@angular/common使用场景:当想要使用Ngif和NgFor时FormsModule导入自@angular/forms使用场景:当要构建模板驱动表单时ReactiveFormsModule导入自@angular/forms使用场景:当要构建响应式表单时RouterModule导入自@angular/router使用场景: 当你想要使用RouterLink , forRoot() , forChild()要使用路由功能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最常用的几个选项时:
- selector:这个 CSS 选择器用于在模板中标记出该指令,并触发该指令的实例化。
- template:组件的内联模板,为组件展示的内容,一般内容比较少时使用。如果提供了它,就不要再用 templateUrl 提供模板了
- templateUrl:组件模板文件的 URL。如果提供了它,就不要再用 template 来提供内联模板了,直接引用HTML文件
- styleUrls: 直接引用css 文件
- providers :使用一个 令牌 配置该指令或组件的 注入器,该令牌会映射到一个依赖项的提供商
- exportAs :一个或多个名字,可以用来在模板中把该指令赋值给一个变量。当有多个名字时,请使用逗号分隔它们
3.@NgModule({})主要属性
declarations模块内部的列表, 声明这个模块imports导入其他module,其他module暴露的出的,比如导入CommonModule,以后接收可以使用Ngif , Ngforproviders指定应用程序的根级别需要使用的servicebootstrap通常是app启动的根组件, 一般只有一个component. bootstrap中的组件会自动被放入到entryComponentsentryComponents不会再模板中被引用到的组件,这个属性一般情况下只有ng 自己使用,一般是bootstrap组件或者路由组件, ng 会自动把bootstrap , 路由组件放入其中,除非不通过路由动态将component加入dom 中,否则不会用到这个属性
3.特性模块的分类
- 领域特性模块:
领域特性模块用来给用户提供应用程序领域中特有的用户体验,比如编辑客户信息或下订单等。它们通常会有一个顶级组件来充当该特性的根组件,并且通常是私有的。用来支持它的各级子组件。领域特性模块大部分由 declarations 组成,只有顶级组件会被导出。领域特性模块很少会有服务提供商。如果有,那么这些服务的生命周期必须和该模块的生命周期完全相同。领域特性模块通常会由更高一级的特性模块导出且只导出一次。对于缺少路由的小型应用,它们可能只会被根模块 AppModule 导入一次。 - 带路由的特性模块:
带路由的特性模块是一种特殊的领域特性模块,但它的顶层组件会作为路由导航时的目标组件。根据这个定义,所有惰性加载的模块都是路由特性模块。带路由的特性模块不会导出任何东西,因为它们的组件永远不会出现在外部组件的模板中。惰性加载的路由特性模块不应该被任何模块导入。如果那样做就会导致它被立即加载,破坏了惰性加载的设计用途。 也就是说你应该永远不会看到它们在 AppModule 的 imports 中被引用。 立即加载的路由特性模块必须被其它模块导入,以便编译器能了解它所包含的组件。路由特性模块很少会有服务提供商,原因参见惰性加载的特性模块中的解释。如果那样做,那么它所提供的服务的生命周期必须与该模块的生命周期完全相同。不要在路由特性模块或被路由特性模块所导入的模块中提供全应用级的单例服务。 - 路由模块:
路由模块为其它模块提供路由配置,并且把路由这个关注点从它的配套模块中分离出来。路由模块通常会做这些:定义路由。把路由配置添加到该模块的 imports 中。把路由守卫和解析器的服务提供商添加到该模块的 providers 中。路由模块应该与其配套模块同名,但是加上“Routing”后缀。比如,foo.module.ts 中的 FooModule 就有一个位于 foo-routing.module.ts 文件中的 FooRoutingModule 路由模块。 如果其配套模块是根模块 AppModule,AppRoutingModule 就要使用 RouterModule.forRoot(routes) 来把路由器配置添加到它的 imports 中。 所有其它路由模块都是子模块,要使用 RouterModule.forChild(routes)。按照惯例,路由模块会重新导出这个 RouterModule,以便其配套模块中的组件可以访问路由器指令,比如 RouterLink 和 RouterOutlet。路由模块没有自己的可声明对象。组件、指令和管道都是特性模块的职责,而不是路由模块的。路由模块只应该被它的配套模块导入。 - 服务特性模块:
服务模块提供了一些工具服务,比如数据访问和消息。理论上,它们应该是完全由服务提供商组成的,不应该有可声明对象。Angular 的 HttpClientModule 就是一个服务模块的好例子。根模块 AppModule 是唯一的可以导入服务模块的模块。 - 可视部件特性模块:
窗口部件模块为外部模块提供组件、指令和管道。很多第三方 UI 组件库都是窗口部件模块。窗口部件模块应该完全由可声明对象组成,它们中的大部分都应该被导出。窗口部件模块很少会有服务提供商。如果任何模块的组件模板中需要用到这些窗口部件,就请导入相应的窗口部件模块。