ionic2学习文档
概述
截止到2016.01.03，angularJS 2还处于beta版阶段，所以ionic2也还是在 nightly版本。
注意：ionic2是基于angular2的，而angular2又是基于ES6的。所以不懂ES6的人得先去学习ES6，然后再学angualr2，最后学习ionic2。
安装
像ionic1一样，ionic2同样能使用ionic CLI或者GUI工具快速的被创建，打包，和运行。
安装环境要求
- node.js 4.2.x
- npm 3.x
nodejs下载地址：
- 官方下载(可能会很慢，更有可能会下载出错，你懂得)
- 我的百度云下载
nodejs安装之后，查看npm版本可能是2.7.x，或者说你的npm版本号小于3.x的话，你需要升级npm,升级方法看这里,升级到那个版本，版本号查看看这里
安装ionic2 CLI
用NPM安装ionic@beta
npm install -g ionic@beta上面的命令可能会很慢，而且容易出错。在国内环境下要想快速安装请用下面的指令，命令使用了npm淘宝镜像，安装应该进行的比较快。
npm install -g ionic@beta --registry=https://registry.npm.taobao.org创建ionic 2项目
运行以下命令来创建一个ionic2项目
ionic start myFirstIonic2Project --v2同样的，上面命令可能很慢，下面的命令会快一些
ionic start myFirstIonic2Project --v2 /--registry=https://registry.npm.taobao.org1.4 运行项目
进到刚才建立的myFirstIonic2Project 目录
cd myFirstIonic2Project 运行项目
ionic serve然后你就会看到浏览器里自动弹出一个窗口，你的第一个 ionic 2 项目已经启动起来了
项目模板
在ionic1中，官方提供的项目模板有三种：
- blank（默认不写即为blank）
- tabs
- sidemenus
ionic start myFirstIonic1Project [blank/tabs/sidemenus]ionic2增加了一个新的模板：tutorial
创建一个新的ionic2APP
ionic start myFirstIonic2Project tutorial --v2迁移
迁移的概念
ionic2构建在angular2之上，这是一个完整的可复用的原始框架。你所知道的所有部分都在那里，但有新的语法和结构的变化，开发人员需要了解和学习对于angular2的一些变化，学习angular2
ionic2，大家不必感到很陌生（应该感觉很熟悉，这是废话），因为ionic1版本中的所有概念仍在ionic2版本中。虽然他们可能看起来有点不同。例如ionic1中的视图和控制器，在ionic2中，他们已经合并为一个实例。
列举一个在ionic1中的示例：
.config(function($stateProvider){
$stateProvider
.state('main',{
url:'/',
templateUrl:'templates/main.html',
controller:'MainCtrl'
})
})
.controller('MainCtrl',function(){
})上面的代码能在ionic2中可以写成这样：
@Page({
templateUrl:'main/main.html'
})
export class MainCmp{
constructor(){
}
}其他的变化，如navigation的变化，有很大的不同，但我们保证有很好的理由去改变。现在，您可以将组件视为任意视图，并且以任何方式导航到它们。这使得导航更加灵活，允许更多的本地风格的导航栈。
从 angular1迁移
而angular2要求应用程序必须更新的语法变化，开发商可以主动和确保他们的应用程序是可通过以下最佳实践和John Papa’s Angular Style guide或 Todd Motto’s Angular Style guide。这两个将为你提供一个步骤，你可以采取准备迁移的代码。
ControllerAs语法
ControllerAs的语法是angular1的一个特征。他可以直接绑定数据到$scope，你能直接绑定到控制器的指令实例。这使得迁移一个angular1.xController到angualr2是非常简单的。
index.html
<ion-content ng-controller="MainCtrl">
<ion-item>
{{data.text}}
ion-item>
ion-content>app.js
.controller('MainCtrl',function($scope){
$scope.data = {
text:'Hello World'
}
})转变ControllerAs的语法，你只需要做一些小小的改变
index.html
<ion-content ng-controller="MainCtrl as main">
<ion-item>
{{main.data.text}}
ion-item>
ion-content>app.js
.controller('MainCtrl',function(){
this.data = {
text:'Hello World'
}
})TypeScript
TypeScript是你代码中的JavaScript提供的ESClasses和类型注解的一个超集。现在，你可以采用TypeScript，很容易的编写你的代码就像编写ES6 Classes一样，轻松转移到ionic2。最好的部分是，任何有效的JavaScript也是有效的TypeScript，所以你可以将你的代码一个片段一个片段的转换。在你编写controller之前，你可以很容易地将它转换成一个TypeScript 类就像这样
app.js
.controller('MainCtrl',function(){
this.data = {
text:'Hello World'
}
})app.ts
export class MainCtrl{
constructor(){
this.data = {
text:'Hello World'
}
}
}项目架构
With Angular 1, it was a practice to keep all your JavaScript together and separate from your templates. Since Ionic 2 and Angular 2 will be moving to a component base setup, you can reorganize your project to help mentally enforce that concept. So a project whose directory looks like this…
|-www/
|
|–js/
|–|-app.js
|–|-HomeCtrl.js
|–|-DetailCtrl.js
|
|–templates/
|–|-Home.html
|–|-Detail.html
|
|-index.html
像下面这样组织结构
|-www/
|
|–Home/
|–|-HomeCtrl.js
|–|-Home.html
|
|–Detail/
|–|-DetailCtrl.js
|–|-Detail.html
|
|-index.html
|-app.js
组织你的项目，这样可以帮助你的思维模式，你的应用程序的视图/状态是一个组件，一个模板和控制器。