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} 如 ...
随机推荐
- [转] How to change font settings for all UI elements (toolbar and context menus, property editors, etc.)
https://www.devexpress.com/Support/Center/Question/Details/S35762
- android wifi 获取扫描结果
1.1 framework部分: 1.2 supplicant部分: hdd_cfg80211_scan_done_callback -> wlan_hdd_cfg80211_update_bs ...
- centos 安装 apache2.4
1. centos 安装 apache2.4 安装基础依赖:# yum install gcc gcc-c++ glibc glibc-devel gd gd-devel zlib zlib-deve ...
- 为Apache动态增加模块
Apache已经安装完毕并投入运行,但是后来却发现部分模块没有加载,当然有两个方法: 1. 一是完全重新编译Apache, 再安装 2. 编译模块为SO文件,使用LoadModule指令加载扩展模块. ...
- js 将long型字符串转换成日期格式
工作中难免会碰到日期的转换,往往为了方便,后台都是把时间以long型(形如1343818800000)返回给web前端.再有前端自己根据页面需求转换成相应的日期格式.这里将我常用的一个转换时间的函数贴 ...
- iOS 标题内容待定
UITableView: UITableViewCell的声明文件.所包含的: UIView控件(contentView,作为其它元素的父控件) -- 容器 两个UILabel控件( textLabe ...
- linux redmine 搭建
redmine搭建过程参考:http://www.tuicool.com/articles/InMbym 注意事项: 配置文件必须以2个空格开始 启动(指定了端口,和绑定的IP): ruby bin/ ...
- 测试了几款 C# 脚本引擎 , Jint , Jurassic , Nlua, ClearScript
测试类 public class Script_Common { public string read(string filename) { return System.IO.File.ReadAll ...
- [.NET领域驱动设计实战系列]专题九：DDD案例：网上书店AOP和站点地图的实现
一.引言 在前面一专题介绍到,要让缓存生效还需要实现对AOP(面向切面编程)的支持.所以本专题将介绍了网上书店案例中AOP的实现.关于AOP的概念,大家可以参考文章:http://www.cnblog ...
- [.NET领域驱动设计实战系列]专题六：DDD实践案例：网上书店订单功能的实现
一.引言 上一专题已经为网上书店实现了购物车的功能了,在这一专题中,将继续对网上书店案例进行完善,本专题将对网上书店订单功能的实现进行介绍,现在废话不多说了,让我们来一起看看订单功能是如何实现的吧. ...