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