資訊專欄INFORMATION COLUMN
摘要：遷移概念是基于之上重寫的全新框架。從遷移雖然應(yīng)用需要對(duì)其語法結(jié)構(gòu)進(jìn)行更新，但是開發(fā)人員仍然可以通過和這兩篇文章來積極的確保升級(jí)工作符合最佳的應(yīng)用實(shí)踐。這可以很容易的讓一個(gè)的控制器遷移為一個(gè)的類。
遷移概念
Ionic 2 是基于 Angular 2 之上重寫的全新框架。所有你已知的關(guān)于的 Angular 的部分仍然存在，但是也有一些作為開發(fā)人員仍要了解的新的語法和結(jié)構(gòu)性變化。關(guān)于 Angular 2 變更的內(nèi)容有機(jī)會(huì)多帶帶寫一篇文章。想要了解的可以直接 傳送到 Angular 2
在 Ionic 2 中有很多已經(jīng)很熟悉的東西。所有 Ionic 1 的概念依然保持到了 Ionic 2 中，只是它們可能稍有不同。像在 Ionic 1 中一樣你仍然擁有視圖和控制器，不過它們已經(jīng)合并成了一個(gè)實(shí)例。
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(){
}
}
還有許多其他的變化，比如導(dǎo)航?，F(xiàn)在，你可以將隨心所欲的使用組件并且以你想要的方式導(dǎo)航到它們。這使得導(dǎo)航更加的靈活，并且支持原生風(fēng)格的導(dǎo)航堆棧。
從 Angular 1 遷移雖然 Angular 2 應(yīng)用需要對(duì)其語法結(jié)構(gòu)進(jìn)行更新，但是開發(fā)人員仍然可以通過 John Papa’s Angular Style guide 和 Todd Motto’s Angular Style guide 這兩篇文章來積極的確保升級(jí)工作符合最佳的應(yīng)用實(shí)踐。
同時(shí)這里為你提供代碼遷移的準(zhǔn)備步驟：
ControllerAs 語法是 Angular 1 中的一項(xiàng)特性，取代了數(shù)據(jù)綁定到$scope，你可以直接將實(shí)例綁定到控制器。這可以很容易的讓一個(gè) Angular 1 的控制器遷移為一個(gè) Angular 2 的類。
傳統(tǒng)控制器：
index.html
{{data.text}}
app.js
.controller("MainCtrl", function($scope){
$scope.data ={
text: "Hello World"
}
})
轉(zhuǎn)換到 controllerAs 語法，只需要修改幾個(gè)地方而已：
index.html
{{main.data.text}}
app.js
.controller("MainCtrl", function(){
this.data ={
text: "Hello World"
}
})
TypeScript
TypeScript 是 JavaScript 的一個(gè)超集，提供了ES6類和代碼中的注釋類型。現(xiàn)在使用 TypeScript，你可以編寫代碼作為ES6類，這會(huì)讓轉(zhuǎn)移到 Ionic 2 變得很容易。而且最棒的是，任何有效的 JavaScript 的代碼依然也是有效的 TypeScript 代碼，這樣你就可以按需轉(zhuǎn)換你的代碼塊。你之前的控制器很容易的通過 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 代碼從模版中分離出來并放在一起是一個(gè)慣例。但是由于 Ionic 2 和 Angular 2 是基于組件概念的，你可能需要重新組織你的項(xiàng)目結(jié)構(gòu)來與新概念保持一致。
所以你的原來的項(xiàng)目看起來是這樣的：
|-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
新的組織結(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://m.hztianpu.com/yun/80645.html
摘要：什么是框架框架是一個(gè)混合開發(fā)框架，其本身依賴于，，。使用框架可以做什么使用可以使用前端相關(guān)技術(shù)快速開發(fā)多平臺(tái)的移動(dòng)。使用全局安裝和。輸入，這是添加一個(gè)平臺(tái)的命令。注意這個(gè)包是版本，并非正式包，正式包需要先生成簽名至此，你就開始了第一個(gè)應(yīng)用。 什么是混合開發(fā)？ 簡單來說，就是在開發(fā)移動(dòng)應(yīng)用中同時(shí)使用Native和Web的開發(fā)方式。 什么是Ionic3框架？ Ionic3框架是一個(gè)混合開發(fā)...
摘要：什么是框架框架是一個(gè)混合開發(fā)框架，其本身依賴于，，。使用框架可以做什么使用可以使用前端相關(guān)技術(shù)快速開發(fā)多平臺(tái)的移動(dòng)。使用全局安裝和。輸入，這是添加一個(gè)平臺(tái)的命令。注意這個(gè)包是版本，并非正式包，正式包需要先生成簽名至此，你就開始了第一個(gè)應(yīng)用。 什么是混合開發(fā)？ 簡單來說，就是在開發(fā)移動(dòng)應(yīng)用中同時(shí)使用Native和Web的開發(fā)方式。 什么是Ionic3框架？ Ionic3框架是一個(gè)混合開發(fā)...
摘要：什么是框架框架是一個(gè)混合開發(fā)框架，其本身依賴于，，。使用框架可以做什么使用可以使用前端相關(guān)技術(shù)快速開發(fā)多平臺(tái)的移動(dòng)。使用全局安裝和。輸入，這是添加一個(gè)平臺(tái)的命令。注意這個(gè)包是版本，并非正式包，正式包需要先生成簽名至此，你就開始了第一個(gè)應(yīng)用。 什么是混合開發(fā)？ 簡單來說，就是在開發(fā)移動(dòng)應(yīng)用中同時(shí)使用Native和Web的開發(fā)方式。 什么是Ionic3框架？ Ionic3框架是一個(gè)混合開發(fā)...
摘要：參照更新你的文件刪除文件夾和文件參照更新文件重命名并重新定位到移動(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)和語法變動(dòng)，使得從beta到RC不能平滑升級(jí)。 官方給出了2種升級(jí)方式：1.創(chuàng)建...
閱讀 649·2023-04-25 17:26
閱讀 1663·2021-08-05 09:58
閱讀 2064·2019-08-30 13:17
閱讀 1059·2019-08-28 17:52
閱讀 1172·2019-08-26 18:27
閱讀 1510·2019-08-26 14:05
閱讀 3744·2019-08-26 14:05
閱讀 1808·2019-08-26 10:45
