Ionic2优于Ionic1的6个理由

1.组织结构和框架

home.ts

import {Component} from '@angular/core';

import {NavController} from 'ionic-angular';

@Component({

  templateUrl: 'build/pages/home/home.html'

})

export class HomePage {

  constructor(private navCtrl: NavController) {

  }

}

home.scss

.home {

    &.xxx{

    }

    .xxx{

    }

}

home.html

<ion-header>

  <ion-navbar>

    <ion-title>Home</ion-title>

  </ion-navbar>

</ion-header>

<ion-content padding class="home">

  <h2>Welcome to Ionic!</h2>

  <p>

    This starter project comes with simple tabs-based layout for apps

    that are going to primarily use a Tabbed UI.

  </p>

  <p>

    Take a look at the <code>app/</code> directory to add or change tabs,

    update any existing page or create new pages.

  </p>

</ion-content>

    ionic2的架构使得“单一职责原则”得到了体现，组件、页面之间相互独立，有利于内聚和解耦。

2.命令行工具

ionic generate page MyPage

或者

ionic g page MyPage

   我们看一下EM6的代码生成结果：

import {Page, NavController} from 'ionic-angular';

@Page({

  templateUrl: 'build/pages/my-page/my-page.html',

})

export class MyPagePage {

  static get parameters() {

    return [[NavController]];

  }

  constructor(nav) {

    this.nav = nav;

  }

}

3.路由导航

    ionic1的路由设置：

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  .state('intro', {

    url: '/',

    templateUrl: 'templates/intro.html',

    controller: 'IntroCtrl'

  })

  .state('main', {

    url: '/main',

    templateUrl: 'templates/main.html',

    controller: 'MainCtrl'

  });

  $urlRouterProvider.otherwise("/");

});

但是如果你使用Ionic2，事情就变得务必简单，你可以通过导航的push方法入栈页面，和pop方法出栈页面，因此你可以在Ionic2中你可以实现复杂导航。

this.nav.push(MyPage);

4.模板的语法结构

ionic1：

<img ng-src="{{photo.image}}" />

ionic2：

<img [src]="photo.image" />

我们看一下事件调用：

ionic1：

<button ng-click="doSomething()">

ionic2：

<button (click)="doSomething()">

5.它仅仅是javascript而已

但是从使用上，EM6/ TS能够让你避免很多问题，比如说：

jsvascript：

this.someData = null;

var me = this;

doSomething(function(data){

    me.someData = data;

});

看到了么？你问了使用this指针，不得不在函数外面作为变量me的引用，但是你使用了EM6:

this.someData = null;

doSomething((data) => {

    this.someData = data;

})

EM6