Angualr2 之 angular模块
Angular 模块是带有 @NgModule 装饰器函数的。 @NgModule 它标记出该模块拥有的组件、指令和管道, 并把它们的一部分公开出去,以便外部组件使用它们。 它可以向应用的依赖注入器中添加服务提供商。 Angular 模块化
Angular模块把组件、指令和管道打包成内聚的功能块,每块聚焦于一个特性分区、业务领域、工作流或一组通用的工具。
e.g. √ @NgModule({
// 1-这里只导入了CommonModule和IonicModule
// CommonModule中有 *ngIf和*ngFor
// IonicModule 中有ionic的样式
imports: [
CommonModule,IonicModule,],// 2- 这里声明了这3个组件属于该模块
declarations: [
SinoListComponent,SinoItemDetailComponent,SinoLoadingHintComponent,/** * entryComponents : Array<Type<any>|any[]> * Specifies a list of components that should be compiled when this module is defined. * For each component listed here,Angular will create a ComponentFactory and store it in the ComponentFactoryResolver. * 等价于,将组建放到这里,除去模板中用到的组件外,别的地方都可可以随意使用,尤其是ionic的导航中。 */
entryComponents: [
SinoItemDetailComponent,SinoListComponent,// 3-公开一些组件,这样其他模块只要导入了CrudModule,就可以在其组件模板中使用到出的这些组件了。
exports: [SinoListComponent,SinoItemDetailComponent],})
export class CrudModule {
static forRoot(config: any,routeConfig?: any): ModuleWithProviders {
return {
ngModule: CrudModule,// 4- 提供服务
providers: [
BaseDataService,{
provide: ModuleConfig,useValue: config,},{
provide: RouteConfig,useValue: routeConfig ? routeConfig : DEFAULT_ROUTE_CONFIG,};
}
}
提供服务有很多组件,是需要依靠外部的服务才能完成其功能的。那么我们提供服务的地方就有多个:
在组件中提供服务在组件中提供服务,它的作用范围就仅仅局限于该组件以及其子组件。 e.g. @Component({
selector: 'sino-file-list',templateUrl: './sino-file-list.component.html',styleUrls: ['./sino-file-list.component.css'],providers: [FileService],})
在模块创建中提供服务在模块创建中提供服务,可以在该模块的任何组建个中依赖注入然后使用。 特性模块根模块和特性模块共享着相同的执行环境。它们共享着同一个依赖注入器,这意味着某个模块中定义的服务在所有模块中也都能用到。 根模块和特性模块
特性模块用来提供了内聚的功能集合。 聚焦于应用的某个业务领域、用户工作流、某个基础设施(表单、HTTP、路由),或一组相关的工具集合。 虽然这些都能在根模块中做,但特性模块可以帮助我们把应用切分成具有特定关注点和目标的不同区域。 特性模块通过自己提供的服务和它决定对外共享的那些组件、指令、管道来与根模块等其它模块协同工作。 共享模块共享模块其实就是将一些公共的东西整理出来,放到一个模块中去,避免了其他模块的重复导入。 XxxModule.forRoot配置核心服务模块的静态方法forRoot可以同时提供并配置服务。
知识点
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |