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} 如 ...
随机推荐
- IIS服务的命令行方式重启命令
打开IIS配置窗口的CMD命令:开始---运行---CMD----输入inetmgr 直接使用CMD我们可以操作很多事情,比如启动IIS,重启IIS,停止IIS 重启IIS服务器,开始->运行- ...
- iOS-详细解读Const
在过去开发中,几乎每一个人都会定义宏,因为这东西实在是好用,省去了代码量而且还不容易错,而我这篇文中所介绍的const可以完美替带宏定义. 并且苹果也建议大家抛弃宏定义而转投const ,并且swif ...
- 简单BigDecimal运算精度
项目中遇到了数值运算,如网上所写的,一般有这几个方法: /** * 提供精确的加法运算. * @param v1 被加数 * @param v2 加数 * @return 两个参数的和 */ publ ...
- DateTime与DateTime?赋值问题以及null类型的如何赋值问题
解决方案: //主要用到向下兼容原理,DateTime?继承于DateTime: string req = "为字符串的参数"; DateTime? dt = null; Date ...
- Android—LayoutInflater学习笔记
LayoutInflater的的主要用处:使用LayoutInflater来载入界面,类似于findViewById()在Activity中加载Widget组件一样.区别在于与LayoutInflat ...
- Linux下安装mysql数据库
l 检查是否已安装mysql的相关包 [root@localhost ~]# rpm -qa|grep -i mysql MySQL-server-5.6.19-1.el6.x86_64 MySQL- ...
- ZABBIX冗余架构构筑（Centos6.4+pacemaker+corosync+drbd）
基本构成: 用pacemaker+corosync控制心跳和资源迁移 用drbd同步zabbix配置文件和mysql数据库 所有软件都用yum安装至默认路径 主机的drbd领域挂载至/drbd,备机不 ...
- Excel使用技巧总结
Excel博大精深,此文用来记录Excel的使用技巧 1.多个单元格值添加单引号,比如:A1单元格的值为123444,添加单引号之后变为'123444',可以在B1或者其他任一空的单元格内输入公式:& ...
- 关于最近的CSRF攻击
摘要 最近公司内部爆出一大波页面没有加token校验,然后各路大神就开始进行CSRF攻击了.CSRF攻击:攻击者盗用了你的身份,以你的名义发送恶意请求.CSRF能够做的事情包括:以你名义发送邮件,发消 ...
- 压力测试工具ab使用
ab全名是apache bench,是apache自带的一款压力测试工具.它通过创建多个线程来模拟并发,测试目标是基于URL的,因此不论是什么web服务器都可以支持. 使用ab非常简单,进入apach ...