概述
截止到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
组织你的项目,这样可以帮助你的思维模式,你的应用程序的视图/状态是一个组件,一个模板和控制器。