Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 2. Angular的优点 3. 手动绑定数据spa方式以及与ajax 与dwr的集成 4. 格式化数据 5. 输出作为函数参数调用 6. 加载完成事件 7. 常见错误 8. AngularJS的适合之处 9. Angular的问题 10. 参考
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
主要使用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,使用竖杠管道符号
{{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>客户端空间满");
}
}]);
5. 输出作为函数参数调用
好像不能直接输出,只好借鉴输出
<a href="javascript:void(0)" onclick="stop(this.id,this)" ></a>
6. 加载完成事件
找了半天资料,没有找到完成事件的资料。。只好自己使用轮询的方式来实现了。。原理是在foreach哈面一个tag 使用angular写入。。检测这个tag的状态,如果可以,说明已经加载完成。。。
<div >{{'...'}}</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