摘要：安裝程序主要通過命令行工具來創(chuàng)建和開發(fā)，并使用來構(gòu)建和部署為原生應(yīng)用程序?；A(chǔ)教程確保完成之前的安裝并測試啟動成功。

Ionic 2 程序主要通過Ionic命令行工具CLI來創(chuàng)建和開發(fā)，并使用Cordova來構(gòu)建和部署為原生應(yīng)用程序。也就是說我們需要先安裝一些工具來實現(xiàn)程序開發(fā)。

要創(chuàng)建 Ionic 2 項目，你需要安裝最新版本的 CLI 和 Cordova。在此之前你需要安裝最新版本的Node.js。點這里 下載安裝Node.js，然后繼續(xù)安裝Ionic CLI和Cordova來進行應(yīng)用程序開發(fā)：

安裝 Ionic

npm install -g ionic

安裝 Cordova

npm install -g cordova

命令前面可能需要添加sudo提權(quán)來進行全局安裝。

安裝完成后來創(chuàng)建你的第一個 Ionic 應(yīng)用：

ionic start cutePuppyPics --v2

cutePuppyPics可以替換成你的應(yīng)用程序名稱。--v2表示當(dāng)前生成的是 Ionic 2 版本的應(yīng)用，不添加則生成 Ionic 1 應(yīng)用。

創(chuàng)建完成后cd到你的程序目錄中，執(zhí)行ionic serve來啟動你的Ionic應(yīng)用，并確保測試在瀏覽器中能夠正常顯示：

cd cutePuppyPics
ionic serve

對于那些為iOS和Android構(gòu)建原生應(yīng)用程序（大多數(shù)人），每個平臺都有一定的功能和安裝要求，才能充分利用Ionic和Cordova開發(fā)。

對于iOS開發(fā)人員，請查看Cordova iOS平臺指南，并按照說明安裝或升級Xcode，并注冊開發(fā)人員帳戶，開始為iOS開發(fā)應(yīng)用程序。

對于Android開發(fā)人員，請查看Cordova Android平臺指南，并按照說明安裝SDK或Android Studio，開始為Android開發(fā)應(yīng)用程序。

確保完成之前的安裝并測試啟動成功。下面我們將啟動新的應(yīng)用程序，添加頁面，并在這些頁面之間導(dǎo)航等過程。 讓我們開始吧！

用start命令來創(chuàng)建一個新的Ionic 2應(yīng)用。別忘了添加--v2來指定這是一個 Ionic 2 的應(yīng)用程序。再添加一個tutorial參數(shù)，指定使用tutorial模版創(chuàng)建該應(yīng)用。這樣一個基于TypeScript的Ionic 2應(yīng)用就被成功創(chuàng)建了。

ionic start MyIonic2Project tutorial --v2

在這個過程中將會下載 Ionic 2 庫包，安裝所需的npm模塊，并為應(yīng)用配置好Cordova。如果在創(chuàng)建時不指定tutorial參數(shù)，ionic默認(rèn)使用 tabs模版來創(chuàng)建應(yīng)用。

現(xiàn)在你可以cd到創(chuàng)建好的項目文件夾中，使用serve命令在瀏覽器中預(yù)覽你的應(yīng)用。

cd MyIonic2Project/
ionic serve

如果成功啟動，你將看到上面這樣的歡迎界面。

讓我們來剖析一下Ionic 2應(yīng)用，在我們創(chuàng)建的文件夾中，我們可以看到一個典型的Cordova項目結(jié)構(gòu)。我們可以在其中安裝原生插件，并創(chuàng)建平臺特定的項目文件。

src/index.html是 Ionic 2 應(yīng)用的主入口文件，其目的是設(shè)置腳本和CSS引導(dǎo)，然后開始運行我們的應(yīng)用程序。 我們不會在這個文件中花費大量的時間。

為了讓應(yīng)用正常運作，Ionic 2 會在HTML中尋找標(biāo)記。 在這個例子中，我們有：

并且在下方我們還能看到這樣的腳本引用：

cordova.js是Cordova應(yīng)用的需求文件，我們在開發(fā)過程中這個文件將會提示404錯誤，這不需要擔(dān)心。Cordova將會在構(gòu)建過程中自動注入這個文件。

build/polyfills.js 是在構(gòu)建過程中自動生成的，我們不需要過多關(guān)注。

build/main.js是一個包含了Ionic, Angular和你的JS腳本的文件。

在app文件夾中能找到我們的預(yù)編譯代碼。這是Ionic 2應(yīng)用程序的大部分工作起始的地方。當(dāng)我們運行ionic serve時，app中的代碼將被編譯成當(dāng)前瀏覽器能夠執(zhí)行的javascript版本（當(dāng)前是ES5）。也就是說我們可以使用TypeScript或更高級別的 ES6+ 進行開發(fā)，而在編譯時會自動降級為瀏覽器可識別的版本。

app.component.ts 是應(yīng)用的入口文件。

在文件中我們能夠看到這樣的結(jié)構(gòu)：

@Component({
  templateUrl: "app.html"
})
export class MyApp {
  constructor(
  )
}

每個應(yīng)用程序都有一個根組件，用于控制應(yīng)用程序的其余部分。這跟Ionic 1和Angular 1中的ng-app非常相似。原先的啟動配置被放倒了app.module.ts文件中。

在這個組件中，我們設(shè)置了模版文件app.html，下面我們來看一下這個文件。

app.html里是我們應(yīng)用的主模版：

  
    
      Pages
    
  

  
    
      
        {{p.title}}
      
    
  

在這個模板中，我們設(shè)置了一個ion-menu作為側(cè)面菜單，然后一個ion-nav組件作為主要內(nèi)容區(qū)域。ion-menu菜單的[content]屬性綁定到了我們ion-nav的本地變量content上。所以我們知道哪里會發(fā)生動作變化。

接下來，我們來看看如何創(chuàng)建更多頁面并執(zhí)行基本的導(dǎo)航。

現(xiàn)在我們對Ionic 2應(yīng)用的布局有一個基本的掌握，讓我們來了解一下在應(yīng)用中創(chuàng)建和導(dǎo)航到頁面的過程。
讓我們看一下app.html頁面的底部：

注意[root]屬性綁定。 這本質(zhì)上是設(shè)置了ion-nav組件的“root”頁面。 當(dāng)ion-nav加載時，變量rootPage引用的組件將是根頁面。

在app.component.ts中，MyApp組件在其構(gòu)造函數(shù)中指定：

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

export class MyApp {
  ...
  
  // make HelloIonicPage the root (or first) page
  rootPage: any = HelloIonicPage;

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

  ...
}

我們看到rootPage設(shè)置成了HelloIonicPage ，所以HelloIonicPage將是在nav控制器中加載的第一個頁面。

接下來，讓我們看看我們正在導(dǎo)入的HelloIonicPage。在src/app/pages/hello-ionic/文件夾中，找到并打開hello-ionic.ts。

你可能已經(jīng)注意到每個頁面都有自己的文件夾，該文件夾以頁面命名。 在每個文件夾內(nèi)，我們還可以看到一個.html和一個.scss同名文件。 例如，在hello-ionic/我們將找到hello-ionic.ts，hello-ionic.html和hello-ionic.scss。 雖然使用這種模式不是必需的，但它可以有助于保持項目的組織結(jié)構(gòu)。

然后我們找到HelloIonicPage類，在創(chuàng)建的頁面中提供了一個Angular組件和已經(jīng)使用Ionic的導(dǎo)航系統(tǒng)加載的所有Ionic指令。注意，因為頁面是動態(tài)加載的，所以它們沒有選擇器（selector ）：

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


@Component({
  templateUrl: "hello-ionic.html"
})
export class HelloIonicPage {
  constructor() {

  }
}

所有的頁面都會有一個類和一個關(guān)聯(lián)的模版。讓我們再看一下src/app/pages/hello-ionic/hello-ionic.html，這是一個模版頁面：

  
    
      
    
    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
  

是這個頁面中導(dǎo)航欄的模版。當(dāng)我們導(dǎo)航到這個頁面，導(dǎo)航欄的按鈕和標(biāo)題作為頁面轉(zhuǎn)換的一部分進行過渡。

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

要創(chuàng)建一個其他的頁面，我們不需要太多的事情，只要確保配置標(biāo)題和我們期望在導(dǎo)航欄顯示的東西即可。

讓我們來看一下src/app/pages/list/list.ts。在這里，你會看到一個新的頁面被定義：

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

import { NavController, NavParams } from "ionic-angular";

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


@Component({
  templateUrl: "list.html"
})
export class ListPage {
  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 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)建一個包含多個項目的基本列表頁面。

總的來說，這個頁面和我們之前看到的HelloIonicPage非常相似。 在下一節(jié)中，我們將學(xué)習(xí)如何導(dǎo)航到新頁面！

回想上一部分我們在ListPage類中有一個函數(shù)，看起來像這樣：

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

你可能已經(jīng)注意到我們引用了一個ItemDetailsPage。這是一個包含在教程啟動器中的頁面。我們要在list.ts中導(dǎo)入它，我們可以這樣導(dǎo)入：

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

保存好之后。你會發(fā)現(xiàn)ionic serve將重新編譯應(yīng)用程序并刷新瀏覽器，你的修改將會出現(xiàn)在程序中。讓我們在瀏覽器中重新訪問我們的應(yīng)用程序，當(dāng)我們點擊一個項目，它將導(dǎo)航到項目詳細(xì)信息頁面！請注意，菜單切換按鈕將被替換為后退按鈕。這是Ionic遵循的原生風(fēng)格，但可以按需配置。

Ionic 2 導(dǎo)航的工作原理就像一個簡單的堆棧，我們通過push將一個頁面推到堆棧的頂端，這會讓我們的應(yīng)用前進一步并顯示一個返回按鈕。反之，我們也可以pop掉一個頁面。因為我們在構(gòu)造函數(shù)中設(shè)置了this.navCtrl，我們可以調(diào)用this.navCtrl.push(),并傳遞我們要導(dǎo)航到的頁面。我們還可以傳遞一個數(shù)據(jù)對象給我們想要導(dǎo)航到的頁面。使用push導(dǎo)航到新頁面很簡單，而且Ionic的導(dǎo)航系統(tǒng)非常的靈活。你可以查看導(dǎo)航文檔找到更多高級導(dǎo)航示例。

當(dāng)涉及到URL，Ionic 2的工作方式有點不同于Ionic 1。不使用URL導(dǎo)航，可以確保我們可以總是回到一個頁面（例如應(yīng)用程序啟動）。這意味著我們不只是限于使用href來導(dǎo)航。無論怎樣，我們?nèi)匀豢梢赃x擇在必要時使用網(wǎng)址導(dǎo)航到某個網(wǎng)頁。

到此你已經(jīng)完成了Ionic 2基本教程，了解了Ionic 2并開始朝著掌握Ionic 2進發(fā)。有能力的話最好去Ionic官網(wǎng)閱讀完整的技術(shù)文檔。

建議熟悉一下TypeScript的基本語法和使用，包括@types使用和d.ts編寫。

掌握Angular2的基本原理和開發(fā)思路。

熟悉Ionic 2的所有Components和API。

了解Cordova的使用方法和插件。

祝在Ionic踩坑之路上越走越遠(yuǎn)。