摘要：安裝程序主要通過命令行工具來創建和開發，并使用來構建和部署為原生應用程序。基礎教程確保完成之前的安裝并測試啟動成功。

Ionic 2 程序主要通過Ionic命令行工具CLI來創建和開發，并使用Cordova來構建和部署為原生應用程序。也就是說我們需要先安裝一些工具來實現程序開發。

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

安裝 Ionic

npm install -g ionic

安裝 Cordova

npm install -g cordova

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

安裝完成后來創建你的第一個 Ionic 應用：

ionic start cutePuppyPics --v2

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

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

cd cutePuppyPics
ionic serve

對于那些為iOS和Android構建原生應用程序（大多數人），每個平臺都有一定的功能和安裝要求，才能充分利用Ionic和Cordova開發。

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

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

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

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

ionic start MyIonic2Project tutorial --v2

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

現在你可以cd到創建好的項目文件夾中，使用serve命令在瀏覽器中預覽你的應用。

cd MyIonic2Project/
ionic serve

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

讓我們來剖析一下Ionic 2應用，在我們創建的文件夾中，我們可以看到一個典型的Cordova項目結構。我們可以在其中安裝原生插件，并創建平臺特定的項目文件。

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

為了讓應用正常運作，Ionic 2 會在HTML中尋找標記。 在這個例子中，我們有：

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

cordova.js是Cordova應用的需求文件，我們在開發過程中這個文件將會提示404錯誤，這不需要擔心。Cordova將會在構建過程中自動注入這個文件。

build/polyfills.js 是在構建過程中自動生成的，我們不需要過多關注。

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

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

app.component.ts 是應用的入口文件。

在文件中我們能夠看到這樣的結構：

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

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

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

app.html里是我們應用的主模版：

  
    
      Pages
    
  

  
    
      
        {{p.title}}
      
    
  

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

接下來，我們來看看如何創建更多頁面并執行基本的導航。

現在我們對Ionic 2應用的布局有一個基本的掌握，讓我們來了解一下在應用中創建和導航到頁面的過程。
讓我們看一下app.html頁面的底部：

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

在app.component.ts中，MyApp組件在其構造函數中指定：

...
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設置成了HelloIonicPage ，所以HelloIonicPage將是在nav控制器中加載的第一個頁面。

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

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

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

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


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

  }
}

所有的頁面都會有一個類和一個關聯的模版。讓我們再看一下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
  

是這個頁面中導航欄的模版。當我們導航到這個頁面，導航欄的按鈕和標題作為頁面轉換的一部分進行過渡。

模板的其余部分是標準的Ionic代碼，用于設置我們的內容區域并輸出我們的歡迎信息。

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

讓我們來看一下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
    });
  }
}

此頁面將創建一個包含多個項目的基本列表頁面。

總的來說，這個頁面和我們之前看到的HelloIonicPage非常相似。 在下一節中，我們將學習如何導航到新頁面！

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

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

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

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

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

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

當涉及到URL，Ionic 2的工作方式有點不同于Ionic 1。不使用URL導航，可以確保我們可以總是回到一個頁面（例如應用程序啟動）。這意味著我們不只是限于使用href來導航。無論怎樣，我們仍然可以選擇在必要時使用網址導航到某個網頁。

到此你已經完成了Ionic 2基本教程，了解了Ionic 2并開始朝著掌握Ionic 2進發。有能力的話最好去Ionic官網閱讀完整的技術文檔。

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

掌握Angular2的基本原理和開發思路。

熟悉Ionic 2的所有Components和API。

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

祝在Ionic踩坑之路上越走越遠。