angular2 ngmodel 模块
在angular2中一个module指的是使用@ngmodule修饰的class。@ngmodule利用一个元数据对象来告诉angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们。我们也可以通过定义子模块来扩展我们应用的功能。
ngmodule 的api
interface ngmodule { // providers: 这个选项是一个数组,需要我们列出我们这个模块的一些需要共用的服务 // 然后我们就可以在这个模块的各个组件中通过依赖注入使用了. providers : provider[] // declarations: 数组类型的选项, 用来声明属于这个模块的指令,管道等等. // 然后我们就可以在这个模块中使用它们了. declarations : array<type<any>|any[]> // imports: 数组类型的选项,我们的模块需要依赖的一些其他的模块,这样做的目的使我们这个模块 // 可以直接使用别的模块提供的一些指令,组件等等. imports : array<type<any>|modulewithproviders|any[]> // exports: 数组类型的选项,我们这个模块需要导出的一些组件,指令,模块等; // 如果别的模块导入了我们这个模块, // 那么别的模块就可以直接使用我们在这里导出的组件,指令模块等. exports : array<type<any>|any[]> // entrycomponents: 数组类型的选项,指定一系列的组件,这些组件将会在这个模块定义的时候进行编译 // angular会为每一个组件创建一个componentfactory然后把它存储在componentfactoryresolver entrycomponents : array<type<any>|any[]> // bootstrap: 数组类型选项, 指定了这个模块启动的时候应该启动的组件.当然这些组件会被自动的加入到entrycomponents中去 bootstrap : array<type<any>|any[]> // schemas: 不属于angular的组件或者指令的元素或者属性都需要在这里进行声明. schemas : array<schemametadata|any[]> // id: 字符串类型的选项,模块的隐藏id,它可以是一个名字或者一个路径;用来在getmodulefactory区别模块,如果这个属性是undefined // 那么这个模块将不会被注册. id : string }
常用api简介
ngmodule的主要属性如下:
子模块
随着程序的壮大,单一的根模块已不能清晰的划分职责,这时候便可以引入feature module。feature module与根模块的创建方式一样,所有的模块共享一个运行期上下文和依赖注入器。
功能模块与根模块的职责区别主要有以下两点:
angular2提供的另一个与模块有关的技术就是延迟加载了。默认情况下angular2将所有的代码打包成一个文件,目的是为了提高应用的流畅性,但是如果是运行在mobile中的app,加载一个大文件可能会过慢,所以rc5提供了一种延迟加载方式。
import { modulewithproviders } from '@angular/core'; import { routes, routermodule } from '@angular/router'; export const routes: routes = [ { path: '', redirectto: 'contact', pathmatch: 'full'}, { path: 'crisis', loadchildren: 'app/crisis/crisis.module#crisismodule' }, // 可以延迟加载子模块,子模块的结构和父模块一样,它会去加载子模块中的routes配置,并跳转对应的组件中去。 { path: 'heroes', loadchildren: 'app/hero/hero.module#heromodule' } ]; export const routing: modulewithproviders = routermodule.forroot(routes);
其中,path指明路径,loadchildren指明使用延迟加载,'app/crisis/crisis.module#crisismodule'指明了模块的路径,和模块的名称。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
Angular8引入百度Echarts进行图表分析的实现代码
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
angular inputNumber指令输入框只能输入数字的实现
网友评论