Ionic2 概念迁移Migration Concepts

原文地址：http://ionicframework.com/docs/v2/getting-started/migration/

---

Ionic 2是建立在Angular2的基础之上的，Angular2是在Angular的原始框架上完成重写的。所有的你知道的Angular的东西在Ionic中都能够找得到，但是开发者需要意识到这里有新的语法和结构上的改变。关于Angular2的改变的概述请查看Learn Angular 2。

Ionic 2中，你会感觉到很熟悉。所有的从Ionic V1到V2的概念，尽管她们可能看起来有些轻微的不同，你仍然拥有你在V1版本中的视图和控制器，但是在V2版本中它们被合并到了一个实例中。

看这个V1版本的例子

V1

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

.controller('MainCtrl', function(){

})

你可以在V2版本中像这样重写：

@Component({
    templateUrl:'main/main.html'
})
export class MainCmp {
    constructor(){
    }
}

其他的改变，如导航的改变就变得非常的不一样，但是我们承诺是因为一个好的原因。现在，你可以探讨组件以你想要任意的方式把他们作为视图和导航。这使得导航更加的灵活并且允许对切更多的原生的导航。

从Angular 1迁移

Angular 2的语法改变了所以需要应用进行更新，开发者们有预见性的并且确信他们的应用能提到更高一级标准的通过下面的John Papa’s Angular Style guide或者Todd Motto’s Angular Style guide中的实践来进行工作。这两者将能够提供你步骤来带领你准备你的代码进行迁移。

ControllerAs语法

ControllerAs语法在Angular 1.x 中是一个特有的东西，来代替绑定数据到$scope，你可以直接绑定实例到控制器。这使得从Angular 1.x的控制器迁移到Angular 2的类变得更加的容易。使用controllerAs是相当简单的来迁移一个传统的控制器：

index.html

    
        {{data.text}}
    

app.js

.controller('MainCtrl', function($scope){
    $scope.data ={
        text: 'Hello World'
    }
})

使用·controllerAs·语法来转换，你仅仅需要改变很少的一部分东西。

index.html

    
        {{main.data.text}}
    

app.js

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

TypeScript

TypeScript是JavaScript的超集，它提供了ES6的类以及在你的代码里面的类型说明。现在开始使用TypeScript，你可以使用ES^的类来编写你的代码，这将很好转移到Ionic2中。最好的部分就是任何有效的JavaScript代码也是有效的TypeScript代码，所以你可以逐渐的转换你的代码。如果你从之前就在减少的控制器，那么你可以像这样很简单的转换它为一个TypeScript类。

app.js

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

app.ts

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

项目结构

Angular 1可以被用来练习保持你的JavaScript代码，然后从你的模版中分离。自从Ionic 2和Angular 2将会被转移到为以一个组件为基本设置，你可以重组你的项目来帮助你快速理解概念。所以一个项目的文件夹目录看起来像是这样的...

|-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

Organizing your project like this can help get you in the mindset that each of your app’s views/states are a component, with a template and a controller.