從 Ionic1 遷移至 Ionic2 基本說明

DemoPark發表於2019-02-16

遷移概念

Ionic 2 是基於 Angular 2 之上重寫的全新框架。所有你已知的關於的 Angular 的部分仍然存在，但是也有一些作為開發人員仍要了解的新的語法和結構性變化。關於 Angular 2 變更的內容有機會單獨寫一篇文章。想要了解的可以直接 傳送到 Angular 2

在 Ionic 2 中有很多已經很熟悉的東西。所有 Ionic 1 的概念依然保持到了 Ionic 2 中，只是它們可能稍有不同。像在 Ionic 1 中一樣你仍然擁有檢視和控制器，不過它們已經合併成了一個例項。

Ionic 1 中看像是這樣：

.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(){

  }
}

還有許多其他的變化，比如導航。現在，你可以將隨心所欲的使用元件並且以你想要的方式導航到它們。這使得導航更加的靈活，並且支援原生風格的導航堆疊。

從 Angular 1 遷移

雖然 Angular 2 應用需要對其語法結構進行更新，但是開發人員仍然可以通過 John Papa’s Angular Style guide 和 Todd Motto’s Angular Style guide 這兩篇文章來積極的確保升級工作符合最佳的應用實踐。
同時這裡為你提供程式碼遷移的準備步驟：

ControllerAs 語法

ControllerAs 語法是 Angular 1 中的一項特性，取代了資料繫結到$scope，你可以直接將例項繫結到控制器。這可以很容易的讓一個 Angular 1 的控制器遷移為一個 Angular 2 的類。

傳統控制器：
index.html

    <ion-content ng-controller="MainCtrl">
      <ion-item>
        {{data.text}}
      </ion-item>
    </ion-content>

app.js

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

轉換到 controllerAs 語法，只需要修改幾個地方而已：
index.html

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

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

新的組織結構可以有助你思維的一致性，使你應用的每一個檢視/狀態和模版還有控制器成為一個元件。

相關文章