? ? ? ? 初學(xué)前端跨平臺(tái)，水平尚淺，如有錯(cuò)誤多多指教。
? ? ? ? 由于ionic包含在angular外層（或者可以理解為ionic為angular的一個(gè)擴(kuò)展套件 ?ps:對(duì)于手機(jī)跨平臺(tái)開發(fā)來說,cordova也可以理解為ionic的一個(gè)套件或者angular的套件之一，用來橋接前端頁(yè)面和手機(jī)原生功能），因此ionic項(xiàng)目有著和angular同樣的工程目錄結(jié)構(gòu)（如圖1）：
? ? ? ?其中,index會(huì)作為app或頁(yè)面應(yīng)用啟動(dòng)加載時(shí)的入口，一般會(huì)在其中對(duì)app的基本配置進(jìn)行聲明（如各類基本JS庫(kù)的引入，相關(guān)app在不同平臺(tái)的配置信息等(如angular的基本庫(kù)等，另外，cordova的配置也需要在這里進(jìn)行，且默認(rèn)ionic項(xiàng)目是沒有配置cordova的[印象中，詳細(xì)參考cordova配置教程]，需要手動(dòng)配置或通過cordova命令行命令生成項(xiàng)目)）。main.ts在項(xiàng)目build時(shí)會(huì)被typescript轉(zhuǎn)譯成main.js，且默認(rèn)聲明在index中，為啟動(dòng)應(yīng)用做準(zhǔn)備。main.ts中聲明了angular的啟動(dòng)模塊，也叫根模塊(即目錄中的app.module.ts)，由此開始是app的主要編程部分（使用typescript）。根模塊用來對(duì)app的主要組件及框架提供的已有功能進(jìn)行聲明，引入，也可以做一部分邏輯處理，之后再行詳述。app.component.ts，可以理解為根組件。下面詳細(xì)介紹app.component.ts。
? ? ? ?在原文中有這樣一句闡述：“我們是這樣寫 Angular 應(yīng)用的：用 Angular 擴(kuò)展語(yǔ)法編寫 HTML模板， 用組件類管理這些模板，用服務(wù)添加應(yīng)用邏輯， 用模塊打包發(fā)布組件與服務(wù)?！盿ngular4（或ionic3）的主要想法是，將項(xiàng)目應(yīng)用拆分為各類組件（或服務(wù)等，其實(shí)服務(wù)也可以叫理解為就是組件，只是缺少某些東西）。各類組件由.html和.scss或.css的文件與.ts文件一一對(duì)應(yīng)且相互結(jié)合，形成具有一定功能的基本組件（大至頁(yè)面，小至bar甚至botton等,由自己決定）。再由這些組件組成較大的模板，再根據(jù)app的相應(yīng)功能或需要聲明在根模塊中，由此組成一個(gè)可以使用的應(yīng)用。在這些組件中，有的通過組件內(nèi)的.ts文件中的方法(或函數(shù))調(diào)用，有的則通過頁(yè)面跳轉(zhuǎn)功能調(diào)用。總體上來說，angular4的項(xiàng)目就是由分散內(nèi)聚的功能組件組合而成。由使用者的使用需求去啟動(dòng)相應(yīng)功能（懶加載）。
? ? ? ?通過ionic3的CLI命令快速建立的自帶tabs（簽頁(yè)）項(xiàng)目源文件可以更明確的看到這個(gè)思路。首先在app.module.ts中，聲明項(xiàng)目需要引入的各個(gè)組件。如圖2:
? ? 其中，例如myApp,AboutPage.. 等等，均是子組件或子模塊。App應(yīng)用的功能均由這些組件或模塊組合實(shí)現(xiàn)。因此需要在根模塊中聲明才能使用。
? ? ? 在app.component.ts中（圖3），@Component()指明了根組件對(duì)應(yīng)的.html（展示）。constructor為MyApp實(shí)例化提供了基本的構(gòu)造方法。platform.ready().then()方法返回了系統(tǒng)平臺(tái)加載的信息。至此app的啟動(dòng)加載和準(zhǔn)備才算完成。同時(shí)由于Angular4會(huì)對(duì)組件類自動(dòng)進(jìn)行實(shí)例化（即自動(dòng)讀取constructor并實(shí)例化）,因此Myapp類也就隱藏的被實(shí)例化了。實(shí)例化的同時(shí)提供了一個(gè)變量rootPage，并為其賦值TabsPage。在文件頭，import {TabsPage}form '../pages/tabs/tabs' ，將文件tabs引入了根組件中。因此有必要觀察tabs。如圖4:
? ? ? Tabs中引入了三個(gè)類，分別是AboutPage,ContactPage 和 HomePage。并在類裝飾器中聲明了模板目標(biāo)，同時(shí)類tabspage中聲明了三個(gè)變量,一一對(duì)應(yīng)至.html中的<ion-tab>標(biāo)簽中。至此就講Homepage,Aboutpage等三個(gè)頁(yè)面和tabs綁定在了一起。[root]作為<ion-tab>的固定用法，可以理解為一個(gè)空白的tab容器（或向系統(tǒng)預(yù)先申請(qǐng)的一個(gè)空間，具體想了解可以去學(xué)習(xí)angular4有關(guān)屬性型指令的內(nèi)容），在需要加載時(shí)，才會(huì)具體加載指定的內(nèi)容，如三個(gè)tabTitle中的一個(gè)。
? ? ? 至此，可以理解，angular4（ionic3）應(yīng)用的構(gòu)成方式，即為將內(nèi)容獨(dú)立內(nèi)聚的組件一個(gè)個(gè)組合成需要的部分，再由用戶需求去調(diào)用。
