发表于: 2017-06-13 23:01:59

1 1100


今天完成的事情:


懒路由和子路由:

懒加载指定的模块和组件有以下好处:


1.可以继续开发我们的新功能,但不再增加初始加载文件的大小。

2.只有在用户请求时才加载特定模块。

3.为那些只访问应用程序某些区域的用户加快加载速度


新建一个叫Playground的module,为PlaygroundModule建立自己模块的路由

const routes: Routes = [
{ path: '', component: PlaygroundComponent },
];

@NgModule({
imports: [ RouterModule.forChild(routes) ],
exports: [ RouterModule ],
})
export class PlaygroundRoutingModule { }

在src/app/app-routing.module.ts中要添加一个懒路由指向PlaygroundModule

import { NgModule }     from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { AuthGuardService } from './core/auth-guard.service';

const routes: Routes = [
{
path: '',
redirectTo: 'login',
pathMatch: 'full'
},
{
path: 'playground',
loadChildren: 'app/playground/playground.module#PlaygroundModule',
}
];

@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
]
 export class AppRoutingModule {}

路由器用 loadChildren 属性来映射懒加载的模块文件PlaygroundModule 。路由器将接收loadChildren 字符串,并把它动态加载进 PlaygroundModule ,它的路由被动态合并到配置中,然后加载所请求的路由。

app/playground/playground.module#PlaygroundModule 这个表达式是这样的规则:模块的路径#模块名称


明天计划的事情:

      继续学习angular


问题:

     

imports: [

BrowserModule,

FormsModule,

HttpModule,

InMemoryWebApiModule.forRoot(InMemoryTodoDbService),

routing

],

这里面得HttpModule,和InMeoryxxxx.这两句如果InMeory放在http前面就会报404错误,


收获:

如上


返回列表 返回列表
评论

    分享到