angular模块详解

原文:

https://www.jianshu.com/p/819421ff955a

大纲

  1、angular应用是模块化的
  2、对模块(Module)的认识
  3、模块的分类:根模块和特性模块
  4、NgModel参数详解
  5、imports数组与文件头部的import的对比

angular应用是模块化的

  1、Angular 应用是模块化的,并且Angular有自己的模块系统,它被称为Angular模块或NgModules.
  2、每个Angular应用至少有一个模块(根模块),习惯上命名为AppModule
  3、根模块在一些小型应用中可能是唯一的模块,大多数应用会有很多特性模块,每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
  4、Angular模块(无论是根模块还是特性模块)都是一个带有@NgModule装饰器的类。
  5、我们通过引导根模块来启动应用,在开发期间,通常在一个main.ts文件中引导AppModule,如:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; platformBrowserBynamic().bootstrapModule(AppModule);

对模块(Module)的认识

  1、Angular模块是一个由@NgModule装饰器提供元数据的类,元数据包括:
    声明哪些组件、指令、管道属于该模块
    公开某些类,以便其它的组件模板可以使用它们
    导入其它模块,从其它模块中获得本模块所需的组件、指令和管道
    在应用程序级提供服务,以便应用中的任何组件都能使用它
  2、 模块是组织应用和使用外部扩展应用的最佳途径
  3、 在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们。
  4、模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Rc5之后,Angular2将许多常用功能都分配到一个个的模块中,如:FormModule、HttpModule、RouterModule。
  5、模块与模块之间可以相互调用,调用用import,开出接口让人可以调用export
  6、在Angular模块中管理着本模块中的各个组件。

模块的分类:根模块和特性模块

  1、每个Angular2的应用都至少有一个模块即根模块。
随着程序的壮大,单一的根模块已不能清晰的划分职责,这时候便可以引入Feature Module。Feature Module与根模块的创建方式一样,所有的模块共享一个运行期上下文和依赖注入器。
  2、功能模块与根模块的职责区别主要有以下两点:
    2.1:根模块的目的在于启动app,功能模块的目的在于扩展app
    2.2:功能模块可以根据需要暴露或隐藏具体的实现
  3、Angular2提供的另一个与模块有关的技术就是延迟加载了。默认情况下Angular2将所有的代码打包成一个文件,目的是为了提高应用的流畅性,但是如果是运行在mobile中的app,加载一个大文件可能会过慢,所以rc5提供了一种延迟加载方式。

NgModel参数详解

  NgModule是一个装饰器函数,它接收一个用来描述模块属性的元数据对象,其中最重要的属性是:
  1、declarations:用于声明本模块中拥有的视图类,Angular有三种视图类:组件、指令和管道。
  2、exports:declarations的子集,可用于其它模块的组件模板。(用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。)
  3、imports:本模块声明的组件模板需要的类所在的其它模块(导入其他module,其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。)
  4、providers:服务的创建者,并加入到全局服务列表中,可用于应用任何部分。(指定应用程序的根级别需要使用的service。(Angular2中没有模块级别的service,所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中))
  5、bootstrap:指定应用的主视图(称为根组件),它是所有其它属兔的宿主,只有根模块才能设置bootstrap通常是app启动的根组件,一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。
  6、entryCompoenents: 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用,一般是bootstrap组件或者路由组件,ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中,否则不会用到这个属性。

imports数组与文件头部的import的对比

  1、imports数组和文件头部的import的应用
    1.1、imports数组:是Angular中特有的,本模块声明的组件模板需要的类所在的其它模块(导入其他module,其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。)
    1.2、文件头部的import:用于引用一些在其他文件中定义好的公用的方法,数据模型,这是JavaScript的方式
  2、区别:
    2.1、JavaScript的import声明允许你访问在其他文件中导出的符号,这样你可以在当前文件引用它们。我们会往几乎所有类型的应用中加入import语句。它们与Angular毫无关系,Angular对它们一无所知。
    2.2、模块的imports数组是@NgModule元数据中独有的。它告诉Angular特定Angular模块的信息——用@NgModule装饰的类——应用需要它们来正常工作

参考网址:

https://www.cnblogs.com/dojo-lzz/p/5878073.html

猜你喜欢

转载自www.cnblogs.com/shcrk/p/9211426.html