0 開始之前
通過本教程之前,您應(yīng)該至少了解一些基本的Ionic 2概念疏虫。您還必須已經(jīng)安裝了Ionic 2 在您的機(jī)器上。
1 創(chuàng)建一個新的Ionic 2 應(yīng)用
我們將使用有Ionic團(tuán)隊創(chuàng)建的tutorial模板啤呼，可見于官方教程卧秘，來創(chuàng)建我們的應(yīng)用程序。要做到這一點官扣，您需要運(yùn)行以下命令：
ionic start ionic2-tutorial tutorial --v2
現(xiàn)在您的應(yīng)用程序?qū)⒆约洪_始建立翅敌。為運(yùn)行后續(xù)的命令，你應(yīng)當(dāng)將項目目錄作為當(dāng)前工作目錄：
cd ionic2-tutorial
簡單瞟一眼應(yīng)用效果惕蹄，使用serve命令：
ionic serve
上面也說了蚯涮，這些命令應(yīng)該在當(dāng)前項目目錄下執(zhí)行。
2 目錄結(jié)構(gòu)
如果你看看生成的文件和文件夾卖陵，這一切看起來非常類似于一個Ionic 1最初的應(yīng)用程序遭顶。這也是一個非常典型的科Cordova風(fēng)格項目結(jié)構(gòu)。
如果你再看看在src 文件夾泪蔫，事情開始看起來有點不同:
通常在一個Ionic 1應(yīng)用程序中,人們所有的Javascript文件(控制器棒旗、服務(wù)等)在一個文件夾中,所有的模板在另一個文件夾，然后所有的樣式包含在一個app.scss文件中撩荣。
Ionic 2應(yīng)用程序的默認(rèn)結(jié)構(gòu)通過功能的組織铣揉，因此一個特定組件(在上面的示例中我們有一個基本的頁面組件,組件列表,和一個項目詳細(xì)信息組件)的所有邏輯饶深、模板和樣式都在一起。這是Angular 2方法論的完美應(yīng)用逛拱，一切都是獨(dú)立的組件粥喜，這些組件可以很容易地在其他地方或項目中重用。如果你想重復(fù)使用一個特定的功能,或有很多人工作在同一個項目中,舊的Ionic 1方法會變得非常麻煩橘券。
根據(jù)功能組織代碼的想法不是Angular 2 & Ionic 2 的特權(quán)额湘，事實上人們在Ionic 1中使用和倡導(dǎo)基于特征的方式，只是大多數(shù)人沒那樣做（趨勢是很難打破）旁舰。通過Angular 2 的工作方式锋华，默認(rèn)就使用基于特征的結(jié)構(gòu)，因此不難推行這種結(jié)構(gòu)箭窜。
index.html
已經(jīng)是慣例了毯焕，瀏覽器第一個打開的文件就是 index.html 。因此我們先來看看Ionic 2中是怎樣的：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="assets/manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
這看上去非常簡潔磺樱，和Ionic 1沒有什么不同纳猫。這里最大的不同是沒用附加ng-app 到body標(biāo)簽（目的是是讓Ionic知道應(yīng)用存在的地方），而是使用了：
<ion-app></ion-app>
根組件將在這里被創(chuàng)建竹捉，通常你的入口應(yīng)用在這里注入芜辕。cordova.js的引用讓我們可以使用Cordova創(chuàng)建應(yīng)用（將應(yīng)用打包為native應(yīng)用，可以提交到App Store）,polyfill.js是為瀏覽器某些特點功能的基本補(bǔ)丁块差，main.js是我們應(yīng)用綁定的代碼侵续。
基本上，這看起來就是一個非常普通的網(wǎng)頁憨闰。
assets
這個assets目錄用于保存你工程里面使用的靜態(tài)文件状蜗，就像圖片、JSON數(shù)據(jù)文件等等鹉动。任何這個文件夾下的東西都會在應(yīng)用程序每次build編譯時覆蓋拷貝到你的build目錄轧坎。
theme
這個 theme 目錄包含了你應(yīng)用程序中的 global.scss 和variables.scss 文件。多數(shù)你應(yīng)用中的樣式是通過使用每個組件自己的 .scss 文件泽示，但是你可以使用 global.scss 文件定義任何自定義樣式缸血，通過不同的方式，你也可以修改 variables.scss 文件中的 SASS 變量來修改你應(yīng)用的樣式边琉。
app
所有的Ionic 2 App 都有 root component属百。這不是和你應(yīng)用里面其他組件的差別记劝，一個明顯的差別是它在自己的 app 文件夾中变姨，而且被命名為 app.component.ts。
如果你有一點不確定 component 到底是個什么東西厌丑，我們具體來看看：
@Component({
templateUrl: 'my-component.html'
})
export class Something {
// ...snip
}
這就是一個具有** something 功能的組件定欧，技術(shù)上來說component關(guān)聯(lián)一個視圖渔呵，否則這個類可能考慮為services更好。不管是component還是servece砍鸠，創(chuàng)建都差不多扩氢，都可以被導(dǎo)入import到你的應(yīng)用中。
根組件root component是第一個被加載的爷辱，接下來我們看看root component是怎么定義和工作的录豺。我們先看看整個文件，然后分解說明：
import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ListPage } from '../pages/list/list';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
// make HelloIonicPage the root (or first) page
rootPage: any = HelloIonicPage;
pages: Array<{title: string, component: any}>;
constructor(
public platform: Platform,
public menu: MenuController
) {
this.initializeApp();
// set our app's pages
this.pages = [
{ title: 'Hello Ionic', component: HelloIonicPage },
{ title: 'My First List', component: ListPage }
];
}
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();
});
}
openPage(page) {
// close the menu when clicking a link from the menu
this.menu.close();
// navigate to the new page if it is not the current page
this.nav.setRoot(page.component);
}
}
1.imports
import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ListPage } from '../pages/list/list';
最開始饭弓，有一些imports定義双饥。我們用于加載其他組件或服務(wù)到這個組件。所有的組件弟断，除了根組件咏花，你都可以看到類定義是這樣的：
export class Something {
}
非常簡單，我們 expoet 組件就是為了能夠在其他地方 import阀趴。在這個例子里面昏翰，我們從 Ionic 庫導(dǎo)入了 Platform， Nav和 MenuController 服務(wù)刘急。 Platform 提供了關(guān)于運(yùn)行應(yīng)用程序平臺的信息棚菊， Nav 提供應(yīng)用里面導(dǎo)航的引用， MenuController 允許我們提供控制菜單叔汁。
我們從Angular 2導(dǎo)入 Component 和 ViewChild 窍株。 Component 幾乎無處不在，因為我們用于創(chuàng)建組件攻柠， ViewChild 用于獲取組件中元素的定義球订。
我們也導(dǎo)入 importing 了 我們自己創(chuàng)建的HelloIonicPage 和 ListPage 組件。 這些組件定義在 src/pages/hello-ionic/hello-ionic.ts 和 src/pages/list/list.ts (根據(jù) import 語句對應(yīng)的路徑)瑰钮。注意我們沒有包含src路徑在import中冒滩，因為是當(dāng)前文件的相對路徑，而我們已經(jīng)在src目錄中浪谴。因為我們在名為app的子文件夾中开睡，所以我們到上級目錄使用../。
接下來我們看到從ionic-native導(dǎo)入 StatusBar苟耻，因為我們通過Ionic2使用Cordova來訪問本地功能篇恒，就像控制 status bar。Ionic Native是由Ionic提供的服務(wù)以便于方便使用Cordova插件凶杖。盡管你不用為了使用Ionic Native而包含Native functionatilty胁艰，你可以直接使用Cordova插件。
2. Decorator
Decorators，就像 @Component 和 @Directive腾么，通過使用在類定義上添加元數(shù)據(jù)（擴(kuò)充信息）給我們的組件奈梳，看看我買的 root component：
@Component({
templateUrl: 'app.html'
})
這里我們使用 templateUrl 讓組件知道使用哪個文件作為視圖 （你也可以使用 template 作為內(nèi)聯(lián)模版而不是 templateUrl）。
3. Class 定義
之前的所有都沒有真正的做一些功能解虱，只是一個設(shè)置和搭建∪列耄現(xiàn)在我們要開始定義一些行為，來看一看吧：
export class MyApp {
@ViewChild(Nav) nav: Nav;
// make HelloIonicPage the root (or first) page
rootPage: any = HelloIonicPage;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform, public menu: MenuController) {
this.initializeApp();
// set our app's pages
this.pages = [
{ title: 'Hello Ionic', component: HelloIonicPage },
{ title: 'My First List', component: ListPage }
];
}
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();
});
}
openPage(page) {
// close the menu when clicking a link from the menu
this.menu.close();
// navigate to the new page if it is not the current page
this.nav.setRoot(page.component);
}
}
首先我們定義一個新類MyApp殴泰，classes是ES6的新特性于宙。
我們傳入一些參數(shù)到構(gòu)造函數(shù)constructor：platform 和menu 然后它們的類型是 Platform 和MenuController。這樣我們通過構(gòu)造函數(shù)注入inject了這些服務(wù)（比如MenuController 將作為菜單）悍汛，通過使用public關(guān)鍵字使得作用域在整個類限煞；意味著我們可以通過this.menu 或者 this.platform在這個類里面的任何地方訪問它們。
The Platform service提供了程序所運(yùn)行平臺的相關(guān)信息 (例如：寬高员凝、橫豎署驻、分辨率等），這里我們用來判斷app是否就緒健霹。
MenuController服務(wù)允許我們創(chuàng)建和管理一個滑動菜單旺上。
在構(gòu)造函數(shù)的上方，我們也定義了幾個成員變量用于保存我們類里的rootPage 和 pages糖埋。通過在構(gòu)造函數(shù)上面定義宣吱，我們就可以在整個類里通過this.rootPage或 this.pages來使用。
我們定義 rootPage 為 HelloIonicPage 組件瞳别，作為首先顯示的第一頁（你也可以簡單的改變它征候，用ListPage代替）。
構(gòu)造函數(shù)之外祟敛，我們定義了一個名為 openPage 的方法疤坝，傳入一個page參數(shù)，通過調(diào)用setRoot方法設(shè)置為當(dāng)前頁馆铁。注意跑揉，我們獲取this.nav引用通過一種奇怪的方式。通常埠巨，我們導(dǎo)入NavController 使用與 MenuController 和Platform 同樣的方式然后調(diào)用它的 setRoot历谍，但是你不能從根組件調(diào)用它，作為替換我們獲取引用通過Angular2提供的@ViewChild辣垒。
一個初學(xué)者特別困惑的事是這樣：
rootPage: any = HelloIonicPage;
pages: Array<{title: string, component: any}>;
之前提到過望侈，這里是創(chuàng)建成員變量。但是你可能會想Array<{title: string, component: any}>是什么鬼勋桶。你應(yīng)該知道脱衙，Ionic 2使用TypeScript侥猬，這些鬼就是types（類型）。類型簡單的說就是“這些變量應(yīng)該只含有這些類型的數(shù)據(jù)”岂丘。這里陵究，我們可以說rootPage可以包含any類型的數(shù)據(jù)眠饮，pages僅可以包含數(shù)組奥帘，而這些數(shù)組僅可以包含由字符串標(biāo)題和any類型component組成的對象。這是一個非常復(fù)雜的類型仪召，你可像下面這樣簡單處理：
rootPage: any = HelloIonicPage;
pages: any;
或者你也可以完全不用類型寨蹋。使用類型的好處是給你的應(yīng)用程序增加了錯誤檢查和一個基礎(chǔ)水平的測試——如果你的pages數(shù)組被傳入了一個數(shù)字，那么你的應(yīng)用將被中斷扔茅，而這將直觀的去了解和處理已旧。
Root Components 模版
當(dāng)我們創(chuàng)建根組件是我們提供了一個模版給組件，就是被渲染到屏幕的內(nèi)容召娜。1）.這里是我們在瀏覽器運(yùn)行時根組件的樣子：
現(xiàn)在我們稍微詳細(xì)的看看模版HTML运褪。
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
先看下第一行：
<ion-menu [content]="content">
這是menu元素的content 的屬性為 content。記住這里的 “content” 是表達(dá)式而不是字符串玖瘸。我們不是設(shè)置 content 屬性為字符串“content”秸讹，我們設(shè)置的是變量 “content”。如果你跳到文件底部你就會看到：
<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
上面代碼通過添加#content雅倒，我們就創(chuàng)建了一個名為content的變量指向這個組件璃诀，也是menu的content屬性使用的變量。所以蔑匣，menu將使用<ion-nav>作為它的主要內(nèi)容劣欢。這里我們設(shè)置root屬性為我們在類中定義(app.ts)的rootPage。
接下來我們看看是什么有意思的東西：
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
在這一小塊代碼中擠進(jìn)了Angular 2的語法裁良。為構(gòu)造函數(shù)中定義的每一個頁面創(chuàng)建一個按鈕凿将，號語法意味這它將為每個頁面創(chuàng)建一個嵌入式模版（它不會在DOM中渲染出上面的代碼，而是使用模版創(chuàng)建）价脾，通過使用let p我們可以獲取到某個特定頁面的引用丸相，用于點擊事件時傳遞到openPage方法（在根模塊中定義的）”斯鳎回過頭去看看openPage方法可以看到這個參數(shù)用于設(shè)置rootPage*：
this.nav.setRoot(page.component);
App Module
我們已經(jīng)覆蓋了一些根模塊的細(xì)節(jié)灭忠，但是這里還有一個名為app.modules.ts的神秘文件在app目錄下。
為了在我們的程序中使用頁面和服務(wù)座硕，我們需要把它們添加到 app.module.ts文件弛作。我們創(chuàng)建的所有頁面需要被添加到 declarations 和 entryComponents 數(shù)組，所有服務(wù)需要被添加到providers數(shù)組华匾，所有自定義的組件或pipes只需要被添加到declarations數(shù)組映琳。
你還會發(fā)現(xiàn)main.dev.ts 和 main.prod.ts 文件在同一個目錄下面机隙。其中只有一個會被用到（取決于你是開發(fā)還是發(fā)布的build）。實際上它負(fù)責(zé)啟動您的應(yīng)用程序(這個意義上它有點像index.html)萨西。它將導(dǎo)入app module并啟動應(yīng)用程序有鹿。
頁面
根組件是一個特例，我們通過 ListPage組件來看看如何添加一個普通的視圖到一個Ionic2應(yīng)用程序谎脯。你能看到這個頁面,通過選擇應(yīng)用程序中的“My First List”菜單葱跋，來查看這個頁面：
代碼是醬紫的：
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
});
}
}
和根組件一樣，我們有一些 import 語句源梭，然后我們同樣有 @Component 修飾符：
@Component({
templateUrl: 'list.html'
})
然后是這樣的：
export class ListPage {
}
這里有個前綴 export 而在根組件中沒有娱俺。這允許我們的頁面組件在其他地方被導(dǎo)入（import）。
這個視圖中有個叫 NavParams 的組件通過構(gòu)造函數(shù)加了進(jìn)來废麻。在導(dǎo)航的時候我們就可以返回這個視圖的詳細(xì)信息荠卷，我們先查一下值：
this.selectedItem = navParams.get('item');
這時是undefined，因為這個頁面被設(shè)置成了rootPage（在根組件中通過openPage方法設(shè)置）烛愧，我們沒用通過navigation stack導(dǎo)航到這個頁面油宜。
Ionic 2 中，如果你想添加一個視圖怜姿，并且保存頁面導(dǎo)航歷史隨時可以返回慎冤，那么你需要push這個頁面到n
navigation stack，對應(yīng)的移除用pop社牲。
在 ListPage 組件中粪薛，我們通過 itemTapped 方法（ListPage 模版中，但某條記錄被點擊時觸發(fā)） push 了 ItemDetailsPage ：
itemTapped(event, item) {
this.navCtrl.push(ItemDetailsPage, {
item: item
});
}
上面push 了 ItemDetailsPage 組件到 navigation stack搏恤，使之成為當(dāng)前活動視圖违寿，然后把被點擊的item傳入詳情頁中。
現(xiàn)在我們看看細(xì)節(jié)頁面 ItemDetailsPage 組件的細(xì)節(jié)熟空，我們可以使用 NavParams 獲取傳入記錄的細(xì)節(jié)藤巢，好像這樣（畢竟我們push了些東西到navigation stack）：
this.selectedItem = navParams.get('item');
console.log(this.selectedItem);
這就是Ionic2主從復(fù)合的基本模式了。
還有就是記住息罗，你可以通過命令行輕松創(chuàng)建頁面：
ionic g page MyPage
這將自動創(chuàng)建你需要的頁面文件掂咒。
總結(jié)
毫無疑問Ionic 2和Angular 2 取得了巨大的進(jìn)步在組織結(jié)構(gòu)和性能上，但他們看起來也很嚇人迈喉。盡管最初似乎需要很多學(xué)習(xí)和面對困擾绍刮，但我認(rèn)為它很有意義。
