從 Ionic1 遷移至 Ionic2 基本說明

shevy 發布于2019-08-20 11:34 / 3062人閱讀

摘要：遷移概念是基于之上重寫的全新框架。從遷移雖然應用需要對其語法結構進行更新，但是開發人員仍然可以通過和這兩篇文章來積極的確保升級工作符合最佳的應用實踐。這可以很容易的讓一個的控制器遷移為一個的類。

遷移概念

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

    
      
        {{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

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

GPU云服務器云服務器遷移至專有網了 ECS遷移至RDS 經典網絡遷移至vpc 預約遷移至vpc網絡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80645.html

使用Ionic3框架開始第一個混合開發APP

摘要：什么是框架框架是一個混合開發框架，其本身依賴于，，。使用框架可以做什么使用可以使用前端相關技術快速開發多平臺的移動。使用全局安裝和。輸入，這是添加一個平臺的命令。注意這個包是版本，并非正式包，正式包需要先生成簽名至此，你就開始了第一個應用。什么是混合開發？簡單來說，就是在開發移動應用中同時使用Native和Web的開發方式。什么是Ionic3框架？ Ionic3框架是一個混合開發...

wangshijun 2019-08-02 15:57 評論0 收藏0
使用Ionic3框架開始第一個混合開發APP

摘要：什么是框架框架是一個混合開發框架，其本身依賴于，，。使用框架可以做什么使用可以使用前端相關技術快速開發多平臺的移動。使用全局安裝和。輸入，這是添加一個平臺的命令。注意這個包是版本，并非正式包，正式包需要先生成簽名至此，你就開始了第一個應用。什么是混合開發？簡單來說，就是在開發移動應用中同時使用Native和Web的開發方式。什么是Ionic3框架？ Ionic3框架是一個混合開發...

Mr_houzi 2019-08-21 11:54 評論0 收藏0
使用Ionic3框架開始第一個混合開發APP

摘要：什么是框架框架是一個混合開發框架，其本身依賴于，，。使用框架可以做什么使用可以使用前端相關技術快速開發多平臺的移動。使用全局安裝和。輸入，這是添加一個平臺的命令。注意這個包是版本，并非正式包，正式包需要先生成簽名至此，你就開始了第一個應用。什么是混合開發？簡單來說，就是在開發移動應用中同時使用Native和Web的開發方式。什么是Ionic3框架？ Ionic3框架是一個混合開發...

thursday 2019-08-29 13:10 評論0 收藏0
從Ionic2 beta更新到Ionic2 RC0的正確姿勢

摘要：參照更新你的文件刪除文件夾和文件參照更新文件重命名并重新定位到移動文件從到比如等等將你定義的屬性移動到文件修正你的圖片路徑例如之前是現在應該是組件內與模版相關的變量，修改關鍵字為。 ps:參照官方文檔進行整理。填了一些坑供參考：）基于Angular2的正式發布，Ionic2也進入了RC版本。但是因為結構和語法變動，使得從beta到RC不能平滑升級。官方給出了2種升級方式：1.創建...

TIGERB 2019-08-22 10:58 評論0 收藏0