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} 如 ...
随机推荐
- css样式重置，不建议用通配符
由于各个浏览器对css样式的默认样式不一致,所以有必要进行样式重置.在网上看到很多建议使用 *{margin:0;padding:0} 重置margin和padding.建议不这样子使用,原因主要是性 ...
- angular文件引入带来的绑定问题
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script ...
- c1ctf2016 wp
web: 1.web萌新福利 没啥好说的,右键查看源码得key 2.you are not admin 一看题目,就想到http头修改,常见的x-forwarded-for,referer,host, ...
- gulp实用插件总结
gulp-sass:预编译sass; gulp-imagemin:压缩png.jpj.git.svg格式图片 gulp-minfy-css:压缩css文件 gulp-rename 重命名文件,把一个文 ...
- 用CSS3的transform来做一个立方体
有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页,当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果,可能正是由于这个效 ...
- JavaWeb开发学习(一)-JavaWeb开发概述
1.Web相关概念 Web程序也就是一般所说的网站,由服务器.客户端浏览器以及网络组成.Web程序的好处是使用简单,不需要安装.学习,有一台电脑.一根网线就可以使用.Web程序不是一般意义上的网站.网 ...
- 如何为Eclipse安装主题(Color Theme)
Eclipse开发环境默认都是白底黑字的,看到同事的Xcode中设置的黑灰色背景挺好看的,就去网上查了一下.发现Eclipse也可以设置主题. 方法1:你可以从Eclipse Marketplace中 ...
- Linux内核--网络栈实现分析（六）--应用层获取数据包（上）
本文分析基于内核Linux 1.2.13 原创作品,转载请标明http://blog.csdn.net/yming0221/article/details/7541907 更多请看专栏,地址http: ...
- Intent组件的传参应用
Intent是要执行的操作的抽象描述 可以在startActivity.startService等方法中使用 最为常见的用法是在Activity之间传递数据 跳转并传值: Intent intent= ...
- 在Python中调用glutInit遇到OpenGL.error.NullFunctionError的解决方法
在window10 64bit + Python环境下,通过pip install PyOpenGL成功之后,无奈执行到glutInit()时候总是报错. OpenGL.error.NullFunct ...