詳解使用路由延遲加載 Angular 模塊
Angular 非常模塊化，模塊化的一個(gè)非常有用的特性就是模塊作為延遲加載點(diǎn)。延遲加載意味著可以在后臺(tái)加載一個(gè)模塊和其包含的所有組件等資源。這樣 Angular 就不需要在第一個(gè)界面從服務(wù)器下載所有的文件，直到您請(qǐng)求它，才下載相應(yīng)的模塊。這對(duì)提供性能和減少首屏的初始下載文件尺寸有巨大的幫助。而且它可以很容易設(shè)置。
這里將使用一個(gè)簡(jiǎn)單示例來(lái)演示這個(gè)特性是如何工作的。將應(yīng)用拆分為多個(gè)不同的模塊，可以在需要的時(shí)候再進(jìn)行延遲加載。
延遲加載的路由需要在根模塊之外定義，所以，你需要將需要延遲加載的功能包含在功能模塊中。
我們使用 Angular CLI 來(lái)創(chuàng)建一個(gè)演示項(xiàng)目：Demo.
ng new demo
然后，進(jìn)入到 demo 文件夾中。安裝必要的 package。
npm i
在安裝之后，我們創(chuàng)建一個(gè)新的模塊 shop。在 angular CLI 中，ng 是命令提示指令，g 表示 generate，用來(lái)創(chuàng)建某類新 item。
創(chuàng)建新的名為 shop 的模塊就是：
ng g module shop
這會(huì)導(dǎo)致在 Angular 項(xiàng)目的 src/app 文件下創(chuàng)建一個(gè)新的文件夾，并添加一個(gè)名為 shop.module.ts 的模塊定義文件。
然后，我們?cè)谀J(rèn)的 app 模塊和新創(chuàng)建的 shop 模塊中分別創(chuàng)建組件。
ng g c home/home ng g c shop/cart ng g c shop/checkout ng g c shop/confirm
CLI 會(huì)將 home 分配到 app 模塊中，將 cart、checkout、confirm 分配到 shop 模塊中，比如，
此時(shí)的 shop.module.ts 內(nèi)容如下：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CheckoutComponent } from './checkout/checkout.component';
import { CartComponent } from './cart/cart.component';
import { ConfirmComponent } from './confirm/confirm.component';
@NgModule({
imports: [
CommonModule
],
declarations: [CheckoutComponent, CartComponent, ConfirmComponent]
})
export class ShopModule { }
修改根組件
Angular CLI 默認(rèn)生成的 app.component.ts 組件是應(yīng)用的主頁(yè)面，其中包含了一些關(guān)于 Angular 的介紹信息，我們將它修改成我們需要的內(nèi)容。將默認(rèn)生成的 app.component.html 內(nèi)容修改為如下內(nèi)容。
<!--The content below is only a placeholder and can be replaced.--> <h1>Lazy Load Module</h1> <a [routerLink]="['/shop']" >Shop Cart</a> <router-outlet> </router-outlet>
這里提供了一個(gè)占位的 router-outlet，各個(gè)組件將顯示在這里面。
同時(shí)，提供了一個(gè)導(dǎo)航鏈接，可以直接導(dǎo)航到 /shop/cart 組件。
創(chuàng)建路由
根路由
首先創(chuàng)建根路由。
我們?cè)?app 文件夾中，添加一個(gè)名為 main.routing.ts 的路由配置文件。內(nèi)容如下：
import { Routes } from '@angular/router';
// HomeComponent this components will be eager loaded
import { HomeComponent } from './home/home.component';
export const routes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'shop', loadChildren: './shop/shop.module#ShopModule' },
{ path: '**', component: HomeComponent }
];
其中，home 組件是正常的提前加載。
需要注意的是一下幾點(diǎn)：
1. 我們使用了 loadChildren 來(lái)延遲加載一個(gè)模塊。而不是使用提前加載所使用的 component。
2. 我們使用了一個(gè)字符串而不是符號(hào)來(lái)避免提前加載。
3. 我們不僅定義了模塊的路徑，還提供了模塊的類名。
在 app.module.ts 中啟用根路由。主要需要使用 forRoot 來(lái)啟用根路由。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
模塊路由
定義模塊路由
對(duì)于 shop 模塊來(lái)說(shuō)，定義路由就沒(méi)有什么特別了，我們這里可以定義一個(gè)名為 shop.route.ts 的路由定義文件，內(nèi)容如下所示：
import { Routes } from '@angular/router';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';
export const routes: Routes = [
{ path: '', component: CartComponent },
{ path: 'checkout', component: CheckoutComponent },
{ path: 'confirm', component: ConfirmComponent }
];
還需要修改一下模塊定義文件 shop.module.ts 文件，以使用這個(gè)路由定義。注意我們需要使用 forChild 來(lái)啟用子路由。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CheckoutComponent } from './checkout/checkout.component';
import { CartComponent } from './cart/cart.component';
import { ConfirmComponent } from './confirm/confirm.component';
import { routes } from './shop.routing';
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes)
],
declarations: [CheckoutComponent, CartComponent, ConfirmComponent]
})
export class ShopModule { }
已經(jīng)一切就緒了。
測(cè)試延遲加載
現(xiàn)在啟動(dòng)應(yīng)用。
ng serve
默認(rèn)會(huì)在 4200 端口啟動(dòng)應(yīng)用，請(qǐng)打開(kāi)瀏覽器，訪問(wèn)：http://localhost:4200/
訪問(wèn)首頁(yè)的網(wǎng)絡(luò)訪問(wèn)如下，其中并不包含功能模塊的內(nèi)容。
我們先將網(wǎng)絡(luò)請(qǐng)求的歷史記錄清除掉。
然后點(diǎn)擊鏈接，訪問(wèn) /shop/cart 的時(shí)候，網(wǎng)絡(luò)請(qǐng)求如下，可以看到一個(gè)新的腳本文件被加載，這里包含的就是延遲加載的功能模塊。
僅僅功能模塊被加載了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了angular的輸入和輸出的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Angularjs中如何使用filterFilter函數(shù)過(guò)濾
這篇文章主要介紹了Angularjs中如何使用filterFilter函數(shù)過(guò)濾的相關(guān)資料,需要的朋友可以參考下2016-02-02
AngularJS實(shí)現(xiàn)元素顯示和隱藏的幾個(gè)案例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)元素顯示和隱藏的幾個(gè)案例，需要的朋友可以參考下2015-12-12
詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
Angular 4.X開(kāi)發(fā)實(shí)踐中的踩坑小結(jié)
這篇文章主要給大家介紹了關(guān)于Angular 4.X開(kāi)發(fā)實(shí)踐中的一些踩坑經(jīng)驗(yàn)，文中主要介紹的是使用ngIf或者ngSwitch出錯(cuò)以及多級(jí)依賴注入器的相關(guān)內(nèi)容，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-07-07
AngularJS 實(shí)現(xiàn)彈性盒子布局的方法
本文給大家?guī)?lái)一段簡(jiǎn)短代碼實(shí)現(xiàn)angularjs彈性布局效果，非常實(shí)用，對(duì)angularjs彈出布局知識(shí)感興趣的朋友可以參考下2016-08-08
Angular(5.2->6.1)升級(jí)小結(jié)
今天小編就為大家分享一篇關(guān)于Angular(5.2->6.1)升級(jí)小結(jié)，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2018-12-12
這篇文章主要介紹了Angularjs處理頁(yè)面閃爍的解決方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
