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自定义那些事的更多相关文章
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
- angularjs 自定义服务的三种方式
angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...
- angularJs自定义服务（实现签名和加密）
写在前面: angularJS是google公司主推的js开发优秀框架... 页面展示: 在应用中进行加密是普遍存在的,个人建议在前端实现加密签名(前端加密是否必要来自知乎:http://www.zh ...
- AngularJs自定义指令详解（6） - controller、require
在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...
- AngularJs自定义指令详解（5） - link
在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...
随机推荐
- WebView的基本使用方法
WebView是View的子类,它主要用来显示网页的. 因为我们要用到网络,所以需要先添加权限:在 Anroidmanifest <manifest ... > <uses-perm ...
- linux下配置ssledge代理服务器
ssl edge 是一个非常好用的VPN/proxy, 比云梯 稳定快速的多. 在LINUX下开发 Titanium 需要用到各种FQ,所以它是必备工具. 1. 根据自己付费后的用户名和密码,下载 ...
- 测试文档锁：doc.LockDocument()
/// <summary> /// 总结:用到DocumentManager.Open(filePath)时,如果是ForWrite,就需要用到lock文档锁. /// </summ ...
- 重编译Linux命令源代码
转: http://blog.csdn.net/endoresu/article/details/6967435 以su命令为例. 查看su命令的路径: # which su /bin/su 查看su ...
- ok
第一个姑娘该是个爱你的人,出现在你没法区分爱和饥渴的时候.那时候你还在青春期的尾巴上,满脑子的性冲动混合着韩剧爱情幻想.你自尊脆弱而又怯懦无助,随便抓住哪一根稻草都当是救命的灵药. 她也许相貌平平,但 ...
- CXF实现webservice
虽然网上有很多cxf的教程,但还是要自己写写, “好记性不如烂笔头” 1.服务端 1.1 DEMO,用于测试传递对象 package com.xq.model; import javax.persi ...
- 基于AutoCAD的ObjectARX之NET扩展(mcnetarx)-AcdbEntMake
1.创建一个结果缓冲区. 2.调用AcdbEntMake创建对象. 示例: ' 创建文字实体 Dim rb As ResultBuffer = New ResultBuffer rb.Add(New ...
- java和android及IOS对接RSA加密经验
1.网上找的java生成RSA密钥对的例子,产生的字附串实际上是hax后和密钥串 你可以将他们当成静态字附串存在java代码里 2.android和java可以代码复用,IOS对接比较麻烦 3.IOS ...
- [1008]harder_prime
素数定义:一个大于1的整数,如果它的约数如果只有1和它本身,那么它就是一个素数. 回文数定义:一个整数把它的各位数字倒过来还是它本身,那么它就是回文数,比如说2,99,393. 回文素数定义:一个数如 ...
- Visual Studio 2013 Nuget控制台无法找到程序包
前几天因为公司的项目使用的是MVC4框架,用VS2015不方便新增控制器,切换回2013.用了一个大半年没有用的功能,就是Nuget控制台. 当我尝试使用Nuget控制台的命令安装一个Package的 ...