[注]轉載自：http://blog.csdn.net/jasonzds/article/details/53821184
1環境搭建
一年前研究混合框架，初步確定了四種方案給公司選擇，ionic，hbuilder，wex5,react-native這四個框架各有優缺點，ionic和react－native是國外框架，相對好一點，文檔更新很快，就不一一說了，大概的思路都是一樣的，js邏輯實現，同時調用原生功能，h5，css3 UI實現，其實他們都有自己的ui框架，當時選擇了國內的hbuiler，開發了三款應用，iOS和Android都有，今天同樣公司發展的改變，整體框架都變了，ionic2框架重新提上了方案，決定用ionic2開發hybird應用(具體原因你猜)，后續會有系列的博客分享。
安裝ionic最新版本
ionic官網地址：http://ionicframework.com
1.准備工作
下載 Node.js（下載包），WebStorm（IDE，編寫代碼，瀏覽器調試）,JDK（webstorm 運行環境），Android SDK(Android編譯)
Ionic 2 程序主要通過Ionic命令行工具 CLI 來創建和開發，並使用 Cordova 來構建和部署為原生應用程序。也就是說我們需要先安裝一些工具來實現程序開發
要創建 Ionic 2 項目，你需要安裝最新版本的 CLI 和 Cordova 。在此之前你需要安裝最新版本的 Node.js 。點這里 下載安裝 Node.js ，然后繼續安裝 Ionic CLI 和 Cordova 來進行應用程序開發：
命令前面可能需要添加 sudo 提權來進行全局安裝。
安裝 Ionic
npm install -g ionic
安裝 Cordova
npm install -g cordova
查看ionic版本
ionic –v
查看cordova版本
cordova –v
更新ionic和cordova包
npm update -g cordova ionic
更新已建ionic項目中的js類庫，命令行中先進入項目所在目錄
ionic lib update
展現ionic項目結果（顯示在iOS和Android上的樣式）
ionic serve –lab
創建項目
ionic start myApp blank（空項目）
ionic start myApp tabs（帶導航條）
ionic start myApp sidemenu（帶側滑菜單）
添加android/ios平台
ionic platform add android/ios（添加android平台/ios）
ionic platform remove android/ios（移除android平台/ios）
ionic build android/ios（編譯項目apk,ipa）
ionic emulate android/ios（運行項目apk 手機連接在手機運行 模擬器連接在模擬器運行）
生成android／ipa安裝包(生成后apk／ipa的存放路徑在終端種可以看到)
ionic build android/ios
ionicrun android/ios （相當於build + emulate）
ionicserve （開啟服務調試）
指明一個外部的ip地址，可以讓外部用戶查看。
ionic serv --address 68.52.96.10
使用設備運行應用，如果無設備可用將自動使用模擬器
ionic run ios [options]
//options的選項包括：
-l livereload， 實時刷新變化。
-c 打印app里的console
-s 打印設備的console
-p 指定設備的端口
-i 指定livereload的重刷端口
--debug|--release
//當處於livereload模式時，使用r重啟客戶端，使用 g your_url 跳轉到指定url， 使用c啟動或關閉console，使用s啟動或關閉設備的console， 使用q退出。
//查看系統情況
ionic info
安卓自帶瀏覽器性能不好，可以強行安裝一個殼，這將安裝一個Chromium內核。
ionic browser add crosswalk
查看可用的browser
ionic browser list
刪除安裝的browser
ionic browser revert android
2 項目目錄分析
安裝完成后來創建你的第一個 Ionic 應用：
ionic start MenuDemo sidemenu --v2
MenuDemo可以替換成你的應用程序名稱。 --v2 表示當前生成的是 Ionic 2 版本的應用，不添加則生成 Ionic 1 應用。
創建完成后 cd 到你的程序目錄中，執行 ionic serve 來啟動你的Ionic應用，並確保測試在瀏覽器中能夠正常顯示：
cd MenuDemo
ionic serve
瀏覽器運行起來是這樣的
項目結構
讓我們來剖析一下Ionic 2應用，在我們創建的文件夾中，我們可以看到一個典型的Cordova項目結構。我們可以在其中安裝原生插件，並創建平台特定的項目文件。
src/index.html
是 Ionic 2 應用的主入口文件，其目的是設置腳本和CSS引導，然后開始運行我們的應用程序。 我們不會在這個文件中花費大量的時間。
為了讓應用正常運作，Ionic 2 會在HTML中尋找 <ion-app> 標記。 在這個例子中，我們有：
<ion-app></ion-app>
並且在下方我們還能看到這樣的腳本引用：
<script src="cordova.js"></script>
<script src="build/polyfills.js"></script>
<script src="build/main.js"></script>
• cordova.js 是Cordova應用的需求文件，我們在開發過程中這個文件將會提示404錯誤，這不需要擔心。Cordova將會在構建過程中自動注入這個文件。
• build/polyfills.js 是在構建過程中自動生成的，我們不需要過多關注。
build/main.js 是一個包含了Ionic, Angular和你的JS腳本的文件。
./src/app/app.component.ts
在 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，下面我們來看一下這個文件。
./src/app/app.html
app.html 里是我們應用的主模版：
<ion-menu [content]="content"> <ion-header> <ion-toolbar> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header>
<ion-content> <ion-list> <button menuClose ion-item*ngFor="let p of pages" (click)="openPage(p)"> {{p.title}} </button> </ion-list> </ion-content> </ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with sidemenus --> <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
在這個模板中，我們設置了一個 ion-menu 作為側面菜單，然后一個 ion-nav 組件作為主要內容區域。 ion-menu 菜單的 [content] 屬性綁定到了我們 ion-nav 的本地變量 content 上。所以我們知道哪里會發生動作變化。
接下來，我們來看看如何創建更多頁面並執行基本的導航。
添加頁面
現在我們對Ionic 2應用的布局有一個基本的掌握，讓我們來了解一下在應用中創建和導航到頁面的過程。
讓我們看一下 app.html 頁面的底部：
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
注意 [root] 屬性綁定。 這本質上是設置了ion-nav組件的“root”頁面。 當ion-nav加載時，變量 rootPage 引用的組件將是根頁面。
在 app.component.ts 中， MyApp 組件在其構造函數中指定：
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = Page1;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform) {
this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Page One', component: Page1 },
{ title: 'Page Two', component: Page2 }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
我們看到 rootPage設置成了 Page1，所以 Page1將是在nav控制器中加載的第一個頁面。
而page1指向的頁面是import { Page1 } from '../pages/page1/page1';
創建一個頁面
接下來，讓我們看看我們正在導入的 Page1。在 src/ pages/page1/page1 文件夾中，找到並打開 page1.ts 。
你可能已經注意到每個頁面都有自己的文件夾，該文件夾以頁面命名。 在每個文件夾內，我們還可以看到一個.html和一個.scss同名文件。 例如，在 page1 / 我們將找到 page1.ts ， page1 html 和 page1.scss 。 雖然使用這種模式不是必需的，但它可以有助於保持項目的組織結構。
然后我們找到 page1類，在創建的頁面中提供了一個Angular組件和已經使用Ionic的導航系統加載的所有Ionic指令。注意，如果頁面是動態加載的，那么它們沒有選擇器（ selector ）：
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-page1',
templateUrl: 'page1.html'
})
export class Page1 {
constructor(public navCtrl: NavController)
}
}
所有的頁面都會有一個類和一個關聯的模版。讓我們再看一下 src/ pages/ page1/ page1.html ，這是一個模版頁面：
<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Page One</ion-title> </ion-navbar> </ion-header> <ion-content padding> <h3>Ionic Menu Starter</h3> <p> If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way. </p> <button ion-button secondary menuToggle>Toggle Menu</button> </ion-content>
<ion-navbar>是這個頁面中導航欄的模版。當我們導航到這個頁面，導航欄的按鈕和標題作為頁面轉換的一部分進行過渡。
模板的其余部分是標准的Ionic代碼，用於設置我們的內容區域並輸出我們的歡迎信息。
創建其他頁面
要創建一個其他的頁面，我們不需要太多的事情，只要確保配置標題和我們期望在導航欄顯示的東西即可。
讓我們來看一下 src/pages/page2/ page2.ts。在這里，你會看到一個新的頁面被定義：
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
selector: 'page-page2',
templateUrl: 'page2.html'
})
export class Page2 {
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');
// Let's populate this page with some filler content for funzies
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) {
// That's right, we're pushing to ourselves!
this.navCtrl.push(Page2, {
item: item
});
}
}
此頁面將創建一個包含多個項目的基本列表頁面。
總的來說，這個頁面和我們之前看到的 Page1非常相似。在下一節中，我們將學習如何導航到新頁面！
導航到頁面
回想上一部分我們在 Page2類中有一個函數，看起來像這樣：
itemTapped(event, item) { // That's right, we're pushing toourselves! this.navCtrl.push(Page2, { item: item }); }
你可能已經注意到我們引用了一個page2。自己跳到自己，這是一個包含在教程啟動器中的頁面。
保存好之后。你會發現 ionic serve將重新編譯應用程序並刷新瀏覽器，你的修改將會出現在程序中。讓我們在瀏覽器中重新訪問我們的應用程序，當我們點擊一個項目，它將導航到項目詳細信息頁面！請注意，菜單切換按鈕將被替換為后退按鈕。這是Ionic遵循的原生風格，但可以按需配置。
工作原理
Ionic 2導航的工作原理就像一個簡單的堆棧，我們通過push將一個頁面推到堆棧的頂端，這會讓我們的應用前進一步並顯示一個返回按鈕。反之，我們也可以pop掉一個頁面。因為我們在構造函數中設置了this.navCtrl，我們可以調用this.navCtrl.push() ,並傳遞我們要導航到的頁面。我們還可以傳遞一個數據對象給我們想要導航到的頁面。使用push導航到新頁面很簡單，而且Ionic的導航系統非常的靈活。你可以查看導航文檔找到更多高級導航示例。
當涉及到URL，Ionic 2的工作方式有點不同於Ionic 1。不使用URL導航，可以確保我們可以總是回到一個頁面（例如應用程序啟動）。這意味着我們不只是限於使用href來導航。無論怎樣，我們仍然可以選擇在必要時使用網址導航到某個網頁。
• 建議熟悉一下TypeScript的基本語法和使用，包括@types使用和d.ts編寫。
• 掌握Angular2的基本原理和開發思路。
• 熟悉Ionic 2的所有Components和API。
了解Cordova的使用方法和插件。