ionic 2 是基于 Angular 2 之上重寫的全新框架。所有你已知的關于的 Angular 的部分仍然存在信殊，但是也有一些作為開發(fā)人員仍要了解的新的語法和結構性變化炬称。
在 ionic 2 中有很多已經很熟悉的東西。所有 ionic1的概念依然保持到了ionic 2 中涡拘，只是它們稍有不同玲躯。像在 ionic1中一樣你仍然擁有視圖和控制器，不過它們已經合并成了一個實例鳄乏。
從ionic1 遷移
ionic1 中看像是這樣：
.config(function($stateProvider){ ?$stateProvider
.state('main', {
url: '/',
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
})
})
.controller('MainCtrl', function(){
})
ionic 2 則重寫成這樣：
@Component({ ?templateUrl:'main/main.html'})
export class MainCmp { ?constructor(){ ?}}
還有許多其他的變化跷车，比如導航。現在橱野，你可以將隨心所欲的使用組件并且以你想要的方式導航到它們朽缴。這使得導航更加的靈活，并且支持原生風格的導航堆棧水援。
從Angular1 遷移
雖然 Angular 2 應用需要對其語法結構進行更新密强，但是對于開發(fā)人員來說，遷移并不是問題蜗元。
這里為你提供代碼遷移的準備步驟：
ControllerAs 語法
ControllerAs語法是 Angular 1 中的一項特性或渤，取代了數據綁定到$scope，你可以直接將實例綁定到控制器许帐。這可以很容易的讓一個 Angular1 的控制器遷移為一個 Angular2 的類劳坑。
傳統(tǒng)控制器：
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涝开，你可以編寫代碼作為ES6類，這會讓轉移到 Ionic 2 變得很容易框仔。而且最棒的是舀武，任何有效的 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
新的組織結構可以有助你思維的一致性，使你應用的每一個視圖/狀態(tài)和模版還有控制器成為一個組件核偿。
前端面試題每日更新诚欠，歡迎參與討論，地址：https://github.com/daily-interview/fe-interview漾岳。
更多angular1/2/4/5轰绵、ionic1/2/3、react尼荆、vue左腔、微信小程序、nodejs等技術文章捅儒、視頻教程和開源項目液样，請關注微信公眾號——全棧弄潮兒。
腦筋急轉彎：
生活小竅門
