Atitit.angular.js 使用最佳實踐原理與常見問題解決與列表顯示案例 attilax總結

時間 2019-11-21

標籤 atitit.angular.js atitit angular 使用最佳實踐原理常見問題解決列表顯示案例 attilax 總結欄目 AngularJS 简体版

原文原文鏈接

Atitit.angular.js 使用最佳實踐原理與常見問題解決與列表顯示案例 attilax總結javascript

2.2. dsl化 2angularjs

2.4. 指令 2json

3. 手動綁定數據spa方式以及與ajax 與dwr的集成 2api

4. 格式化數據 2瀏覽器

7.1. Atitit.angular.js FilterProvider filter [$injector:unpr] 5

8. AngularJS的適合之處 5

8.1. Angular vs jquery tmpl.js 6

1. 本文範圍

主要使用Angular綁定一個json列表到table。。

實現mvc html 模板功能。。

2. Angular的優勢

2.1. 雙向數據綁定

更加容易實現dsl

處理表單數據和編輯表格數據帶來了不少優勢

不過Jq的form序列化也是很簡單的

在Angular中，操縱數據不是經過抓取和注入。通常經過數據綁定來實現，野蠻抓取注入數據。也可以改變每一個組件的狀態，不過在切換時就會暴露出問題。

2.2. dsl化

ng-show，ng-hide，ng-class和ng-if做爲模板的控制語句——全部這一切都讓人驚奇。

2.3. 依賴注入

2.4. 指令

3. 手動綁定數據spa方式以及與ajax 與dwr的集成

設置自動綁定數據爲空列表

function listCtrl($scope) {

$scope.listO7 =[ ] ;

}

Click事件

function bindTableData(data)

{

$('#tabid1').scope().listO7 =data;

$('#formx').scope().$digest();

}

4. 格式化數據

須要創建一個模塊filter 好比常見的日期格式化

var homeModule = angular.module("atiMod", []);

homeModule.filter('timeFmtO7',function(){

return function(item){

try{

return item.Format("yyyy-MM-dd hh:mm:ss");

}catch(e){return "";}

}

});

使用filter，使用豎槓管道符號

做者:: 老哇的爪子 Attilax 艾龍， EMAIL:1466519819@qq.com

轉載請註明來源： http://blog.csdn.net/attilax

4.1. 多字段組合格式化

調用

{{itemO7.download_status+','+itemO7.startdownFlag+','+itemO7.trueDownFlag|statFmt}}

書寫過濾器

homeModule.filter('statFmt',function(){

return function(item){

//alert(item);

var arr=item.split(",");

var downedflag=arr[0];

var startdownFlag=arr[1];

var failFlag=arr[2];

if(downedflag==1 && failFlag==1)

return "已下載";

if( downedflag=="null" && startdownFlag==1 && failFlag=="null" )

return "下載中";

}

});

4.2. 輸出html

angularJs輸出html的時候，瀏覽器並不解析這些html標籤，不知道angularjs如何實現這種功能的。

可是這裏咱們須要其顯示angular輸出的html能被瀏覽器解析怎麼辦呢？

經過api，發現經過指令 ng-bind-html來實現html的輸出。

還須要經過經過$sce服務來實現html的展現。

homeModule.filter('statFmt',['$sce', function($sce){

return function(item){

// alert(item);

var arr=item.split(",");

var downedflag=arr[0];

var startdownFlag=arr[1];

var failFlag=arr[2];

var dataid=arr[3];

if( failFlag==3 )

return $sce.trustAsHtml("下載失敗:<br>其餘緣由");

if( failFlag==4 )

return $sce.trustAsHtml( "下載失敗:<br>客戶端空間滿");

}

}]);

5. 輸出做爲函數參數調用

好像不能直接輸出，只好借鑑輸出

6. 加載完成事件

找了半天資料，沒有找到完成事件的資料。。只好本身使用輪詢的方式來實現了。。原理是在foreach哈面一個tag 使用angular寫入。。檢測這個tag的狀態，若是能夠，說明已經加載完成。。。

if(txt.indexOf("{",0)>=0 ) //can find {{ brk,,,not finish

{

logx(" find {{ ");

}

好像是異步的，須要進一步明確

7. 常見錯誤

7.1. Atitit.angular.js FilterProvider filter [$injector:unpr]

"Error: [$injector:unpr] http://errors.angularjs.org/1.2.9/$injector/unpr?p0=stateFmt1FilterProvider%20%3C-%20stateFmt1Filter\

新不上這個filter

緣由:::估計瀏覽器緩存問題...

刷新..then ok

8. AngularJS的適合之處

AngularJS經過爲開發者呈現一個更高層次的抽象來簡化應用的開發。如同其餘的抽象技術同樣，這也會損失一部分靈活性。換句話說，並非全部的應用都適合用AngularJS來作。AngularJS主要考慮的是構建CRUD應用。幸運的是，至少90%的 WEB應用都是CRUD應用。可是要了解什麼適合用AngularJS構建，就得了解什麼不適合用AngularJS構建。

如遊戲，圖形界面編輯器，這種DOM操做很頻繁也很複雜的應用，和CRUD應用就有很大的不一樣，它們不適合用AngularJS來構建。像這種狀況用一些更輕量、簡單的技術如jQuery可能會更好。