Ionic2 升级的概念

Ionic2是构建在Angular2之上。对于Angular2比较熟悉的朋友都知道，这完全是一个对原框架进行重写的一个全新框架。在Ionic2这里，Angular有的Ionic都有，但是开发者需要注意的是Ionic增添了一些新的语法，以及在架构上进行了一些变动。所以在学习Ionic之前，最好还是先去学习一下，Angular2方面的知识。

我们先来对比一下，Ionic两个版本之间的区别：

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

.controller('MainCtrl', function(){

})

@Component({ //只有组建，没了路由，没了控制器
  templateUrl:'main/main.html'
})
export class MainCmp {
  constructor(){

  }
}

这上面的代码是主界面上的区别，而在其他方面，比如导航上那区别就更大了。但是我发誓从现在开始，你可以把Components也就是所谓组件当作一个任意视图，你想进入这些视图，你想怎样都可以。正因如此，导航就具有了非常大的弹性化，而且越来越像原生导航。

从Angular 1中升级

Controller作为一种语法，可以说是Angular1的一个重要特点。在controller里，我们会将数据绑定到$scope中，比如下面这段代码:

  <ion-content ng-controller="MainCtrl">
      <ion-item>
        {{data.text}}
      </ion-item>
    </ion-content>
---------------------------------
    .controller('MainCtrl', function($scope){
      $scope.data ={
        text: 'Hello World'
      }
    })

我们可以利用Ionice2中的controllerAs语法进行升级。

ion-content ng-controller="MainCtrl as main"> //重点在这
      <ion-item>
        {{main.data.text}}
      </ion-item>
    </ion-content>

TypeScript

TypeScript是对于JavaScript的一个超级扩展。在它的帮助下，你可以随心所欲的编写ES6代码。虽然现在主流浏览器已经都支持ES6。

我们看一下，我们如何通过TypeScript中的class，对angular1的controller进行改造。

这是一段典型的angular1的controller代码：

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

改造以后：

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

对比二者，我们看到，controller被class替换;而controller中回调函数的功能被contructor()函数给替换，而其他语法格式不变。

最后我们看下项目架构上的区别
项目架构

在Angular1中，通常会把所有的Javascript都集中到一起，然后再通过templates进行分割。但是到了我们Ionic2和Angular2时代，我们会将这些文件逐个的基于component地进行分割。

    |-www/
    |
    |--Home/
    |--|-HomeCtrl.js
    |--|-Home.html
    |
    |--Detail/
    |--|-DetailCtrl.js
    |--|-Detail.html
    |
    |-index.html
    |-app.js

这样你的视图和控制器就全部组成了一个个独立的组件了。