Atitit.angular.js
1.本文范围
主要使用Angular
实现mvchtml模板功能。。
2.Angular的优点2.1.双向数据绑定
更加容易实现dsl
处理表单数据和编辑表格数据带来了很多优点
不过Jq的form序列化也是很简单的
在Angular中，操纵数据不是通过抓取和注入。一般通过数据绑定来实现，野蛮抓取注入数据。也能够改变每个组件的状态，不过在切换时就会暴露出问题。
2.2.dsl化
ng-show，ng-hide，ng-class和ng-if作为模板的控制语句——所有这一切都让人惊奇。
2.3.依赖注入2.4.指令3.手动绑定数据
设置自动绑定数据为空列表
functionlistCtrl($scope){
$scope.listO7=[];
}
Click事件
functionbindTableData(data)
{
$(‘#tabid1’).scope().listO7=data;
$(‘#formx’).scope().$digest();
}
4.格式化数据
需要建立一个模块filter比如常见的日期格式化
varhomeModule=angular.module("atiMod",[]);
homeModule.filter(‘timeFmtO7’,function(){
returnfunction(item){
try{
returnitem.Format("yyyy-MM-ddhh:mm:ss");
}catch(e){return"";}
}
});
使用filter，使用竖杠管道符号
{{itemO7.ds_id|’timeFmtO7′}}
作者::
转载请注明来源：
4.1.多字段组合格式化
调用
{{itemO7.download_status+’,’+itemO7.startdownFlag+’,’+itemO7.trueDownFlag|statFmt}}
书写过滤器
homeModule.filter(‘statFmt’,function(){
returnfunction(item){
//alert(item);
vararr=item.split(",");
vardownedflag=arr[0];
varstartdownFlag=arr[1];
varfailFlag=arr[2];
if(downedflag==1&&failFlag==1)
return"已下载";
if(downedflag=="null"&&startdownFlag==1&&failFlag=="null")
return"下载中";
}
});
4.2.输出html
angularJs
但是这里我们需要其显示
通过
<tdng-bind-html="itemO7.downloadStatus+’,’+itemO7.startdownFlag+’,’+itemO7.trueDownFlag+’,’+itemO7.dsId|statFmt"></td>
还需要通过通过$sce服务来实现html的展示。
homeModule.filter(‘statFmt’,[‘$sce’,function($sce){
returnfunction(item){
// alert(item);
vararr=item.split(",");
vardownedflag=arr[0];
varstartdownFlag=arr[1];
varfailFlag=arr[2];
vardataid=arr[3];
if(failFlag==3)
return$sce.trustAsHtml("
if(failFlag==4)
return$sce.trustAsHtml("
}
}]);
5.输出作为函数参数调用
好像不能直接输出，只好借鉴输出
<ahref="javascript:void(0)"onclick="stop(this.id,this)"id="{{itemO7.dsId}}">终止</a>
6.加载完成事件
找了半天资料，没有找到完成事件的资料。。只好自己使用轮询的方式来实现了。。原理是在
<divid="finishTag"style="display:none">{{‘…’}}</div>
if(txt.indexOf("{",0)>=0)//canfind{{brk,,,notfinish
{
logx("find{{");
}
好像是异步的，，需要进一步明确
7.常见错误7.1.Atitit.angular.jsFilterProviderfilter[$injector:unpr]
"Error:[$injector:unpr]$injector/unpr?p0=stateFmt1FilterProvider%20%3C-%20stateFmt1Filter\
新不上这个filter
原因
刷新..thenok
8.AngularJS的适合之处
AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样，这也会损失一部分灵活性。换句话说，并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。
如游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用，和CRUD应用就有很大的不同，它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。
8.1.Angularvsjquerytmpl.js
格式化方面
9.Angular的问题9.1.不利于开发者进行调试，
常常输出信息离题十万八千里
9.2.学习进阶难。
使用Angular需要学习大量的概念，包括但不限于：
·模块
·控制器
·指令
·作用域
·模板
·链式函数
·过滤器
·依赖注入
10.参考
Atitit.加载完成事件的设计angular.js
paip.
Atitit.jsmvc
我由Angular转向React，为什么？-CSDN.NET
将
版权声明：本文为博主原创文章，未经博主允许不得转载。
用爱生活，你会使自己幸福！用爱工作，你会使很多人幸福！
