開發工具--Visual Studio Code

點選開啟資料夾--開啟建立的app的目錄可檢視目錄結構

ionic目錄結構

主要是看SRC目錄：（其他作為了解）

pages中about、content、home目錄下的html就是app顯示的html；<ion-title>--標題，<ion-content>--內容

*app--app.module.ts

/**根模組--告訴ionic如何組裝應用 */
//引入ionic、angular的系統模組
import { NgModule,ErrorHandler }from'@angular/core';
import { BrowserModule }from'@angular/platform-browser';
import { IonicApp,IonicModule,IonicErrorHandler }from'ionic-angular';

//引入根元件
import { MyApp }from'./app.component';

//引入自定義的元件(頁面)
import { AboutPage }from'../pages/about/about';
import { ContactPage }from'../pages/contact/contact';
import { HomePage }from'../pages/home/home';
import { TabsPage }from'../pages/tabs/tabs';

//打包成app後配置啟動畫面、導航條等的服務--忽略
import { StatusBar }from'@ionic-native/status-bar';
import { SplashScreen }from'@ionic-native/splash-screen';
@NgModule({
    declarations: [//宣告元件
        MyApp,
        AboutPage,
        ContactPage,
        HomePage,
        TabsPage
    ],
    imports: [//引入的模組（依賴的模組）
        BrowserModule,
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],//啟動模組
    entryComponents: [//配置不會在模板中使用的元件
        MyApp,
        AboutPage,
        ContactPage,
        HomePage,
        TabsPage
    ],
    providers: [//配置服務
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler,useClass:IonicErrorHandler}
    ]
})

export classAppModule {}