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自定义那些事的更多相关文章

  1. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  2. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  4. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  5. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

  6. angularjs 自定义服务的三种方式

    angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...

  7. angularJs自定义服务（实现签名和加密）

    写在前面: angularJS是google公司主推的js开发优秀框架... 页面展示: 在应用中进行加密是普遍存在的,个人建议在前端实现加密签名(前端加密是否必要来自知乎:http://www.zh ...

  8. AngularJs自定义指令详解（6） - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

  9. AngularJs自定义指令详解（5） - link

    在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...

随机推荐

  1. Java 元注解

    元注解@Target,@Retention,@Documented,@Inherited * * @Target 表示该注解用于什么地方,可能的 ElemenetType 参数包括: * Elemen ...

  2. Bootstrap的安装

    在了解了HTML和CSS.JS之后,我咨询了之前做过这一块的学长,得知了Bootstrap的存在. Bootstrap (Web前端CSS框架) Bootstrap,来自 Twitter,是目前很受欢 ...

  3. c#dataGridView奇偶数行变色

    dataGridView_Performance.RowsDefaultCellStyle.BackColor = Color.Bisque; dataGridView_Performance.Alt ...

  4. No operation was found with the name {http://impl.service.xq.com/}sayHi

    org.apache.cxf.common.i18n.UncheckedException: No operation was found with the name {http://impl.ser ...

  5. 如何为Eclipse安装主题(Color Theme)

    Eclipse开发环境默认都是白底黑字的,看到同事的Xcode中设置的黑灰色背景挺好看的,就去网上查了一下.发现Eclipse也可以设置主题. 方法1:你可以从Eclipse Marketplace中 ...

  6. 练习1-12：编写一个程序，以每行一个单词的形式打印其输入（C程序设计语言 第2版）

    #include <stdio.h> #define NOT_BLANK 1 #define BLANK 0 main() { int c; int last_ch = NOT_BLANK ...

  7. iOS 里面 NSTimer 防止 循环引用

    使用NSTimer的类 #import "TBTimerTestObject.h" #import "TBWeakTimerTarget.h" @interfa ...

  8. Android 自定义View 三板斧之三——重写View来实现全新控件

    通常情况下,Android实现自定义控件无非三种方式. Ⅰ.继承现有控件,对其控件的功能进行拓展. Ⅱ.将现有控件进行组合,实现功能更加强大控件. Ⅲ.重写View实现全新的控件 本文来讨论最难的一种 ...

  9. 可嵌入式的动态http服务minihttp组件

    minihttp是基于c#实现的轻量级的动态WEB服务组件,通过minihttp可以轻松地构一个动态的WEB服务并嵌入到.NET程序中运行部署.由于minihttp完全基于托管代码实现,所以可以轻松运 ...

  10. ORM查询语言（OQL）简介--高级篇（续）：庐山真貌

    相关文章内容索引: ORM查询语言(OQL)简介--概念篇 ORM查询语言(OQL)简介--实例篇 ORM查询语言(OQL)简介--高级篇:脱胎换骨 ORM查询语言(OQL)简介--高级篇(续):庐山 ...