完成Ionic安裝后，你可以創(chuàng)建第一個(gè)App了差导。本章內(nèi)容將指導(dǎo)你新建一個(gè)App被啼，添加一個(gè)頁(yè)面帜消，并且實(shí)現(xiàn)頁(yè)面間的導(dǎo)航。

build/main.js是自動(dòng)生成的浓体，實(shí)際上是把TypeScript轉(zhuǎn)成了普通的JavaScript泡挺。

cordova.js在本地開發(fā)的時(shí)候在瀏覽器中瀏覽會(huì)報(bào)404錯(cuò)誤，這個(gè)文件會(huì)在Cordova打包的時(shí)候自動(dòng)加到項(xiàng)目里命浴。

./src/

在src目錄里我們會(huì)找到原始的沒有經(jīng)過編譯的代碼娄猫，這也是我們的主要工作目錄。當(dāng)我們運(yùn)行ionic serve命令的時(shí)候生闲，在src/目錄下的文件會(huì)被轉(zhuǎn)譯成正確的瀏覽器能夠解釋的JavaScript版本（當(dāng)前是ES5）媳溺。這意味著我們可以使用高級(jí)的TypeScript，但是會(huì)編譯回瀏覽器需要的老版本的JavaScript碍讯。src/app/app.module.ts是App的入口悬蔽。

在文件底部我們會(huì)看到以下的代碼：

@NgModule({ declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage], imports: [IonicModule.forRoot(MyApp)], bootstrap: [IonicApp], entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage], providers: []})exportclassAppModule{}

每個(gè)App都有一個(gè)root module來(lái)控制應(yīng)用中其他的部分。如果你用過Ionic1和Angular1的話冲茸，有點(diǎn)類似ng-app屯阀。這也是我們使用ionicBootstrap來(lái)啟動(dòng)應(yīng)用的地方。

./src/app/app.html

src/app/app.html是主要的模板文件：

Pages{{p.title}}

在這個(gè)模板中轴术，我們使用了ion-menu來(lái)作為菜單难衰，使用ion-nav組件當(dāng)做主要的內(nèi)容區(qū)域。ion-menu的[content]屬性被綁定到ion-nav的本地變量content上逗栽，所以它能夠知道要顯示什么盖袭。

下面我們來(lái)看如何來(lái)創(chuàng)建新頁(yè)面并實(shí)現(xiàn)基本的導(dǎo)航。

4.添加頁(yè)面

現(xiàn)在我們對(duì)Ionic 2 App的布局有了一個(gè)基本的認(rèn)識(shí)彼宠，繼續(xù)來(lái)實(shí)現(xiàn)添加和導(dǎo)航頁(yè)面的功能鳄虱。

看一下src/app/app.html,在底部會(huì)看到以下代碼：

注意root屬性的綁定。對(duì)于ion-nav組件來(lái)說(shuō)凭峡，這是第一個(gè)或者說(shuō)是“根”頁(yè)面拙已。當(dāng)ion-nav組件載入時(shí)，組件引用的rootPage變量將會(huì)作為根頁(yè)面被載入摧冀。

在src/app/app.component.ts,MyApp組件在構(gòu)造函數(shù)里指定了這個(gè)變量：

...import {HelloIonicPage}from'../pages/hello-ionic/hello-ionic';...exportclassMyApp{ ...// make HelloIonicPage the root (or first) pagerootPage: any = HelloIonicPage; pages:Array<{title: string, component: any}>;constructor( ? private platform: Platform, ? private menu: MenuController ) { ... } ...}

我們看到rootPage被設(shè)置為HelloIonicPage倍踪，所以HelloIonicPage將是nav controller第一個(gè)載入的頁(yè)面系宫。

創(chuàng)建一個(gè)頁(yè)面

接下來(lái)，我們看一下我們導(dǎo)入的HelloIonicPage頁(yè)面建车。在src/pages/hello-ionic/目錄下扩借，打開hello-ionic.ts。

你可以注意到每個(gè)頁(yè)面都有自己的目錄缤至，每個(gè)目錄中都可以看到具有相同名字的.html和.scss文件潮罪。例如在hello-ionic/目錄我們可以看到有hello-ionic.ts,hello-ionic.html, 和hello-ionic.scss。雖然這種模式不是必須的领斥，但這有助于項(xiàng)目文件的良好組織嫉到。

接下來(lái)我們看到HelloIonicPage這個(gè)類。這個(gè)類創(chuàng)建了一個(gè)Page戒突，即Angular中的Component（組件）屯碴，并且會(huì)載入Ionic的導(dǎo)航系統(tǒng)。注意因?yàn)镻age是被動(dòng)態(tài)載入的膊存，所以他們不需要selector：

import{Component}from'@angular/core';@Component({ templateUrl:'build/pages/hello-ionic/hello-ionic.html'})exportclassHelloIonicPage{}

所有的Page都是一個(gè)類导而，并且關(guān)聯(lián)到對(duì)應(yīng)的模板文件上「羝椋看一下src/pages/hello-ionic/hello-ionic.html今艺，即這個(gè)頁(yè)面的模板文件：

Hello Ionic

Welcome to your first Ionic app!

This starter project is our way of helping you get a functional app running in record time.

Follow along on the tutorial section of the Ionic docs!

Toggle Menu

是navigation bar的模板。當(dāng)我們導(dǎo)航到頁(yè)面時(shí)爵卒，navigation bar的按鈕和頁(yè)面標(biāo)題將會(huì)作為整個(gè)頁(yè)面動(dòng)畫的一部分展現(xiàn)出來(lái)虚缎。

模板其余的部分是標(biāo)準(zhǔn)的Ionic代碼，設(shè)置了內(nèi)容區(qū)域和輸出我們的歡迎信息钓株。

創(chuàng)建一個(gè)新頁(yè)面

創(chuàng)建這個(gè)新頁(yè)面实牡，我們并不需要做很多配置，只需要確保設(shè)置好navigation bar要展示的標(biāo)題就可以了轴合。

看一下src/pages/list/list.ts的內(nèi)容创坞，這里定義了一個(gè)新頁(yè)面：

import{ Component }from'@angular/core';import{ NavController, NavParams }from'ionic-angular';import{ ItemDetailsPage }from'../item-details/item-details';@Component({ ? ? ? ?templateUrl:'list.html'})exportclassListPage{ ? ?selectedItem: any; ? ?icons: string[]; ? ?items:Array<{title: string, note: string, icon: string}>;constructor(public navCtrl: NavController, public navParams: NavParams) {// If we navigated to this page, we will have an item available as a nav paramthis.selectedItem = navParams.get('item');this.icons = ['flask','wifi','beer','football','basketball','paper-plane','american-football','boat','bluetooth','build'];this.items = [];for(leti =1; i <11; i++) {this.items.push({ ? ? ? ? ? ?title:'Item '+ i, ? ? ? ? ? ?note:'This is item #'+ i, ? ? ? ? ? ?icon:this.icons[Math.floor(Math.random() *this.icons.length)] ? ? ? ?}); ? ?} } ? ?itemTapped(event, item) {this.navCtrl.push(ItemDetailsPage, { ? ? ? ? ? ?item: item ? ? ? ?}); ? ?}}

這個(gè)頁(yè)面將會(huì)創(chuàng)建一個(gè)基本的列表頁(yè)面，包含一些數(shù)字受葛。

大致上這個(gè)頁(yè)面跟我們之前看的HelloIonicPage非常類似题涨。接下來(lái)我們看一下如何導(dǎo)航到這個(gè)新頁(yè)面。

5.導(dǎo)航到頁(yè)面

回憶一下上個(gè)章節(jié)总滩，我們?cè)贚istPage類里有一些下面的代碼：

itemTapped(event, item) {this.navCtrl.push(ItemDetailsPage, {? ? ? ? ?item: item? ? ?}); }

你也許注意到我們引用了ItemDetailPage纲堵。我們用以下的代碼將其import到app/pages/list/list.ts里：

import {ItemDetailsPage} from '../item-details/item-details';

當(dāng)保存文件后，ionic serve進(jìn)程會(huì)自動(dòng)重新編譯以應(yīng)用新的更改闰渔，并自動(dòng)刷新瀏覽器席函。重新看一下瀏覽器中的頁(yè)面，當(dāng)點(diǎn)擊一個(gè)項(xiàng)時(shí)冈涧，它將會(huì)導(dǎo)航到詳情頁(yè)面向挖。注意菜單按鈕被一個(gè)返回按鈕代替了蝌以，這是Ionic遵循的一種原生App的導(dǎo)航方式，當(dāng)然這是可以被配置的何之。

工作原理

Ionic 2的導(dǎo)航像一個(gè)簡(jiǎn)單的棧，我們使用push方法來(lái)導(dǎo)航到新頁(yè)面咽筋，將其放在棧的頂部溶推，并顯示一個(gè)返回按鈕。對(duì)于返回奸攻，我們使用pop方法將其從棧中移除蒜危。因?yàn)槲覀冊(cè)跇?gòu)造函數(shù)中設(shè)置了this.navCtrl屬性，我們可以調(diào)用this.navCtrl.push()方法睹耐，來(lái)導(dǎo)航到一個(gè)新的頁(yè)面辐赞。我們還可以將一個(gè)object傳遞給將要導(dǎo)航過去的頁(yè)面。使用push方法導(dǎo)航到新頁(yè)面非常簡(jiǎn)單硝训，但I(xiàn)onic的導(dǎo)航系統(tǒng)是非常靈活的响委。可以從導(dǎo)航文檔處獲得更詳細(xì)的導(dǎo)航示例窖梁。

對(duì)于Url赘风，Ionic 2與Ionic 1是不同的。我們要確保我們可以返回到某個(gè)Page纵刘，所以一般不使用Url來(lái)進(jìn)行導(dǎo)航邀窃。當(dāng)然我們?cè)诒匾臅r(shí)候還是有辦法來(lái)使用Url導(dǎo)航的。

接下來(lái)

你已經(jīng)掌握了Ionic 2的入門知識(shí)假哎。你可以繼續(xù)學(xué)習(xí)Ionic 2的各種Component瞬捕，和關(guān)于硬件的Native APIs。