一)懶加載
Ionic3默認采用懶加載機制,什么是懶加載呢?當我們第一次進入應用,會加載app.module,如果沒有采用懶加載,那么app.module里的所有東西都會被加載,很顯然這是不太合適的,因為里面的組件和服務我們在第一次進入應用時并沒有全部使用,可能只使用了很少的一部分,那么對于比較大型的應用來說,由于頁面和其他的服務,指令,管道比較多,就會造成比較用戶體驗不好的影響。
這個時候我們需要把應用分為一個個module,各自引入自己用到的東西,不要管別的模塊。那么第一次進入應用,就只加載很少的app.module和root page對應的module,當我們進入其他頁面的時候,才會去加載相應的module。這樣的好處是項目代碼結構清晰,易于維護,易于開發,而且第一次加載速度比較快。
當我們使用Ionic3的CLI來新建頁面,默認的會是懶加載的結構,甚至不止頁面,所有的component,service,directive都默認的是懶加載。
配置ionic3懶加載步驟:
1.給需要懶加載的頁面配置module.ts;
例:配置about.module.ts:
1. import { NgModule } from '@angular/core';
2. import { IonicPageModule } from 'ionic-angular';
3. import { AboutPage } from './about';
5. @NgModule({
6. declarations: [
7. AboutPage,
8. ],
9. imports: [
10. IonicPageModule.forChild(AboutPage),
11. ],
12. })
13. export class AboutPageModule { }
2.在對應頁面的.ts文件里增加@IonicPage()特性;
以about.ts為例,在@Component上方加上@IonicPage()特性(行號4,注意在上面引用IonicPage(見2行)),其他需要懶加載的頁面同樣操作配置。
1. import {Component} from '@angular/core';
2. import {NavController, IonicPage} from 'ionic-angular';
4. @IonicPage()
5. @Component({
6. selector: 'page-about',
7. templateUrl: 'about.html'
8. })
9. export class AboutPage {
11. constructor(public navCtrl: NavController) {
12. }
13. }
3.在app.module.ts移除頁面引用;
將配置過懶加載的頁面,在app.module.ts中進行移除引用,移除后的代碼如下:
1. import {HttpModule} from "@angular/http";
2. import {AppService} from "./app.service";
3. import {NgModule, ErrorHandler} from '@angular/core';
4. import {BrowserModule} from '@angular/platform-browser';
5. import {IonicApp, IonicModule, IonicErrorHandler} from 'ionic-angular';
6. import {MyApp} from './app.component';
7. //import {AboutPage} from "../pages/about/about";
9. import {StatusBar} from '@ionic-native/status-bar';
10. import {SplashScreen} from '@ionic-native/splash-screen';
12. @NgModule({
13. declarations: [
14. MyApp
15. //AboutPage
16. ],
17. imports: [
18. BrowserModule,
19. HttpModule,
20. IonicModule.forRoot(MyApp)
21. ],
22. bootstrap: [IonicApp],
23. entryComponents: [
24. MyApp
25. //AboutPage
26. ],
27. providers: [
28. StatusBar,
29. SplashScreen,
30. AppService,
31. {provide: ErrorHandler, useClass: IonicErrorHandler}
32. ]
33. })
34. export class AppModule {
35. }
4.使用懶加載;
使用懶加載,不需要在頂部進行import導入,只需要將之前的頁面名字用引號引起來即可:
例:app.component.ts代碼段:
1. import { Component } from '@angular/core';
2. import { Platform } from 'ionic-angular';
3. import { StatusBar } from '@ionic-native/status-bar';
4. import { SplashScreen } from '@ionic-native/splash-screen';
5. //import {TabsPage} from "../pages/tabs/tabs";
7. @Component({
8. templateUrl: 'app.html'
9. })
10. export class MyApp {
11. //不需要在頂部進行import導入,只需要將之前的頁面名字用引號引起來即可
12. //rootPage:any = TabsPage;
13. rootPage:any = 'TabsPage';
15. constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
16. platform.ready().then(() => {
17. statusBar.styleDefault();
18. splashScreen.hide();
19. });
20. }
21. }
配置完成。
NgModule
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
}