标签：rect str substring 编写 cto log res html set
angularJS在数据处理方面很优秀。
使用angularJ给我感觉就像在写模板，然后对模板填入内容，只是这些内容不在是
在html页面编写，而是以数据的方式添加进去，这个也大大提高了编写的效率。
我们的业务逻辑都可以在controller里编写，如DOM操作，数据处理等，还有一些angularJS
内置好的服务和过滤处理，但这些还不够，在开发中，总会有一些angularJS没有的，所以就自定义
服务，自定义指令，自定义过滤器，这些都是很有必要的。
在自定义中，觉得服务的定义方式最多，至少有五种，而各有各的差别，如：factory,serivce,provider,
value,constant。
其实它们理解起来不怎容易，但理解了provider，其他的就很好理解了。
而我的理解就是它们能不能在config里修改，如factory，value是不能修改的。
value和constant意思差不多，都是常量的意思。
factory,serivce也是差不多意思，生成自定义服务。
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script> var m1 = angular.module(‘myApp‘,[]); /*m1.factory(‘hello‘,function(){ return { name : ‘123‘, show : function(){ console.log(this.name); } }; });*/ m1.provider(‘hello‘,function(){ return { $get : function(){ return{ name : ‘123‘, show : function(){ console.log(this.name); } } } }; }); m1.controller(‘Aaa‘,[‘$scope‘,‘hello‘,function($scope,hello){ $scope.name = hello.name; hello.show(); }]); </script> </head> <body ng-controller="Aaa"> <div>{{name}}</div> </body> </html>
从这可以看出provider多个$get的键值。这是因为factory返回就是$get键值的对象，所以不需要编写$get，而$get之外的是可以被
config修改，所以这样可以实现到修改服务为合适自己服务。
自定义指令：
自定义指令，给我感觉就是编写组件的或者插件。
它是编写好命令，然后像html里的属性一样，声明式命令。如：
<p align="center">我居中了</p>
angularJs：
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute;} </style> <script src="jquery-1.11.1.js"></script> <script src="angular.min.js"></script> <script> var m1 = angular.module(‘myApp‘,[]); m1.directive(‘myDrag‘,function(){ return { restrict : ‘A‘, link : function(scope,element,attr){ var disX = 0; var disY = 0; //console.log(typeof attr.myDrag); attr.myDrag = angular.equals(attr.myDrag,‘true‘); element.on(‘mousedown‘,function(ev){ var This = this; disX = ev.pageX - $(this).offset().left; disY = ev.pageY - $(this).offset().top; if(attr.myDrag){ var $line = $(‘<div>‘); $line.css({ width : $(this).outerWidth() , height : $(this).outerHeight() , position : ‘absolute‘ , left : $(this).offset().left , top : $(this).offset().top , border : ‘1px gray dotted‘}); $(‘body‘).append($line); } $(document).on(‘mousemove‘,function(ev){ if(attr.myDrag){ $line.css(‘left‘,ev.pageX - disX); $line.css(‘top‘,ev.pageY - disY); } else{ $(This).css(‘left‘,ev.pageX - disX); $(This).css(‘top‘,ev.pageY - disY); } }); $(document).on(‘mouseup‘,function(){ $(document).off(); if(attr.myDrag){ $(This).css(‘left‘,$line.offset().left); $(This).css(‘top‘,$line.offset().top); $line.remove(); } }); return false; }); } }; }); m1.controller(‘Aaa‘,[‘$scope‘,function($scope){ }]); </script> </head> <body ng-controller="Aaa"> <div id="div1" my-drag="false"></div> </body> </html>
只是这是angularJS帮我们实现这种功能。
自定义过滤器
这是对数据进行格式化的，有种像筛选一样，但其实过滤比较贴切，就如它的名字一样。
数据经常过滤器，进行过滤，，然后输出我们所需的数据。
但内置的过滤器的功能只能实现满足一部分需求，在现实中还有很多需求它是没有的。
所以自定义过滤器时很有需要的。
如：
字符串第一个字母大写；
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script> var m1 = angular.module(‘myApp‘,[]); m1.filter(‘firstUpper‘,function(){ return function(str){ return str.charAt(0).toUpperCase() + str.substring(1); } }); m1.controller(‘Aaa‘,[‘$scope‘,‘$filter‘,function($scope,$filter){ $scope.name2="zhang"; /*这是一种过滤的方式*/ $scope.name = $filter(‘firstUpper‘)(‘hello‘); }]); </script> </head> <body> <div ng-controller="Aaa"> <p>{{name}}</p> <!-- 这也是一种过滤的方式 --> <p>{{name2 | firstUpper}}</p> </div> </body> </html>
以上是目前的理解。
标签：rect str substring 编写 cto log res html set
原文地址：http://www.cnblogs.com/zhangzhicheng/p/6059483.html
