Atitit.angular.js 使用最佳實踐 原理與常見問題解決與列表顯示案例 attilax總結
Atitit.angular.js 使用最佳實踐 原理與常見問題解決與列表顯示案例 attilax總結
1. 本文範圍 1
2. Angular的長處 1
2.1. 雙向數據綁定 1
2.2. dsl化 2
2.3. 依賴註入 2
2.4. 指令 2
3. 手動綁定數據spa方式以及與ajax 與dwr的集成 2
4. 格式化數據 2
4.1. 多字段組合格式化 3
4.2. 輸出html 4
5. 輸出作為函數參數調用 4
6. 載入完畢事件 5
7. 常見錯誤 5
7.1. Atitit.angular.js FilterProvider filter [$injector:unpr] 5
8. AngularJS的適合之處 5
8.1. Angular vs jquery tmpl.js 6
9. Angular的問題 6
9.1. 不利於開發人員進行調試， 6
9.2. 學習進階難。
6
10. 參考 7
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。使用豎杠管道符號
{{itemO7.ds_id|‘timeFmtO7‘}}
作者:: 老哇的爪子 Attilax 艾龍， EMAIL:[email protected]
轉載請註明來源： 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的輸出。
<td ng-bind-html="itemO7.downloadStatus+‘,‘+itemO7.startdownFlag+‘,‘+itemO7.trueDownFlag+‘,‘+itemO7.dsId |statFmt" > </td>
還須要通過通過$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. 輸出作為函數參數調用
好像不能直接輸出。僅僅好借鑒輸出
<a href="javascript:void(0)" onclick="stop(this.id,this)" id="{{itemO7.dsId}}"> 終止</a>
6. 載入完畢事件
找了半天資料，沒有找到完畢事件的資料。
。僅僅好自己使用輪詢的方式來實現了。。原理是在foreach哈面一個tag 使用angular寫入。
。
檢測這個tag的狀態。假設能夠。說明已經載入完畢。。
。
<div id="finishTag" style="display:none">{{‘...‘}}</div>
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可能會更好。
8.1. Angular vs jquery tmpl.js
格式化方面,tmpl更加方便。直接使用js函數就可以。
9. Angular的問題
9.1. 不利於開發人員進行調試，
經常輸出信息離題十萬八千裏
9.2. 學習進階難。
使用Angular須要學習大量的概念，包含但不限於：
· 模塊
· 控制器
· 指令
· 作用域
· 模板
· 鏈式函數
· 過濾器
· 依賴註入
10. 參考
Atitit.載入完畢事件的設計 angular.js
paip.提升效率--數據綁定到table原理和流程Angular js jquery實現 - attilax的專欄 - 博客頻道 - CSDN.NET
Atitit. js mvc 總結(2)----angular 跟 Knockout o99 最佳實踐 - attilax的專欄 - 博客頻道 - CSDN.NET
我由Angular轉向React，為什麽？-CSDN.NET
將BootstrapJS和AngularJS結合使用以及為什麽不用jQuery - OurJS
Atitit.angular.js 使用最佳實踐 原理與常見問題解決與列表顯示案例 attilax總結