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等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。