Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结
3. 手动绑定数据spa方式以及与ajax 与dwr的集成 2
7.1. Atitit.angular.js FilterProvider filter [$injector:unpr] 5
8.1. Angular vs jquery tmpl.js 6
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。使用竖杠管道符号
{{itemO7.ds_id|'timeFmtO7'}}
作者:: 老哇的爪子 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的输出。
<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