淺談Angular2 模塊懶加載的方法
當(dāng)項目變得復(fù)雜龐大以后,如果所有頁面都在一個模塊里,就會出現(xiàn)首頁加載慢的問題,因為首頁就已經(jīng)把整個項目加載進(jìn)來了。所以,很有必要根據(jù)業(yè)務(wù)將不同的功能分模塊,以便Angular2按需加載,提升用戶體驗。
下面的例子是將首頁放到home模塊里,訪問/home時加載home模塊內(nèi)容,僅供學(xué)習(xí)懶加載,其實首頁訪問路徑應(yīng)該是/
先看項目文件結(jié)構(gòu):

home模塊放到src/app/home目錄下,里面的home目錄是home組件。
home模塊有單獨的定義和路由(home.module.ts,home-routing.module.ts)
創(chuàng)建HOME模塊和HOME組件:
cd src/app/ mkdir home cd home ng g module home ng g component home
創(chuàng)建HOME模塊的路由配置模塊
創(chuàng)建 home-routing.module.ts:
import {Routes, RouterModule} from "@angular/router";
import {HomeComponent} from "./home/home.component";
import {NgModule} from "@angular/core";
const routes: Routes=[
{
path:'',
component:HomeComponent
}
]
@NgModule({
imports:[RouterModule.forChild(routes)],
exports:[RouterModule],
providers:[]
})
export class HomeRoutingModule{}
模塊下的頁面都可以單獨在該模塊自己的的路由配置模塊上配置,而不用在app-routing.module.ts里配置,注意RouterModule.forChild(routes)
home.module.ts導(dǎo)入路由模塊:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import {HomeRoutingModule} from "./home-routing.module";
@NgModule({
imports: [
CommonModule,
HomeRoutingModule
],
declarations: [HomeComponent]
})
export class HomeModule { }
在app-routing.module.ts配置路由:
import {NgModule} from "@angular/core";
import {Routes, RouterModule} from "@angular/router";
import {UserListComponent} from "./user/user-list/user-list.component";
import {UserDetailComponent} from "./user/user-detail/user-detail.component";
import {RxjsComponent} from "./rxjs/rxjs.component";
import {UserEditComponent} from "./user/user-edit/user-edit.component";
import {environment} from "../environments/environment";
const routes: Routes = [
{
path:'home',
loadChildren:'app/home/home.module#HomeModule'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes,{ useHash: environment.useHash })],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule { }
配置home路徑,使用loadChildren加載home模塊
完成后打開chrome的開發(fā)者工具,切到Network,看看不同的頁面是不是加載了不同的文件。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Ionic + Angular.js實現(xiàn)驗證碼倒計時功能的方法
驗證碼倒計時這個功能相信對大家每個人來說都不陌生,之前介紹了在Android中的實現(xiàn)方法,下面這篇文章主要給大家介紹了利用Ionic + Angular.js實現(xiàn)驗證碼倒計時功能的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友們下面來一起看看吧。2017-06-06
AngularJS的依賴注入實例分析(使用module和injector)
這篇文章主要介紹了AngularJS的依賴注入,結(jié)合實例形式分析了依賴注入的原理及使用module和injector實現(xiàn)依賴注入的步驟與操作技巧,需要的朋友可以參考下2017-01-01
Angular 4根據(jù)組件名稱動態(tài)創(chuàng)建出組件的方法教程
組件是我們在學(xué)習(xí)angular中必不可少的一部分,下面這篇文章主要給大家介紹了關(guān)于Angular 4如何根據(jù)組件名稱動態(tài)創(chuàng)建出組件的相關(guān)資料,文中通過圖文與示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-11-11
Angular.js中angular-ui-router的簡單實踐
本篇文章主要介紹了Angular.js中angular-ui-router的簡單實踐,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07
AngularJS實現(xiàn)controller控制器間共享數(shù)據(jù)的方法示例
這篇文章主要介紹了AngularJS實現(xiàn)controller控制器間共享數(shù)據(jù)的方法,結(jié)合簡單實例形式分析了AngularJS控制器數(shù)據(jù)共享的實現(xiàn)方法,需要的朋友可以參考下2017-10-10

