[注]转载自：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的使用方法和插件。