如何從 ionic1 遷移至 ionic2

ionic 2 是基於 Angular 2 之上重寫的全新框架。全部你已知的關於的 Angular 的部分仍然存在，可是也有一些做爲開發人員仍要了解的新的語法和結構性變化。

 

在 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 應用須要對其語法結構進行更新，可是對於開發人員來講，遷移並非問題。

這裏爲你提供代碼遷移的準備步驟：

ControllerAs 語法

ControllerAs 語法是 Angular 1 中的一項特性，取代了數據綁定到$scope，你能夠直接將實例綁定到控制器。這能夠很容易的讓一個 Angular1 的控制器遷移爲一個 Angular2 的類。

傳統控制器：
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

新的組織結構能夠有助你思惟的一致性，使你應用的每個視圖/狀態和模版還有控制器成爲一個組件。

 

---

 

更多angular1/2/四、ionic1/2/三、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公衆號——全棧弄潮兒。