ionic2快速上手

完成 Ionic 安裝後，你能夠建立第一個App了。本章內容將指導你新建一個App，添加一個頁面，而且實現頁面間的導航。

1.建立項目

打開 Node 命令行，首先 cd 到項目目錄，使用 start 命令來建立一個新App：

ionicstartMyIonic2Projecttutorial--v2

這個命令將下載項目模板，安裝 npm modules，設置 Cordova 的相關信息。tutorial 參數的意思是下載 tutorial 模板來初始化項目，若是不指定這個參數的話，好比：

ionicstartMyIonic2Project--v2

默認會使用 tabs 模板。

固然你也能夠加一個 blank 參數，這樣就是一個空項目。

--v2 的參數必需要加，否則會創建 v1.x 版本的項目。

若是失敗，有可能會出現如下信息：

CreatingIonicappinfolderE:\Workspaces\Ionic2\MyIonic2Projectbasedontutorialproject

這說明 npm 安裝的時候失敗了，能夠 cd 到項目目錄，使用以前設置過的 cnpm 命令：

E:\Workspaces\Ionic2>cdMyIonic2Project

直到最後輸出相似如下信息：

All packages installed (319 packages installed from npm registry, use 2m, speed 37.49kB/s, json 659(4MB), tarball 1.07MB)

說明 npm modules 安裝成功。

2.在瀏覽器中運行

如今 cd 到項目目錄，使用 serve 命令來快速瀏覽項目：

E:\Workspaces\Ionic2>cdMyIonic2ProjectE:\Workspaces\Ionic2\MyIonic2Project>ionicserve

接下來 CLI 會編譯項目，輸出相似下面的內容：

>ionic-app-base@watchE:\Workspaces\Ionic2\MyIonic2Project

接着瀏覽器會打開一個地址爲 http://localhost:8100 的窗口，端口號根據當前PC的實際狀況可能會有變化，若是8100被佔用了會使用8101等。

你能夠看到運行效果：

3.項目結構

如今來看一下一個 Ionic 2 App 的結構。這是一個標準的 Cordova 項目結構。

./src/index.html

./src/index.html是App的主要入口，設置腳本和CSS，運行整個App。咱們不會花費太多時間在這個文件上，你能夠看到HTML代碼裏有一個 <ion-app> 標籤，像下面這樣：

<ion-app></ion-app>

在底部還有如下的腳本：

<scriptsrc="cordova.js"></script><scriptsrc="build/main.js"></script>

build/main.js是自動生成的，其實是把TypeScript轉成了普通的JavaScript。

cordova.js在本地開發的時候在瀏覽器中瀏覽會報404錯誤，這個文件會在Cordova打包的時候自動加到項目裏。

./src/

在src目錄裏咱們會找到原始的沒有通過編譯的代碼，這也是咱們的主要工做目錄。當咱們運行ionic serve命令的時候，在src/目錄下的文件會被轉譯成正確的瀏覽器可以解釋的JavaScript版本（當前是ES5）。這意味着咱們可使用高級的TypeScript，可是會編譯回瀏覽器須要的老版本的JavaScript。src/app/app.module.ts是App的入口。

在文件底部咱們會看到如下的代碼：

@NgModule({

declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage],

imports: [IonicModule.forRoot(MyApp)],

bootstrap: [IonicApp],

entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage],

providers: []

})

export class AppModule {}

每一個App都有一個root module來控制應用中其餘的部分。若是你用過Ionic1和Angular1的話，有點相似ng-app。這也是咱們使用ionicBootstrap來啓動應用的地方。

./src/app/app.html

src/app/app.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 id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

在這個模板中，咱們使用了ion-menu來做爲菜單，使用ion-nav組件當作主要的內容區域。ion-menu的[content]屬性被綁定到ion-nav的本地變量content上，因此它可以知道要顯示什麼。

下面咱們來看如何來建立新頁面並實現基本的導航。

4.添加頁面

如今咱們對Ionic 2 App的佈局有了一個基本的認識，繼續來實現添加和導航頁面的功能。

看一下src/app/app.html,在底部會看到如下代碼：

<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

注意root屬性的綁定。對於ion-nav組件來講，這是第一個或者說是「根」頁面。當ion-nav組件載入時，組件引用的rootPage變量將會做爲根頁面被載入。

在src/app/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;

pages: Array<{title: string, component: any}>;

constructor(

private platform: Platform,

private menu: MenuController

) {

...

}

...

}

咱們看到rootPage被設置爲HelloIonicPage，因此HelloIonicPage將是nav controller第一個載入的頁面。

建立一個頁面

接下來，咱們看一下咱們導入的HelloIonicPage頁面。在src/pages/hello-ionic/目錄下，打開hello-ionic.ts。

你能夠注意到每一個頁面都有本身的目錄，每一個目錄中均可以看到具備相同名字的.html和.scss文件。例如在hello-ionic/目錄咱們能夠看到有hello-ionic.ts, hello-ionic.html, 和hello-ionic.scss。雖然這種模式不是必須的，但這有助於項目文件的良好組織。

接下來咱們看到HelloIonicPage這個類。這個類建立了一個Page，即Angular中的Component（組件），而且會載入Ionic的導航系統。注意由於Page是被動態載入的，因此他們不須要selector：

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

@Component({

templateUrl: 'build/pages/hello-ionic/hello-ionic.html'

})

export class HelloIonicPage {}

全部的Page都是一個類，而且關聯到對應的模板文件上。看一下src/pages/hello-ionic/hello-ionic.html，即這個頁面的模板文件：

<ion-header>

<ion-navbar>

<button menuToggle>

<ion-icon name="menu"></ion-icon>

</button>

<ion-title>Hello Ionic</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding class="getting-started">

<h3>Welcome to your first Ionic app!</h3>

<p>

This starter project is our way of helping you get a functional app running in record time.

</p>

<p>

Follow along on the tutorial section of the Ionic docs!

</p>

<p>

<button primary menuToggle>Toggle Menu</button>

</p>

</ion-content>

<ion-navbar>是navigation bar的模板。當咱們導航到頁面時，navigation bar的按鈕和頁面標題將會做爲整個頁面動畫的一部分展示出來。

模板其他的部分是標準的Ionic代碼，設置了內容區域和輸出咱們的歡迎信息。

建立一個新頁面

建立這個新頁面，咱們並不須要作不少配置，只須要確保設置好navigation bar要展現的標題就能夠了。

看一下src/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很是相似。接下來咱們看一下如何導航到這個新頁面。

5.導航到頁面

回憶一下上個章節，咱們在ListPage類裏有一些下面的代碼：

你也許注意到咱們引用了ItemDetailPage。咱們用如下的代碼將其import到app/pages/list/list.ts裏：

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

當保存文件後，ionic serve進程會自動從新編譯以應用新的更改，並自動刷新瀏覽器。從新看一下瀏覽器中的頁面，當點擊一個項時，它將會導航到詳情頁面。注意菜單按鈕被一個返回按鈕代替了，這是Ionic遵循的一種原生App的導航方式，固然這是能夠被配置的。

工做原理

ionic2的導航像一個簡單的棧，咱們使用push方法來導航到新頁面，將其放在棧的頂部，並顯示一個返回按鈕。對於返回，咱們使用pop方法將其從棧中移除。由於咱們在構造函數中設置了this.navCtrl屬性，咱們能夠調用this.navCtrl.push()方法，來導航到一個新的頁面。咱們還能夠將一個object傳遞給將要導航過去的頁面。使用push方法導航到新頁面很是簡單，但Ionic的導航系統是很是靈活的。能夠從導航文檔處得到更詳細的導航示例。

對於Url，Ionic 2與Ionic 1是不一樣的。咱們要確保咱們能夠返回到某個Page，因此通常不使用Url來進行導航。固然咱們在必要的時候仍是有辦法來使用Url導航的。

接下來

你已經掌握了Ionic 2的入門知識。你能夠繼續學習Ionic 2的各類Component，和關於硬件的Native APIs。

 

---

 

更多angular1/2/四、ionic1/2/三、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公衆號——全棧弄潮兒。