Atitit.angular.js 使用最佳实践原理与常见问题解决与列表显示案例 attilax总结

本文范围 1
Angular的优点 1
2.1. 双向数据绑定 1
2.2. dsl化 2
2.3. 依赖注入 2
2.4. 指令 2
手动绑定数据spa方式以及与ajax 与dwr的集成 2
格式化数据 2
4.1. 多字段组合格式化 3
4.2. 输出html 4
输出作为函数参数调用 4
加载完成事件 5
常见错误 5
7.1. Atitit.angular.js FilterProvider filter [$injector:unpr] 5
AngularJS的适合之处 5
8.1. Angular vs jquery tmpl.js 6
Angular的问题 6
9.1. 不利于开发者进行调试， 6
9.2. 学习进阶难。 6
参考 7

1.本文范围
主要使用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)
{
[Math Processing Error]('#formx').scope().$digest();

}
4.格式化数据
需要建立一个模块filter 比如常见的日期格式化

使用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的输出。

还需要通过通过[Math Processing Error]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.输出作为函数参数调用
好像不能直接输出，只好借鉴输出
终止

6.加载完成事件
找了半天资料，没有找到完成事件的资料。。只好自己使用轮询的方式来实现了。。原理是在foreach哈面一个tag 使用angular写入。。检测这个tag的状态，如果可以，说明已经加载完成。。。

好像是异步的，需要进一步明确

7.常见错误
7.1.Atitit.angular.js FilterProvider filter [$injector:unpr]

“Error: [[Math Processing Error]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总结相关推荐

JAVA应用开发MQ实战最佳实践——Series2：消息队列RocketMQ性能测试案例
简介:JAVA应用开发MQ实战最佳实践--Series2:消息队列RocketMQ性能测试案例往期内容 JAVA应用开发MQ实战最佳实践--Series1:RocketMQ综述及代码设计 1. 消息 ...
分布式架构原理解析常见问题解决
大家觉得写还可以,可以点赞.收藏.关注一下吧! 也可以到我的个人博客参观一下,估计近几年都会一直更新!和我做个朋友吧!https://motongxue.cn 分布式架构原理解析常见问题解决 1. 分 ...
React.js 2016 最佳实践徬梓阅读 1584收藏 71
为什么80%的码农都做不了架构师?>>> 译者按:近几个月React相关话题依旧火热,相信越来越多的开发者在尝试这样一项技术,我们团队也在PC和移动端不断总结经验.2016来了 ...
ngCloak 实现 Angular 初始化闪烁最佳实践
在做angular的SPA开发时,我们经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁.对于这个问题由于JavaScript去 ...
vue.js+boostrap最佳实践
一.为什么要写这篇文章最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
js语法+dom+js图片库+最佳实践+图片库改进版
[2]js语法 [2.2.4]数据类型类型1)字符串 var mood = 'happy'; var moood = "happy"; 类型2)数值: var age = 33. ...
《自动化测试最佳实践：来自全球的经典自动化测试案例解析》一一1.3　建立自动化策略...
1.3 建立自动化策略我们需要在不破坏现有功能的前提下发布产品的新功能特性.而且,需要尽快知道一个新的代码变动是否会引起回归测试的失败.手动回归测试在每两周的迭代后期才能给予我们反馈,以至于没有时间 ...
《自动化测试最佳实践：来自全球的经典自动化测试案例解析》一一2.4　开发内部测试工具...
2.4 开发内部测试工具该内部测试工具的基本功能是由3 ~ 4位开发人员在6 ~ 9个月的时间内开发出来的,是用Java语言编写的.第一个版本开发之后,一个人专门负责对其进行维护和进一步的开发,显然 ...
《自动化测试最佳实践：来自全球的经典自动化测试案例解析》一一1.6　正确度量...
1.6 正确度量如何知道我们是否取得进步了呢?如何衡量成功?我们需要一些度量.我们的构建过程会对测试进行统计,所以很容易跟踪每一个层次的测试数量:JUnit.FitNesse断言和测试页面.Cann ...
《自动化测试最佳实践：来自全球的经典自动化测试案例解析》一一2.8　现状...
2.8 现状该工具已经用于不同的数据库产品的测试当中,而且现在是一个开源工具,请参阅http: //kenai.com/projects/jet.

Atitit.angular.js 使用最佳实践原理与常见问题解决与列表显示案例 attilax总结

Atitit.angular.js 使用最佳实践原理与常见问题解决与列表显示案例 attilax总结相关推荐

最新文章

热门文章

Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结

Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结相关推荐

最新文章

热门文章

Atitit.angular.js 使用最佳实践原理与常见问题解决与列表显示案例 attilax总结

Atitit.angular.js 使用最佳实践原理与常见问题解决与列表显示案例 attilax总结相关推荐