onic3.x 目錄結(jié)構(gòu)分析
執(zhí)行命令ionic start myApp tabs 生成ionic3項目myApp后，用vsCode打開項目可以看到項目中：
- node_modules //node 各類依賴包
- resources //android/ios 資源(更換圖標(biāo)和啟動動畫)
- src //開發(fā)工作目錄惭适，頁面科阎、樣式辆苔、腳本和圖片都放在這個目錄下
- www //靜態(tài)文件
- platforms //生成 android 或者 ios 安裝包路徑( platforms\android\build\outputs\apk:apk 所在位置)
- plugins // 已安裝的cordova插件（通過ionic cordova plugins ls查看算灸，通過ionic cordova plugins add/remove 插件名或路徑來添加／刪除）
- config.xml //打包成 app 的配置文件,也就是原生項目配置文件
- package.json //node安裝模塊時的依據(jù)文件，配置項目的元數(shù)據(jù)和管理項目所需要的依賴驻啤， 在里面配置的內(nèi)容菲驴，在執(zhí)行npm install命令后會生成到node_modules目錄。
- tsconfig.json //TypeScript 項目的根目錄骑冗，指定用來編譯這個項目的根文件和編譯選項
- tslint.json //格式化和校驗 typescript
src目錄詳細介紹
src目錄:工作目錄,開發(fā)完成后通過ionic的命令行生成為原始的靜態(tài)html頁面赊瞬，并存放在www目錄，也就是說www在開發(fā)過程中是不需要理的贼涩，可以任意刪除森逮。
當(dāng)我們想打包app時，命令行執(zhí)行打包指令會生成一個調(diào)用瀏覽器插件的原生項目磁携，同時把www目錄拷貝到項目中，瀏覽器插件的入口網(wǎng)頁指向www的index.html良风，從而在app中實現(xiàn)本地瀏覽網(wǎng)頁的效果谊迄。
其中頁面和腳本等因為是本地的就不需要網(wǎng)上加載，在數(shù)據(jù)加載過程中就已經(jīng)可以看到頁面烟央，等數(shù)據(jù)加載完成自動局部刷新頁面即可统诺，這就是ionic的運行機理
src 下面文件分析:
-
app：入口文件夾
-app.component.ts：入口頁的業(yè)務(wù)邏輯(根組件)；
-app.html：入口頁的html模板疑俭；
-app.module.ts：入口模塊配置, 告訴Angular如何編譯和啟動應(yīng)用程序粮呢；
-app.scss：入口頁的樣式（全局樣式）；
-main.ts：啟動模塊入口钞艇；
assets：樣式啄寡、圖片、字體哩照、腳本等靜態(tài)文件挺物；
pages：開發(fā)頁面，含html飘弧、ts识藤、css；
theme：主題文件夾次伶，里面可以放置多個主題文件痴昧，方便切換主題；components：自定義組件（公用冠王、可復(fù)用模塊）赶撰；
directives：自定義指令（注入到組件上為組件添加功能）；
pipes：自定義管道（用于格式化顯示數(shù)據(jù)）；
providers：自定義服務(wù)（工具類扣囊、業(yè)務(wù)處理類等等）乎折；
了解IonicModule之前，我們需要先看下NgModule與@NgModule 裝飾器：
NgModule是angular（這里不再詳細介紹）框架的概念侵歇。
一個NgModule描述如何將應(yīng)用程序各部分組合在一起骂澄。每個應(yīng)用程序都至少有一個Angular module，即啟動應(yīng)用程序時引導(dǎo)的根模塊惕虑。
@NgModule decorator將AppModule標(biāo)識為NgModule類坟冲。@NgModule接受一個元數(shù)據(jù)對象，該對象告訴Angular如何編譯和啟動應(yīng)用程序溃蔫。
NgModule 的元數(shù)據(jù)會做這些：
* 聲明某些組件健提、指令和管道屬于這個模塊。
* 公開其中的部分組件伟叛、指令和管道私痹，以便其它模塊中的組件模板中可以使用它們。
* 導(dǎo)入其它帶有組件统刮、指令和管道的模塊紊遵，這些模塊中的元件都是本模塊所需的。
* 提供一些供應(yīng)用中的其它組件使用的服務(wù)侥蒙。
@NgModule 裝飾器：
-
@NgModule 裝飾器表明 AppModule 是一個 NgModule 類暗膜。 @NgModule 獲取一個元數(shù)據(jù)對象，它會告訴 Angular 如何編譯和啟動本應(yīng)用鞭衩。元數(shù)據(jù)對象關(guān)鍵字段：
*declarations —— 聲明屬于這個模塊的組件学搜，指令,管道等等. 聲明后就可以在這個模塊中使用它們了.
*imports —— 導(dǎo)入需要依賴的一些其他的模塊，比如 BrowserModule 以獲取瀏覽器特有的服務(wù)论衍，比如 DOM 渲染瑞佩、無害化處理和位置（location）。
*providers —— 各種共用的服務(wù)坯台。
*bootstrap —— 指定了這個模塊啟動的時候應(yīng)該啟動的組件.當(dāng)然這些組件會被自動的加入到entryComponents中去钉凌，Angular 創(chuàng)建它并插入 index.html 宿主頁面。
IonicModule與IonicPageModule
了解了NgModule以后捂人，IonicModule與IonicPageModule就好解釋了御雕。
IonicModule是一個引導(dǎo)Ionic應(yīng)用程序的NgModule。
IonicPageModule是一個NgModule滥搭，它引導(dǎo)子IonicPage以設(shè)置路由酸纲。
回頭我們再好好看下@NgModule中的這些屬性：
- 模塊的聲明數(shù)組告訴Angular哪些組件屬于該模塊。
- 當(dāng)創(chuàng)建更多的組件時瑟匆，將它們添加到聲明中闽坡。如果您使用組件而不聲明它，則角返回一條錯誤消息。
- 聲明數(shù)組只接受可聲明的內(nèi)容：組件疾嗅、指令(directive)和管道(pipe)外厂。
- 聲明必須只屬于一個模塊。如果試圖在多個模塊中聲明同一個類代承，則編譯器會發(fā)出錯誤汁蝶。
- 這些已聲明的類在模塊中是可見的，但在不同模塊中的組件是不可見的论悴，除非它們是從這個模塊導(dǎo)出掖棉，而另一個模塊導(dǎo)入這個模塊。
- 這些組件將會在這個模塊定義的時候進行編譯 膀估， Angular會為每一個組件創(chuàng)建一個ComponentFactory然后把它存儲在ComponentFactoryResolver
- There are two main kinds of entry components:
- The bootstrapped root component.
- A component you specify in a route definition.
- Angular 必須加載的組件是入口組件
- 引導(dǎo)組件是在引導(dǎo)過程(應(yīng)用程序啟動)中加載到DOM的入口組件幔亥。其他入口組件通過其他方式動態(tài)加載，例如使用路由器察纯。
- 大多數(shù)應(yīng)用開發(fā)者都不需要把組件添加到 entryComponents 中帕棉。
- Angular 會自動把恰當(dāng)?shù)慕M件添加到入口組件中。 列在 @NgModule.bootstrap 中的組件會自動加入饼记。 由路由配置引用到的組件會被自動加入香伴。 用這兩種機制添加的組件在入口組件中占了絕大多數(shù)。
- the root component that Angular creates and inserts into the index.html host web page.
- @NgModule.bootstrap 屬性告訴編譯器這是一個入口組件握恳，同時它應(yīng)該生成一些代碼來用該組件引導(dǎo)此應(yīng)用。
ionic關(guān)鍵之頁面：IonicPage
- Ionic 頁面基于url注冊和顯示頁面詳情捺僻，當(dāng)頁面被NavController推出來的時候乡洼，URL將被更新，以匹配到此頁面的路徑匕坯。
- 與傳統(tǒng)的web應(yīng)用程序不同束昵，url在Ionic應(yīng)用程序中不指定導(dǎo)航。相反葛峻，url幫助我們鏈接到特定的內(nèi)容片段锹雏。當(dāng)我們導(dǎo)航時，會更新當(dāng)前URL术奖。
- 我們將我們的URL系統(tǒng)稱為深層鏈接系統(tǒng)礁遵，而不是路由器，以鼓勵I(lǐng)onic開發(fā)人員將URL視為面包屑(內(nèi)容片段)采记，而不是真正的導(dǎo)航佣耐。
ionic3.x懶加載實現(xiàn)：
官方介紹在這里
懶加載是ionic3.x的新特性，Lazy Loading 可以在初始化時只加載一些必要的代碼唧龄，非必要的代碼分離出來在需要加載的時候再加載之兼砖，理論上能讓應(yīng)用加快一定的啟動速度。
下面以MyPage的加載為例，懶加載的實現(xiàn)：
第一步：設(shè)置深度鏈接: IonicPageModule中添加此頁面讽挟，IonicPageModule.forChild用于導(dǎo)入頁面模塊
@NgModule({
declarations: [ MyPage ],
imports: [
IonicPageModule.forChild(MyPage)
],
entryComponents: [
MyPage
]
})
export class MyPageModule {}
第二步：將@IonicPage decorator添加到組件中懒叛。最簡單的用法是添加一個空的decorator:
@IonicPage()
@Component({
templateUrl: 'main.html'
})
export class MyPage {}
這將自動創(chuàng)建一個鏈接到MyPage組件，使用與類名稱相同的名稱:“MyPage”耽梅。@IonicPage() 等同于：@IonicPage({‘MyPage’})
@IonicPage decorator接受了一個DeepLinkMetadataType對象薛窥。此對象接受以下屬性:name, segment, defaultHistory, and priority.。所有這些都是可選的褐墅，但是可以用來創(chuàng)建復(fù)雜的導(dǎo)航鏈接拆檬。
第三步：使用這個名稱導(dǎo)航到該頁面了。例如:
@Component({
templateUrl: 'another-page.html’
})
export class c {
constructor(public navCtrl: NavController) {}
goToMyPage() {
// go to the MyPage component
this.navCtrl.push('MyPage');
}
}
