Ionic2入坑基础教程和安装指南

安装Ionic

Ionic 2 程序主要经过Ionic命令行工具CLI来建立和开发，并使用Cordova来构建和部署为原生应用程序。也就是说咱们须要先安装一些工具来实现程序开发。

安装Ionic CLI 和 Cordova

要建立 Ionic 2 项目，你须要安装最新版本的 CLI 和 Cordova。在此以前你须要安装最新版本的Node.js。点这里 下载安装Node.js，而后继续安装Ionic CLI和Cordova来进行应用程序开发：

安装 Ionic

npm install -g ionic

安装 Cordova

npm install -g cordova

命令前面可能须要添加sudo提权来进行全局安装。

安装完成后来建立你的第一个 Ionic 应用：

ionic start cutePuppyPics --v2

cutePuppyPics能够替换成你的应用程序名称。--v2表示当前生成的是 Ionic 2 版本的应用，不添加则生成 Ionic 1 应用。

建立完成后cd到你的程序目录中，执行ionic serve来启动你的Ionic应用，并确保测试在浏览器中可以正常显示：

cd cutePuppyPics
ionic serve

平台指南

对于那些为iOS和Android构建原生应用程序（大多数人），每一个平台都有必定的功能和安装要求，才能充分利用Ionic和Cordova开发。

对于iOS开发人员，请查看Cordova iOS平台指南，并按照说明安装或升级Xcode，并注册开发人员账户，开始为iOS开发应用程序。

对于Android开发人员，请查看Cordova Android平台指南，并按照说明安装SDK或Android Studio，开始为Android开发应用程序。

Ionic 2 基础教程

确保完成以前的安装并测试启动成功。下面咱们将启动新的应用程序，添加页面，并在这些页面之间导航等过程。 让咱们开始吧！

启动一个新的Ionic 2应用

用start命令来建立一个新的Ionic 2应用。别忘了添加--v2来指定这是一个 Ionic 2 的应用程序。再添加一个tutorial参数，指定使用tutorial模版建立该应用。这样一个基于TypeScript的Ionic 2应用就被成功建立了。

ionic start MyIonic2Project tutorial --v2

在这个过程当中将会下载 Ionic 2 库包，安装所需的npm模块，并为应用配置好Cordova。若是在建立时不指定tutorial参数，ionic默认使用 tabs模版来建立应用。

在浏览器中查看应用

如今你能够cd到建立好的项目文件夹中，使用serve命令在浏览器中预览你的应用。

cd MyIonic2Project/
ionic serve

若是成功启动，你将看到上面这样的欢迎界面。

项目结构

让咱们来剖析一下Ionic 2应用，在咱们建立的文件夹中，咱们能够看到一个典型的Cordova项目结构。咱们能够在其中安装原生插件，并建立平台特定的项目文件。

./src/index.html

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>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做为侧面菜单，而后一个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 { 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设置成了HelloIonicPage ，因此HelloIonicPage将是在nav控制器中加载的第一个页面。

建立一个页面

接下来，让咱们看看咱们正在导入的HelloIonicPage。在src/app/pages/hello-ionic/文件夹中，找到并打开hello-ionic.ts。

你可能已经注意到每一个页面都有本身的文件夹，该文件夹以页面命名。 在每一个文件夹内，咱们还能够看到一个.html和一个.scss同名文件。 例如，在hello-ionic/咱们将找到hello-ionic.ts，hello-ionic.html和hello-ionic.scss。 虽然使用这种模式不是必需的，但它能够有助于保持项目的组织结构。

而后咱们找到HelloIonicPage类，在建立的页面中提供了一个Angular组件和已经使用Ionic的导航系统加载的全部Ionic指令。注意，由于页面是动态加载的，因此它们没有选择器（selector ）：

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


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

  }
}

全部的页面都会有一个类和一个关联的模版。让咱们再看一下src/app/pages/hello-ionic/hello-ionic.html，这是一个模版页面：

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>

  <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 ion-button color="primary" menuToggle>Toggle Menu</button>
  </p>

</ion-content>

<ion-navbar>是这个页面中导航栏的模版。当咱们导航到这个页面，导航栏的按钮和标题做为页面转换的一部分进行过渡。

模板的其他部分是标准的Ionic代码，用于设置咱们的内容区域并输出咱们的欢迎信息。

建立其余页面

要建立一个其余的页面，咱们不须要太多的事情，只要确保配置标题和咱们指望在导航栏显示的东西便可。

让咱们来看一下src/app/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很是类似。 在下一节中，咱们将学习如何导航到新页面！

导航到页面

回想上一部分咱们在ListPage类中有一个函数，看起来像这样：

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

你可能已经注意到咱们引用了一个ItemDetailsPage。这是一个包含在教程启动器中的页面。咱们要在list.ts中导入它，咱们能够这样导入：

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

保存好以后。你会发现ionic serve将从新编译应用程序并刷新浏览器，你的修改将会出如今程序中。让咱们在浏览器中从新访问咱们的应用程序，当咱们点击一个项目，它将导航到项目详细信息页面！请注意，菜单切换按钮将被替换为后退按钮。这是Ionic遵循的原生风格，但能够按需配置。

工做原理

Ionic 2 导航的工做原理就像一个简单的堆栈，咱们经过push将一个页面推到堆栈的顶端，这会让咱们的应用前进一步并显示一个返回按钮。反之，咱们也能够pop掉一个页面。由于咱们在构造函数中设置了this.navCtrl，咱们能够调用this.navCtrl.push(),并传递咱们要导航到的页面。咱们还能够传递一个数据对象给咱们想要导航到的页面。使用push导航到新页面很简单，并且Ionic的导航系统很是的灵活。你能够查看导航文档找到更多高级导航示例。

当涉及到URL，Ionic 2的工做方式有点不一样于Ionic 1。不使用URL导航，能够确保咱们能够老是回到一个页面（例如应用程序启动）。这意味着咱们不仅是限于使用href来导航。不管怎样，咱们仍然能够选择在必要时使用网址导航到某个网页。

后续步骤

到此你已经完成了Ionic 2基本教程，了解了Ionic 2并开始朝着掌握Ionic 2进发。有能力的话最好去Ionic官网阅读完整的技术文档。

• 建议熟悉一下TypeScript的基本语法和使用，包括@types使用和d.ts编写。

• 掌握Angular2的基本原理和开发思路。

• 熟悉Ionic 2的全部Components和API。

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

祝在Ionic踩坑之路上越走越远。