angularJS自定义那些事

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>

 

以上是目前的理解。

 

转载于:https://www.cnblogs.com/zhangzhicheng/p/6059483.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值