經歷了一個從0到有的app的開發，我已經很熟悉Ionic1了，在此期間我曾發現過Ionic1的一些bug，和一些不合理的地方（根基版本 不同，后續我會陸續發表這些文章），我甚至在此期間對Ionic1進行代碼改造和Hack，或者對其組件進行增強和封裝，在onic2剛剛發布的時候，我 就已經迫不及待的欣賞它的新特性，但是我為此不得不再學習另外一個框架。
如果你已經熟悉Anguar1和Ionic1，那么請不要囂張（陝西話叫zhang，二聲。東北話叫嘚瑟，河南話叫啥？回家問問我媽再告訴 你！），聽小明在這里慢慢跟你說，Angular2是一個全新的框架，它從ReactJS以及其他web移動框架借鑒了不少經驗和優點，巨大的改進使得開 發體驗和性能已經超越了Angular1，而且Ionic2無論是從UI交互效果和跨平台的差異性都優於Ionic1，如果你繼續為維護Ionic1的項 目我我無法阻擋，但是如果你正在再發新的APP跨平台項目，我建議你考慮一下Ionic2。
1.組織結構和框架
在Ionic2中，每個組件、頁面都只專注於做一件事，它單獨有自己的一個目錄，有自己的類（Class）、模板文件（Template）和自己的樣式文件（在這里我們提倡使用scss）。下面我們看一下在Ionic2中一個小模塊是怎樣的結構：
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.命令行工具
在開發中，我們總希望能夠有一個規范使得我們的開發更具有合理性，同時還能提升我們的開發效率，那么ionic2的CLI完全可以滿足你這一點。
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; } }在Ionic2中我們常用的有component、page、pipe、provider等，CLI會根據需求生成模板代碼，並放置在規范的目 錄下。在這里需要說明一下，ionic2的風格與Angular2格稍有不同，但是希望你能夠求同存異，因為我覺得angular2也很有代理，它提倡文 件的命名是帶有.后綴的，如組件：xxx.component.ts、管道：xxx.pipe.ts、服務：xxx.service.ts等，詳情可以查 看angular官方文檔。
3.路由導航
Ionic2的路由導航不同於Ionic1，我們都知道其實Anngular1自帶理由是比較弱的，在復雜路由跳轉的app中，是很吃力的，我 們一般都是依賴Angular1的插件ui-router，它是基於URL的hash（當然官方也提供配置切換到html5模式），那么ionic1也是 在這個基礎之上進行導航封裝的，比如說頁面導航堆棧。
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.模板的語法結構
ionic2的模板語法與Ionic1非常相似，但是看起來又有點古怪，其實Ionic2的模板語法更為簡潔。我們來看一下對比。
- ionic1：
<img ng-src="{{photo.image}}" />- ionic2：
<img [src]="photo.image" />我們看一下 事件調用：
- ionic1：
<button ng-click="doSomething()">- ionic2：
<button (click)="doSomething()">5.它僅僅是javascript而已
ionic1和angular1都有一些特定的語法，但是追其根本只不過是javascript，也許你對EM6認識不是很深，但是你改變不了 它是ECMAscript標准的事實，也就是說作為一個web前端開發的你，逃不了要學習這項新的語言，如果你感興趣你可可以試試Typescript， 如果你曾經做過后台開發，我敢肯定你會愛上它，那么你使用ionic2的同時，你是在熟悉未來web的新標准，它會讓你成為一個更好的web前端開發者。 直到現在仍然有很大一部分前端開發人員不知道angular，不知道reactjs，甚至EM6和typescript，所以你應該感受到一絲優越感。
但是從使用上，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; })6.編譯
ionic從平台上講是基於cordova的封裝（ 不僅僅是它的CLI
），因此ionic工程也是一個標准的cordova工程，也就是說我們最終給跨平台提供的是www目錄的資源文件，但是在ionic2中我們都是在 www的同級目錄的app目錄進行編碼，也是因為我們使用EM6或Typescript寫的代碼瀏覽器並不能夠直接執行，如果你自己觀察ionic2的工 程目錄，你會發現Gulp.js的腳本多了幾個任務的定義，其實是幾個ionic的鈎子命令，如ionic
serve，ionic build之類的，其目的是在我們打包，或者瀏覽器模擬時的
命令執行之前，執行一些gulp任務，其中就是對typescript、scss的編譯，是不是感覺很方便，而且最終合並編譯到www/build/js目錄下，並且很難反編譯，也就是說你的app如果被人解包，他只能運行，但如果想拿到你的源碼是相當困難的。
總結
毫無疑問，我是比較建議大家使用Ionic2的，也許在使用過程中你會發現諸多問題，但是我覺得最終都能的到解決，還有就是從性能上，還是會比 ionic1提升甚多，但是絕不是有人說的10-100倍，沒那么誇張，我們的angular框架或者reactjs其實在移動前端方面正在追求極致，既 考慮到的開發的易用性，又考慮運行的流暢性，很多思維和架構是值得我們去深究的。