1. 程式人生 > >ionic新手教程第七課-簡要說明幾種界面之間的參數傳遞及優缺點

ionic新手教程第七課-簡要說明幾種界面之間的參數傳遞及優缺點

get art 簡單的 edi adc spa pan 業務 route

截至2016年4月13日19點32分,我公布的ionic新手教程,已經公布6課了,

總訪問量將近6000,平均每節課能有1000的訪問量。當中訪客最多的是第三課有2700的訪客。

技術分享

事實上我開始的時候計劃的挺好的,就依照我這階段的安排,慢慢的帶大家做一個比較完整的項目。

但這幾天發生了一些事情,讓我不得不又一次思考該跟大家說什麽呢?

從訪客數據來看,大家對於總體架構的布置和代碼邏輯的規範相對照較感興趣,也說明大家對基礎入門的新建和普通的指令比較了解。

我本來是不打算講過於基礎的東西的,但是今天在技術群裏。有個朋友問說ng-repeat怎麽用?有人回答他連這個都問。那還怎麽做項目。

事實上我知道有些朋友基礎比較差,看不懂API文檔,或者對文檔理解不是非常清晰,可是人家想學啊。

我知道教這種朋友並不須要什麽技術。卻須要足夠的耐心。

並且今天我公司讓我帶一個零基礎的同事學ionic,我打算在6-10天左右。讓他上手做項目。

所以從下節課開始,我可能會更新比較基礎簡單的指令。

言歸正傳。

當項目慢慢做大,內容和業務越來越多的時候,我們都會涉及到多界面之間的參數傳遞。

再此我簡要的說明一下幾種比較經常使用的參數傳遞方式。

1、通過route傳遞

這樣的方法是在新建tabs類型的ionic項目中就使用到的。

在route中定義了。進入頁面的路由接收參數

技術分享

在界面中傳遞參數

技術分享

或者在controller中使用代碼傳遞參數

$state.go(‘game-detail‘,{gameId:gameId})

都但是實現從A界面向B界面傳遞一個字符串類型的數據。相同的方法:/xxxx:/xxxx:/xxx就能夠實現向B界面傳遞多個字符串參數。

長處是代碼簡單。傳遞數據通過分享鏈接返回,數據不會丟失。

缺點是將數據放到url地址中,使得訪問地址過長。

若傳遞多個參數。在微信分享地址放回是可能導致重定向地址錯誤。

切忌使用這種方法傳遞對象,盡管能夠實現,可是會有一個很長的url地址。

2、通過$rootScope傳遞參數

這個更簡單點,在A、B界面中註入$rootScope,在A界面使用$rootScope.data={xxx:xxx}||"xxxx".在B界面直接使用$rootScope.data

長處是使用便捷。高效高速,不止能傳遞字符串還能傳遞對象。在須要傳遞較大數據量時,挺好用的。

缺點是代碼任意。不規範。到處都是全局變量不好維護,數據常駐內存占用空間。數據保存在本地通過分享鏈接返回數據丟失。

這種方法不止能夠用來傳遞參數,活用於公共業務和公共模塊的處理。也很好用。

可是切忌過於依賴,這個技巧。不然把大量的代碼寫在run中。會影響項目的啟動。

比方通用的loading。能夠寫在這裏,僅僅要項目啟動了這兩個模塊就載入了。

技術分享

然後再須要的地方$rootScope.$broadcast(‘loading:show‘);就能夠了。

相同的在這裏定義$rootScope.fun = func(),也可在全局調用$rootScope.fun()

註意切忌把太多的業務放在這裏,後期代碼調整和業務改動。真的非常悲催。

3、通過service傳遞和方法2差點兒相同。就是須要多謝一下代碼。優缺點也類似。可是例如法2更加的規範,符合angularjs的設計規範,

不在controller中處理業務,而是交由服務處理。就是A界面引用C服務的setData,B界面引用C服務的getData。

今天的內容有點少了,下次我就講點基礎的。先把在項目中比較經常使用的幾個標簽說明確了。再安排其它的內容。

最好的方法。忘記說了,通過route傳遞一個key。然後須要服務端配合。

通過這個key去獲取整個對象數據。這樣子,無論是分享回來沒數據還是url過長,都能夠決解

請大家關註一下我的公眾號。就算給我一點點鼓舞吧技術分享

項目Demo地址:無
假設你還有什麽其它的問題,能夠通過下面方式找到我

新浪微博:小虎Oni
微信公眾號:ionic__

技術分享

技術分享


ionic新手教程第七課-簡要說明幾種界面之間的參數傳遞及優缺點