解剖Ionic 2 app。進(jìn)入項(xiàng)目創(chuàng)建的文件夾，這里有一個(gè)典型的Cordova項(xiàng)目結(jié)構(gòu)忧换，我們可以安裝原生插件，創(chuàng)建平臺(tái)定義工程文件向拆。
./src/index.html
src/index.html是app的主入口, 設(shè)置腳本和CSS亚茬，引導(dǎo)、啟動(dòng)我們的應(yīng)用浓恳。對(duì)于app的應(yīng)用刹缝，Ionic在HTML中尋找<ion-app>標(biāo)簽。
<ion-app></ion-app>
下面的代碼接近底部：
<script src="cordova.js"></script>
<script src="build/main.js"></script>
build/main.js
包含了Ionic颈将、Angular和App自己的JavaScript的綜合文件梢夯。cordova.js
本地開發(fā)時(shí)404，Cordova構(gòu)建過(guò)程中會(huì)注入你的項(xiàng)目吆鹤。
./src/
在src目錄中含有我們?cè)嫉奈唇?jīng)編譯的代碼厨疙。也是我們編寫Ionic 2 APP的主要工作目錄。當(dāng)我們運(yùn)行 Ionic serve疑务，我們?cè)趕rc目錄下的代碼編譯成瀏覽器可以理解的（當(dāng)前是ES5）正確JavaScript版本沾凄。這意味者我們可以使用TypeScript的高級(jí)特性，但是編譯會(huì)使用瀏覽器需要的低級(jí)版本知允。src/app/app.module.ts 是我們app的入口點(diǎn)撒蟀，接近文件頂部的地方，我們可以看到如下代碼：
@NgModule({
declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage],
imports: [IonicModule.forRoot(MyApp)],
bootstrap: [IonicApp],
entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage],
providers: []
})
export class AppModule {}
每個(gè)app都有一個(gè)根模塊控制應(yīng)用温鸽。這很像Ionic和Angular1的ng-app保屯。這同樣也是我們使用ionicBootstrap引導(dǎo)我們app的地方手负。
這個(gè)模塊中，我們?cè)O(shè)置跟組件到src/app/app.component.ts里面MyApp姑尺。這個(gè)我們的app加載的第一個(gè)組件竟终，通常這是用于其他組件加載的空殼。在app.component.ts中切蟋，我們?cè)O(shè)置了src/app/app.html的模版统捶，來(lái)看一下：
./src/app/app.html
這里是app中src/app/app.html的主要模版:
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
在這個(gè)模板中,我們建立一個(gè)ion-menu作為一個(gè)菜單,然后一個(gè)ion-nav組件作為主要內(nèi)容區(qū)域。ion-menu的[content]屬性綁定到本地變量ion-nav中的content,所以它知道它的動(dòng)作柄粹。
