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. 雙向數據綁定

更加easy實現dsl

處理表單數據和編輯表格數據帶來了很是多長處

只是Jq的form序列化也是很是easy的

在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>client空間滿");

}

}]);

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可能會更好。