首页 > 代码库 > angularJS自定义那些事

angularJS自定义那些事

2024-08-20 17:20:56   222人阅读

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>

 

以上是目前的理解。

 

angularJS自定义那些事


联系
我们