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} 如 ...
随机推荐
- Lisp 函数
(quote x) [返回x] >>>>>>>>>>>>>>>>>>>>> ...
- java覆盖和隐藏
隐藏指的是子类把父类的属性或者方法隐藏了,即将子类强制转换成父类后,调用的还是父类的属性和方法,而覆盖则指的是父类引用指向了子类对象,调用的时候会调用子类的具体方法. (1) 变量只能被隐藏(包括静态 ...
- iOS开发零基础--Swift篇 元组
元组的介绍 元组是Swift中特有的,OC中并没有相关类型 它是什么呢? 它是一种数据结构,在数学中应用广泛 类似于数组或者字典 可以用于定义一组数据 组成元组类型的数据可以称为“元素” 元组的定义 ...
- Web项目的发布新手教程
ASP.NET服务器发布新手教程 ——本文仅赠予第一次做Web项目,需要发布的新手们,转载的请注明出处. 首先我们说一下我们的需要的一个环境.我使用的是Visual Studio 2010,版本.NE ...
- Activity类生命周期
Activity通常就是一个单独的屏幕.每一个活动都被实现为一个独立的类,并且从活动基类中继承而来,活动类将会显示由视图控件组成的用户接口,并对事件作出响应. 从开发者角度看,Activity是一个J ...
- LEFT JOIN 多表查询的应用
表结构如下:只把主要字段列出 表一:付款记录表 Gather 字段:GatherID , AccountID, PayMents 金额, PayWay 付款方式 1 现金 2 刷卡 表2:销售记录 ...
- HTTP03--DNS知识
一.域名解析过程 1. 浏览器检查自身缓存,缓存时间为几分钟到小时不等,通过设置TTL属性确定. 2. 若1未找到,则查OS缓存,如windows下的host文件,linux的/etc/hosts文件 ...
- asp.net identity 2.2.0 在MVC下的角色启用和基本使用（一）
基本环境:asp.net 4.5.2 第一步:在App_Start文件夹中的IdentityConfig.cs中添加角色控制器. 在namespace xxx内(即最后一个“}”前面)添加 角色控制类 ...
- bootstrap-datetimepicker.js 设置开始时间的Bug。
原地址:http://www.malot.fr/bootstrap-datetimepicker 修改的地方有三处: 1. var months = this.setTitle('.datetimep ...
- log4net按时间日期，文件大小和个数生成日志文件
从启动模板生成的基于ABP的应用默认使用的log4net日志框架,当然你也可以使用其他的日志框架. ABP默认的log4net.config配置文件配置的很简单,将所有的日志都写到了一个txt文件中, ...