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

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

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

安裝 Ionic

npm install -g ionic

安裝 Cordova

npm install -g cordova

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

安裝完成后來創(chuàng)建你的第一個(gè) 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來啟動(dòng)你的Ionic應(yīng)用，并確保測試在瀏覽器中能夠正常顯示：

cd cutePuppyPics
ionic serve

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

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

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

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

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

ionic start MyIonic2Project tutorial --v2

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

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

cd MyIonic2Project/
ionic serve

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  
    
      Pages
    
  

  
    
      
        {{p.title}}
      
    
  

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

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

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

注意[root]屬性綁定。 這本質(zhì)上是設(shè)置了ion-nav組件的“root”頁面。 當(dāng)ion-nav加載時(shí)，變量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控制器中加載的第一個(gè)頁面。

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

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

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

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


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

  }
}

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

  
    
      
    
    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
  

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

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

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

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

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)建一個(gè)包含多個(gè)項(xiàng)目的基本列表頁面。

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

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

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

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

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

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

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

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

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

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

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

熟悉Ionic 2的所有Components和API。

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

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