Ionic2 src檔案夾分析__ionic2

在Ionic2中src檔案夾是我們主要的工作區域，我們看下這個檔案夾的結構： app assets pages theme

一共四個檔案夾。其中主要的兩個檔案夾就是app和pages

app是ionic 應用的根目錄，pages則是子組建。
我們先看app下面的五個檔案。
app.scss用於設定全域css樣式，一般我們都不用，所以沒啥好說的。
app.module.ts 我們稱為根模組，除非你已經牛逼到可以寫超大型應用，一般情況只有唯一一個根模組，所有的模組都會注入到這個模組裡。我們先分析這裡面都有些什麼鬼。

上面就是全部架構；

我們首先在Angular2的核心庫中引入NgModule和ErrorHandler模組用於，Angular2的正常工作和錯誤處理機制。
然後在Ionic2的核心庫中引入IonicApp,IonicModule,IonicErrorHandler三個模組，用於IonicApp,模組，錯誤處理機制。

引入根組件

引入子組件

注意上圖，這是在ionic-native也就是ionic2中的原生庫（內建）中引入status-bar和splash-screen服務，這個知識點會在其他文章中細說。

在上面我們已經說了，這個檔案是一個根模組，在上面我們也已經引入了angular2的NgModule機制.什麼意思。也就是所有引入的根模組/子模組/服務都得注入進來。否則，一切都都白忙活，這就如同一個插線板。
declarations和entryComponents數組內部一模一樣，把你的根組件和子組件（Component）都注入進來。
imports告訴IonicModule這個Ionic根模組你這個應用的根組件是哪個。這個案例的根組件就是MyApp.bootstrap是告訴你的Angular2哪個是你Ionic的根組件。這個案例中就IonicApp. 所以這個邏輯就是 MyApp < IonicModule < IonicApp < Angular2.

providers用於服務注入，把我們剛才引入進來的那幾個服務包引入進來就好了。

好了，到了這裡我們一個完整的根模組就已經完成了，我們只需把這個AppModule根模組通過class暴露出去就好了。那麼問題來了，這是暴露給誰的。答案就是main.ts這個檔案。

這個檔案只有三行代碼，它引入了angular2中的platformBrowserDynamic這個模組，告訴angular2AppModule是所有一切的核心。

到了這裡我們應該能弄清我們自己的應用同Ionic以及Angular2之間的關係了，我就回到我們這個應用本身。

無論是angular2還是Ionic2應用的根組件的名稱都是app.component.ts。下面就是這個檔案內部的代碼：

還是一行行的分析：

我們分別從angular2核心庫引入components模組，ionic核心庫中引入Platform平台服務，以及從ionic原生庫中引入狀態條和開場白服務，我在這裡說下，這兩個服務都是IOS和android原生的功能，Ionic的服務是一種模仿原生應用。

引入子組件TabsPage,其實就是導航條組件，沒啥好說的。其他文章會細說。

我們在@Component中聲明模板是app.html，下面就是app.html

這裡，很多人估計就懵了，什麼鬼。為什麼一個根組件的模板裡只有一個<ion-nav>標籤。[root]又是什麼鬼。這其實都是ionic中的內建api，在這裡暫時記住這就是一個導航條的外殼，裡麵包著rootPage這個值就好了。

在這裡我們就可以將整個app的根組件打包出去了，rootPage這個值的類型可以是any,它就是我們上面引入的TabsPage這個子組件。這樣我們在TabsPage這個子組件中建立的導航功能就可以渲染到了根組件中，也就是無論什麼時候在這個應用中這個導航永遠存在。

constructor函數是我們要講的一個重點，它類似於angular1中controller的回呼函數，也就是說當MyApp這個根組件在被外部調用後，它所注入的服務項都會挨個運行。

platform.ready()表示ionic全部載入完畢，平台已經就位。在then()函數的回呼函數中，狀態條進入預設樣式狀態，而那個開啟應用畫面就會隱藏。

好了，到這裡，有關於ionic2的src檔案夾中的檔案就全部講解完畢。
至於pages目錄裡的檔案和app檔案夾中的根組件基本一樣，可以自行瞭解。