Angualr2 之 angular模块Angular 模块化提供服务特性模块 - 业务上的最佳实践(n)共享模块XxxModule.forRoot配置核心服务知识点

  1. 管理指令、管道、组件
  2. 在模块中定义的提供商是会加到根模块中去,正常引导的话,如果是惰性加载的话,就会放在一部分中(在loading范围内的根模块)。
  3. 模块没有父子关系,只有引入

用@NgModule来定义应用中的模块。

Angular 模块是带有 @NgModule 装饰器的函数。 @NgModule接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。

它标记出该模块拥有的<u>组件、指令和管道, 并把它们的一部分公开出去,以便外部组件使用它们。 它可以向应用的依赖注入器中添加服务提供商。 </u>

Angular 模块化

模块是组织应用程序和使用使用外部程序库的最佳途径。

很多Angular库都是模块,e.g. FormsModule、HttpModule ...

Angular模块把组件、指令和管道打包成内聚的功能块,<u>每块聚焦于一个特性分区、业务领域、工作流或一组通用的工具。</u>

Angular模块是由一个@NgModule装饰器提供元数据的类,元数据包括:

  • 1-导入其他模块
  • 2-声明哪些组件、指令、管道属于该模块
  • 3-公开某些类,以便其他的组件模块可以使用它们
  • 4-在应用程序级提供服务,以便应用中的任何组件都能使用它。

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,
        },
      ],
    };
  }
}

提供服务

有很多组件,是需要依靠外部的服务才能完成其功能的。那么我们提供服务的地方就有多个:

  • 可以在组件中提供服务
  • 可以在模块创建中提供服务

在组件中提供服务

在组件中提供服务,<u>它的作用范围就仅仅局限于该组件以及其子组件。</u>

e.g. 下面这个组件,就是仅仅在该组件以及其子组件中使用了FileService服务,也就是说,<u>sino-file-list组件每次创建都是创建新的FileService服务</u>

@Component({
  selector: 'sino-file-list',
  templateUrl: './sino-file-list.component.html',
  styleUrls: ['./sino-file-list.component.css'],
  providers: [FileService],
})

在模块创建中提供服务

在模块创建中提供服务,可以在该模块的任何组建个中依赖注入然后使用。

特性模块 - 业务上的最佳实践(n)

根模块和特性模块共享着相同的执行环境。它们共享着同一个依赖注入器,这意味着某个模块中定义的服务在所有模块中也都能用到。

根模块和特性模块

  • 我们引导根模块来启动应用程序,但是导入特性模块(e.g. crudModule)来扩展应用。
  • 特性模块可以对其他模块暴露或隐藏自己的实现。

特性模块用来提供了内聚的功能集合。 聚焦于应用的某个业务领域、用户工作流、某个基础设施(表单、HTTP、路由),或一组相关的工具集合。

虽然这些都能在根模块中做,但特性模块可以帮助我们把应用切分成具有特定关注点和目标的不同区域。

特性模块通过自己提供的服务和它决定对外共享的那些组件、指令、管道来与根模块等其它模块协同工作。

共享模块

共享模块其实就是将一些公共的东西整理出来,放到一个模块中去,避免了其他模块的重复导入。

XxxModule.forRoot配置核心服务

模块的静态方法forRoot可以同时提供并配置服务。 它接收一个服务配置对象,并返回一个ModuleWithProviders。 ModuleWithProviders对象有两个属性:

  • ngModule - XxxModule类
  • providers - 配置好的服务提供商

知识点

  • NgModel是Angular指令。
  • ✔️如果两个指令同名,那么我们需要使用as关键字来为第二个指令创建别名。

import { HighlightDirective as ContactHighlightDirective } from './contact/highlight.directive';

* ? 特性模块 - 重点

 <u>特性模块不会集成其他模块中对组件、指令或者管道的访问权。AppModule中的 imports 与crudModule的 imports 互不相干。 </u>
 
 e.g.

 >我们在根模块中imports了`IonicModule`,但是在crud模块中也必须重新imports`IonicModule`,不然,crud模块中会不识别ionic的指令。

* ? forRoot

 根模块AppModule会导入CrudModule类并把它的providers添加到AppModule的服务提供商中。
 更精确的说法是,Angular 会先累加所有导入的提供商,*然后才*把它们追加到@NgModule.providers
中。 这样可以确保我们显式添加到AppModule
中的那些提供商总是优先于从其它模块中导入的提供商。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端vue

微信公众号授权登陆PHP

在微信公众号请求用户网页授权之前,要先到公众平台官网中修改授权回调域名 正式公众号:开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信...

1.8K40
来自专栏前端小作坊

加载第三方JS的各种姿势

如果你的网站上面有很多第三方JS代码,那么“下载速度的不可控”很有可能导致你的网站会被拖慢。因为JS在执行的时候会影响到页面的DOM和样式等情况。浏览器在解析渲...

44110
来自专栏张戈的专栏

shell脚本实现整站缓存和预缓存,进一步提升网站整体加载速度

在 Linux 中,shell 脚本结合系统任务计划 crontab,非常简单就能实现一些复杂程序才能完成的工作,开发成本低,且简单易学。 张戈博客之前也分享过...

45990
来自专栏web前端教室

学东西要不断问为什么,要求“甚解”--本周日晚先行者课程简记

今天是周日,又到了每周日晚的先行者课程了。今天晚上的内容是“上传组件”,这个上传组件,其实更应该说是一个功能,上传功能。它几乎没有什么ui交互界面,顶多也就是一...

21770
来自专栏张戈的专栏

申请域名邮箱,为空间减轻压力

玛思阁换空间之后,空间后台已配备邮箱管理(以前的那个 Win 主机,邮箱都没有,让我一直用的 QQ 邮箱!),由于个人邮箱好几个,于是就想都弄到一起,集中看邮件...

98390
来自专栏后端云

Raft算法和Gossip协议

raft 集群中的每个节点都可以根据集群运行的情况在三种状态间切换:follower, candidate 与 leader。leader 向 follower...

50030
来自专栏landv

robocopy的用法,数据库局域网备份

25420
来自专栏linux运维学习

linux学习第二十七篇:使用w查看系统负载,vmstat,top,sar,nload命令

使用w查看系统负载 w/uptime的命令结果是一样的 ? 1. 第一行从左面开始显示的信息依次为:时间,系统运行时间,登录用户数,平均负载。 ...

26970
来自专栏吴裕超

解决win10下git闪退

4.文件替换完成之后,我们来到C:\Windows\System32目录下,找到cmd.exe文件,右键点击文件,选择【以管理员身份运行】。

14820
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(九):初识后台管理

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

38030

扫码关注云+社区

领取腾讯云代金券