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

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>

 

以上是目前的理解。

 

angularJS自定义那些事