現(xiàn)在我們已經(jīng)基本知道了Ionic2 app的布局，接下來我們來走一遍在我們的app里創(chuàng)建和導(dǎo)航頁面的過程。

先看看src/app/app.html, 接近底部的地方有如下內(nèi)容：

<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

注意[root]屬性綁定。設(shè)置了ion-nav組件的根頁面或是第一個基本頁面。當(dāng)加載ion-nav是，rootPage變量引用的就是根頁面。

在 src/app/app.component.ts 里, MyApp 組件在它的構(gòu)造器中定義了他。:

...
import {HelloIonicPage} from '../pages/hello-ionic/hello-ionic';
...

export class MyApp {
  ...
  
  // make HelloIonicPage the root (or first) page
  rootPage: any = HelloIonicPage;
  pages: Array<{title: string, component: any}>;

    constructor(
      private platform: Platform,
      private menu: MenuController
    ) {
    ...
  }

  ...
}

我們可以看到rootPage設(shè)置為HelloIonicPage,因此HelloIonicPage將會是nav controller中加載的第一個頁面。讓我們來看一下。

創(chuàng)建頁面

接下來我們看看導(dǎo)入的HelloIonicPage 。在 src/pages/hello-ionic/目錄下，打開hello-ionic.ts文件。

你可能注意到每個頁面有一個目錄。在每個目錄中還有另外兩個同名的.html 和 .scss 文件。例如，在hello-ionic/里面有hello-ionic.ts, hello-ionic.html 和 hello-ionic.scss三個文件。盡管這不是必須的模式，但是這對組織代碼很有幫助。

下面,我們看到HelloIonicPage類。這將創(chuàng)建一個頁面,提供一個包含所有Ionic指令的Angular組件,加載使用Ionic的導(dǎo)航系統(tǒng)。請注意,因為頁面是動態(tài)加載,他們沒有選擇器:

import {Component} from '@angular/core';

@Component({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {}

所有頁面都有一個類,和一個關(guān)聯(lián)的模板的編譯。 我們看看 src/pages/hello-ionic/hello-ionic.html - 這個頁面的模版文件:

<ion-header>
  <ion-navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding class="getting-started">

  <h3>Welcome to your first Ionic app!</h3>

  <p>
    This starter project is our way of helping you get a functional app running in record time.
  </p>
  <p>
    Follow along on the tutorial section of the Ionic docs!
  </p>
  <p>
    <button primary menuToggle>Toggle Menu</button>
  </p>

</ion-content>

<ion-navbar>是這個頁面的導(dǎo)航條模版。當(dāng)我們導(dǎo)航到這個頁面，導(dǎo)航條上的按鈕和標(biāo)題作為頁面的一部分一起過渡過來。
余下的模版是標(biāo)準(zhǔn)的Ionic代碼設(shè)置內(nèi)容區(qū)域，打印歡迎信息。

創(chuàng)建附加頁面

創(chuàng)建附加頁面，我們只需要確保正確設(shè)置標(biāo)題和其他我們希望導(dǎo)航條顯示的東西。
我們再來看看src/pages/list/list.ts里面的內(nèi)容，你會發(fā)現(xiàn)定義了一個新的頁面：

import {Component} from "@angular/core";
import {NavController, NavParams} from 'ionic-angular';
import {ItemDetailsPage} from '../item-details/item-details';


@Component({
  templateUrl: 'build/pages/list/list.html'
})
export class ListPage {
  selectedItem: any;
  icons: string[];
  items: Array<{title: string, note: string, icon: string}>;

  constructor(private navCtrl: NavController, navParams: NavParams) {
    // If we navigated to this page, we will have an item available as a nav param
    this.selectedItem = navParams.get('item');

    this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
    'american-football', 'boat', 'bluetooth', 'build'];

    this.items = [];
    for(let i = 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
     });
  }
}

這個頁面創(chuàng)建了一個包含多個數(shù)據(jù)項的列表頁。總之，這個頁面和前面的HelloIonicPage 很相似。