Ionic V2 - 快速入门

Ionic V2 与 Ionic V1 一样提供了 CLI 工具与 GUI 的工具。

安装 Ionic V2

安装 Ionic 2，可以使用下面的命令：

npm install -g ionic@beta

完全不需要担心 Ionic V1 版本的项目，Ionic@Beta 可以完全兼容 Ionic V1 的项目。

安装完成之后可以使用下面的命令创建新项目：

ionic start cutePuppyPics --v2

运行新创建的项目， cd 进入项目目录之后，运行 ionic serve 命令即可：

cd cutePuppyPics
ionic serve

执行之后，即可像 Ionic v1 一样在浏览器中查看项目了。

构建

要构建 Ionic 项目，需要先安装 cordova ：

sudo npm install -g cordova

为 iOS 构建

ionic platform add ios

你需要先安装 XCode，XCode 允许你直接为 iOS 系统的目标设备构建应用。添加了 iOS 系统之后，即可使用下面的命令运行模拟器：

ionic emulate ios

为 Android 构建

ionic platform add android

接下来你还需要安装 Android SDK ，Android SDK 允许你为 Android 目录设备构建应用，虽然 Android SDK 本身就带了一个模拟器，但是更加推荐你使用 Genymotion：

ionic run android

迁移

Ionic 1.x 是基于 Angular 1.x 技术的，同样的 Ionic 2.x 基于 Angular 2.x，所以，虽然 Ionic 本身的理念没有太多改变，但是代码的写法也因为 Angular 的改变而变得很不一样，Angular 2.x 使用了完全不一样的语法与代码结构（要了解 Angular 2.x 的变化，可以查看 学习 Angular 2 这个网站。

下面这个是 Ionic 1.x 中的写法：

.config(function($stateProvider) {
  $stateProvider
  .state('main', {
    url: '/',
    templateUrl: 'templates/main.html',
    controller: 'MainController'
  })
})

.controller('MainController', function() {

})

现在在 Ionic 2.x 中可以像下面这样写：

@Page({
  templateUrl: 'main/main.html'
})

export class MainCmp {
  constructor() {

  }
}

从 Angular 1.x 迁移

ControllerAs 语法是一个 Angular 1.x 提供的功能，它可以我们不需要使用 $scope 变量即可做到数据绑定，而是将数据直接绑定至 Controller 上，在 Angular 2.x 中，ControllerAs 的实现更加简单了，对比下面是 Angular 1.x 实现：

index.html

<ion-content ng-controller="MainController">
  <ion-item>
    {{ data.text }}
  </ion-item>
</ion-content>

app.js

.controller('MainController', function($scope) {
  $scope.data = {
    text: 'hello world'
  }
})

将上面的示例改成 ControllerAs 语法只需要改变很小的一点代码：

index.html

<ion-content ng-controller="MainController as main">
  <ion-item>
    {{ data.text }}
  </ion-item>
</ion-content>

app.js

.controller('MainController', function() {
  this.data = {
    text: 'Hello World'
  }
})

TypeScript

TypeScript 是一个提供了 ES6 类 与类型注释的 JavaScript 超集 ，这使得我们可以在 Ionic 项目中按照 ES6 的标准来写。

app.js

.controller('MainController', function() {
  this.data = {
    text: 'Hello World'
  }
})

app.ts

export class MainController {
  constructor() {
    this.data = {
      text: 'Hello World'
    }
  }
}

项目结构

在 Angular 1.x 中，最好的项目实践是将所有的 JavaScript 脚本都放在一起，模板文件也放在一起，但是他们两者却是分开的，比如下面这样：

|-www/
|
|--js/
|--|-app.js
|--|-HomeController.js
|--|-DetailController.js
|
|--templates/
|--|-Home.html
|--|-Detail.html
|
|-index.html

但是在 Angular 2.x 中，推荐像下面这样的：

|-www/
|
|--Home/
|--|-HomeController.js
|--|-Home.html
|
|--Detail/
|--|-DetailController.js
|--|-Detail.html
|
|-index.html
|-app.js