【Angular4学习】模块化再理解-1

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


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

  • 声明哪些组件、指令、管道属于该模块;
  • 公开某些类,以便其它的组件模板可以使用它们;
  • 导入其它模块,从其它模块中获得本模块所需的组件、指令和管道;
  • 在应用程序级提供服务,以便应用中的任何组件都能使用它。

 每个Angular应用至少有一个模块类——根模块(AppModule),我们将通过引导根模块来启动应用。
 对于组件很少的简单应用来说,只用一个根模块就足够了。随着应用规模的增长,我们逐步从根模块中重构出一些特性模块,来代表一组相关功能的集合。然后,我们在根模块中导入它们。

AppModule - 应用的根模块

  每个Angular应用都有一个根模块类。
  @NgModule装饰器用来为模块定义元数据。

在main.ts中引导
  在main.ts文件中,我们通过引导AppModule来启动应用。
  
  另外:针对不同的平台,Angular提供了很多引导选项。

  • 通过即时(JIT)编译器动态引导
  • 使用预编译器(AoT - Ahead-Of-Time)进行静态引导

声明指令和组件

服务提供商
  模块可以往应用的“根依赖入器”中添加提供商,让那些服务在应用中到处可用。

导入支持性模块
  Angular能识别NgIf、NgFor等指令的原因,是因为在AppModule中我们导入了BrowserModule模块。
  导入BrowserModule会让该模块公开的所有组件、指令和管道在AppModule下的任何组件模板中直接可用,而不需要额外的繁琐步骤。

  更准确地说,NgIf是来自@angular/common的CommonModule中声明的。
  CommonModule提供了很多应用程序中常用的指令,包括NgIf和NgFor等。
  BrowserModule导入了CommonModule并且重新导出了它。最终的效果是:只要导入BrowserModule就自动获得了CommonModule中的指令。

  有些熟悉的Angular指令并不属于CommonModule。例如,NgModel和RouterLink分别属于Angular的FormsModule模块和RouterModule模块。在使用那些指令之前,我们也必须导入那些模块。

注:永远不要再次声明属于其它模块的类。

猜你喜欢

转载自blog.csdn.net/YYZZHC999/article/details/80560225
今日推荐