成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

從 Ionic1 遷移至 Ionic2 基本說(shuō)明

shevy / 3073人閱讀

摘要：遷移概念是基于之上重寫(xiě)的全新框架。從遷移雖然應(yīng)用需要對(duì)其語(yǔ)法結(jié)構(gòu)進(jìn)行更新，但是開(kāi)發(fā)人員仍然可以通過(guò)和這兩篇文章來(lái)積極的確保升級(jí)工作符合最佳的應(yīng)用實(shí)踐。這可以很容易的讓一個(gè)的控制器遷移為一個(gè)的類(lèi)。

遷移概念

Ionic 2 是基于 Angular 2 之上重寫(xiě)的全新框架。所有你已知的關(guān)于的 Angular 的部分仍然存在，但是也有一些作為開(kāi)發(fā)人員仍要了解的新的語(yǔ)法和結(jié)構(gòu)性變化。關(guān)于 Angular 2 變更的內(nèi)容有機(jī)會(huì)多帶帶寫(xiě)一篇文章。想要了解的可以直接 傳送到 Angular 2

在 Ionic 2 中有很多已經(jīng)很熟悉的東西。所有 Ionic 1 的概念依然保持到了 Ionic 2 中，只是它們可能稍有不同。像在 Ionic 1 中一樣你仍然擁有視圖和控制器，不過(guò)它們已經(jīng)合并成了一個(gè)實(shí)例。

Ionic 1 中看像是這樣：

.config(function($stateProvider){
  $stateProvider
  .state("main", {
    url: "/",
    templateUrl: "templates/main.html",
    controller: "MainCtrl"
  })
})

.controller("MainCtrl", function(){

})

Ionic 2 則重寫(xiě)成為：

@Component({
  templateUrl:"main/main.html"
})
export class MainCmp {
  constructor(){

  }
}

還有許多其他的變化，比如導(dǎo)航?，F(xiàn)在，你可以將隨心所欲的使用組件并且以你想要的方式導(dǎo)航到它們。這使得導(dǎo)航更加的靈活，并且支持原生風(fēng)格的導(dǎo)航堆棧。

從 Angular 1 遷移

雖然 Angular 2 應(yīng)用需要對(duì)其語(yǔ)法結(jié)構(gòu)進(jìn)行更新，但是開(kāi)發(fā)人員仍然可以通過(guò) John Papa’s Angular Style guide 和 Todd Motto’s Angular Style guide 這兩篇文章來(lái)積極的確保升級(jí)工作符合最佳的應(yīng)用實(shí)踐。
同時(shí)這里為你提供代碼遷移的準(zhǔn)備步驟：

ControllerAs 語(yǔ)法

ControllerAs 語(yǔ)法是 Angular 1 中的一項(xiàng)特性，取代了數(shù)據(jù)綁定到$scope，你可以直接將實(shí)例綁定到控制器。這可以很容易的讓一個(gè) Angular 1 的控制器遷移為一個(gè) Angular 2 的類(lèi)。

傳統(tǒng)控制器：
index.html

    
      
        {{data.text}}

app.js

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

轉(zhuǎn)換到 controllerAs 語(yǔ)法，只需要修改幾個(gè)地方而已：
index.html

    
      
        {{main.data.text}}

app.js

    .controller("MainCtrl", function(){
      this.data ={
        text: "Hello World"
      }
    })
TypeScript

TypeScript 是 JavaScript 的一個(gè)超集，提供了ES6類(lèi)和代碼中的注釋類(lèi)型。現(xiàn)在使用 TypeScript，你可以編寫(xiě)代碼作為ES6類(lèi)，這會(huì)讓轉(zhuǎn)移到 Ionic 2 變得很容易。而且最棒的是，任何有效的 JavaScript 的代碼依然也是有效的 TypeScript 代碼，這樣你就可以按需轉(zhuǎn)換你的代碼塊。你之前的控制器很容易的通過(guò) TypeScript 轉(zhuǎn)換成這樣：

app.js

    .controller("MainCtrl", function(){
      this.data ={
        text: "Hello World"
      }
    })

app.ts

    export class MainCtrl{
      constructor(){
        this.data ={
          text: "Hello World"
        }
      }
    }
項(xiàng)目結(jié)構(gòu)

在 Angular 1 中，將 JavaScript 代碼從模版中分離出來(lái)并放在一起是一個(gè)慣例。但是由于 Ionic 2 和 Angular 2 是基于組件概念的，你可能需要重新組織你的項(xiàng)目結(jié)構(gòu)來(lái)與新概念保持一致。

所以你的原來(lái)的項(xiàng)目看起來(lái)是這樣的：

    |-www/
    |
    |--js/
    |--|-app.js
    |--|-HomeCtrl.js
    |--|-DetailCtrl.js
    |
    |--templates/
    |--|-Home.html
    |--|-Detail.html
    |
    |-index.html

重新組織以后看起來(lái)是這樣：

    |-www/
    |
    |--Home/
    |--|-HomeCtrl.js
    |--|-Home.html
    |
    |--Detail/
    |--|-DetailCtrl.js
    |--|-Detail.html
    |
    |-index.html
    |-app.js

新的組織結(jié)構(gòu)可以有助你思維的一致性，使你應(yīng)用的每一個(gè)視圖/狀態(tài)和模版還有控制器成為一個(gè)組件。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80645.html

相關(guān)文章

  • 使用Ionic3框架開(kāi)始第一個(gè)混合開(kāi)發(fā)APP

    摘要：什么是框架框架是一個(gè)混合開(kāi)發(fā)框架，其本身依賴(lài)于，，。使用框架可以做什么使用可以使用前端相關(guān)技術(shù)快速開(kāi)發(fā)多平臺(tái)的移動(dòng)。使用全局安裝和。輸入，這是添加一個(gè)平臺(tái)的命令。注意這個(gè)包是版本，并非正式包，正式包需要先生成簽名至此，你就開(kāi)始了第一個(gè)應(yīng)用。 什么是混合開(kāi)發(fā)？ 簡(jiǎn)單來(lái)說(shuō)，就是在開(kāi)發(fā)移動(dòng)應(yīng)用中同時(shí)使用Native和Web的開(kāi)發(fā)方式。 什么是Ionic3框架？ Ionic3框架是一個(gè)混合開(kāi)發(fā)...

    wangshijun 評(píng)論0 收藏0

  • 使用Ionic3框架開(kāi)始第一個(gè)混合開(kāi)發(fā)APP

    摘要：什么是框架框架是一個(gè)混合開(kāi)發(fā)框架，其本身依賴(lài)于，，。使用框架可以做什么使用可以使用前端相關(guān)技術(shù)快速開(kāi)發(fā)多平臺(tái)的移動(dòng)。使用全局安裝和。輸入，這是添加一個(gè)平臺(tái)的命令。注意這個(gè)包是版本，并非正式包，正式包需要先生成簽名至此，你就開(kāi)始了第一個(gè)應(yīng)用。 什么是混合開(kāi)發(fā)？ 簡(jiǎn)單來(lái)說(shuō)，就是在開(kāi)發(fā)移動(dòng)應(yīng)用中同時(shí)使用Native和Web的開(kāi)發(fā)方式。 什么是Ionic3框架？ Ionic3框架是一個(gè)混合開(kāi)發(fā)...

    Mr_houzi 評(píng)論0 收藏0

  • 使用Ionic3框架開(kāi)始第一個(gè)混合開(kāi)發(fā)APP

    摘要：什么是框架框架是一個(gè)混合開(kāi)發(fā)框架，其本身依賴(lài)于，，。使用框架可以做什么使用可以使用前端相關(guān)技術(shù)快速開(kāi)發(fā)多平臺(tái)的移動(dòng)。使用全局安裝和。輸入，這是添加一個(gè)平臺(tái)的命令。注意這個(gè)包是版本，并非正式包，正式包需要先生成簽名至此，你就開(kāi)始了第一個(gè)應(yīng)用。 什么是混合開(kāi)發(fā)？ 簡(jiǎn)單來(lái)說(shuō)，就是在開(kāi)發(fā)移動(dòng)應(yīng)用中同時(shí)使用Native和Web的開(kāi)發(fā)方式。 什么是Ionic3框架？ Ionic3框架是一個(gè)混合開(kāi)發(fā)...

    thursday 評(píng)論0 收藏0

  • 從Ionic2 beta更新到Ionic2 RC0的正確姿勢(shì)

    摘要：參照更新你的文件刪除文件夾和文件參照更新文件重命名并重新定位到移動(dòng)文件從到比如等等將你定義的屬性移動(dòng)到文件修正你的圖片路徑例如之前是現(xiàn)在應(yīng)該是組件內(nèi)與模版相關(guān)的變量，修改關(guān)鍵字為。 ps:參照官方文檔進(jìn)行整理。填了一些坑供參考 ：） 基于Angular2的正式發(fā)布，Ionic2也進(jìn)入了RC版本。但是因?yàn)榻Y(jié)構(gòu)和語(yǔ)法變動(dòng)，使得從beta到RC不能平滑升級(jí)。 官方給出了2種升級(jí)方式：1.創(chuàng)建...

    TIGERB 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<