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: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