标签:
在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们。
模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Rc5之后,Angular2将许多常用功能都分配到一个个的模块中,如:FormModule、HttpModule、RouterModule。
NgModule的主要属性如下:
每个Angular2的应用都至少有一个模块即跟模块。
import {NgModule} from ‘@angular/core‘; import {BrowserModule} from ‘@angular/platform-borwser‘; import {AppComponent} from ‘./AppComponent‘; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], bootstrap: [AppComponent] }) export class AppModule{}
随着程序的壮大,单一的根模块已不能清晰的划分职责,这时候便可以引入Feature Module。Feature Module与根模块的创建方式一样,所有的模块共享一个运行期上下文和依赖注入器。
功能模块与根模块的职责区别主要有以下两点:
Angular2提供的另一个与模块有关的技术就是延迟加载了。默认情况下Angular2将所有的代码打包成一个文件,目的是为了提高应用的流畅性,但是如果是运行在mobile中的app,加载一个大文件可能会过慢,所以rc5提供了一种延迟加载方式。
template: `
<app-title [subtitle]="subtitle"></app-title>
<nav>
<a routerLink="contact" routerLinkActive="active">Contact</a>
<a routerLink="crisis" routerLinkActive="active">Crisis Center</a>
<a routerLink="heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
`
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‘ }, { path: ‘heroes‘, loadChildren: ‘app/hero/hero.module#HeroModule‘ } ]; export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
其中,path指明路径,loadChildren指明使用延迟加载,‘app/crisis/crisis.module#CrisisModule‘指明了模块的路径,和模块的名称。
标签:
原文地址:http://www.cnblogs.com/dojo-lzz/p/5878073.html