angular实例教程(用来熟悉指令和过滤器的编写)
angular的插件太少了, 所以很多指令和过滤器都要自己写, 所以对指令传进来的参数, 以及angular编译的流程更加熟悉才行写出好的插件, 有些简单的指令是参考angularUI里面, 作为自己的angular指令笔记;
1：angular的字符串截取指令
2：angular的国际化
3：angular的xhr案例
4：自己写angular中的for指令书写;
第一个是truncate， 这就是溢出隐藏的效果， css中是通过text-overflow:ellipsis; overflow:hidden; display:block 实现的, 如果JS要实现这些效果,也很简单, 现在通过angular的指令实现了, 感觉爽爽哒, 因为是在chrome下写的demo所以没有做别的浏览器兼容，chrome的开发工具太强大了啦 , 自己点击打开即可查看啦， 啦啦啦， 你懂的, 为什么要这么多"啦"啦;
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
</head>
<body ng-controller="test0Controller">
<ul>
<li ng-repeat="s in strs">
{{s | characters:8}}
</li>
</ul>
<script type="text/javascript">
var app = angular.module("app",["truncate"]);
app.controller("test0Controller" , function($scope) {
$scope.strs = [
"test0Controller",
"test20Con2troller1",
"2test20Controller2",
"tes2t0Contr2oller"
];
});
angular.module("truncate",function(){})
. filter("characters",function(){
return function(input , number) {
return typeof input === "string" ?
input.length < number ?
input : (input.slice(0,number-4) + "....")
: input
}
});
</script>
</body>
</html>
angular有个大名鼎鼎的国际化（angular国际化）的插件都知道了，但是用的人不多啊， 如果要自己实现国际化该如何实现呢， 可以参考我的指令， 10行代码就足够了;
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
</head>
<body>
<div translatediv ng-controller="tr">
{{hehe}}//
<br>
<button ng-click="setLanguage('ch')">
ch
</button>
<button ng-click="setLanguage('en')">
en
</button>
<button ng-click="setLanguage('default')">
default
</button>
</div> <script type="text/javascript">
var app = angular.module("app",["translate"]);
app.controller("tr", function($scope,$timeout) {
$scope.trans = {
en : {"hehe" : "enenen"},
ch : {"hehe" : "chchch"},
default : {"hehe" : "nimo"}
};
});
angular.module("translate",function() {})
.factory("cache", function() {
var arr = [];
return {
set : function(arg) {arr.push(arg); return arr.splite(arr.indexOf(arg),1) },
del : function(arg) { return arg === arr.splite(arr.indexOf(arg),1) }
}
})
.directive("translatediv",["cache","$timeout",function(cache,$timeout) {
return {
link : function($scope, $elem, $attr) {
var trans = $scope.trans;
$scope.setLanguage = function(arg) {
//alert($scope)
for(var prop in trans) {
if(arg === prop) {
for(var nameVar in trans[prop]) {
$scope[nameVar] = trans[prop][nameVar];
};
};
};
}; $timeout(function(){
$scope.setLanguage("default");
},0);
}
}
}])
</script>
</body>
</html>
实现要说的是filltext这个网站真心不错，老外真是无聊到家了， 前台只要请求一个url就返回一堆假数据（mock），比如：http://filltext.com/?rows=10&fname={firstName}&lname={lastName}&callback=JSON_CALLBACK , 这个例子非常简单, 话说angular和jQ思想真的差别很大啊；
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
</head>
<body>
<div ng-controller="refresh">
<angular-refresh url="http://filltext.com/?rows=10&fname={firstName}&lname={lastName}&callback=JSON_CALLBACK" ng-model="people" interval="5000" method="jsonp">
</angular-refresh>
<ul ng-repeat="person in people">
<li>{{person.fname}} {{person.lname}}</li>
</ul>
</div>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("refresh", function() { });
app.directive("angularRefresh",function($http,$timeout,$parse) {
return {
restrict : "AE",
transclude : true,
template : "<div></div>",
compile : function(elem, attrs) {
var interval = attrs.interval;
return function($scope, $elem, $attrs ) {
var xhr = function() {
$http[$attrs.method]($attrs.url).then(function(data){
$parse($attrs.ngModel).assign($scope,data.data);
},function(){alert("wrong")})
}; $timeout(function() {
xhr();
}, parseInt($attrs.interval) || 5000 );
}
}
}
});
</script>
</body>
</html>
angular中的for指令真是太好用了, 如果自己实现一个岂不是更好。 其实angular最厉害还是双向绑定， 和指令联合在一起 ，从另一种方面来说就是：“酷炫”：
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
</head>
<body>
//自定义指令实现forin循环
<div ng-controller="forin">
<div>
{{xs | json}}
</div>
<for x in xs>
<p>{{ x }}</p>
</for>
<button ng-click="xs = [1,2,3,4,5,6,7,8]">change</button>
</div>
<script type="text/javascript">
var app = angular.module("app", []); app.controller("forin", function( $scope ) {
$scope.xs = ["0adsf22","1sdf","sdf2","3adsf","4sdf"];
});
app.directive("for", function($compile) {
return {
restrict : "AE",
replace : true,
compile : function(ele, attrs, cloneTransclude) {
var outerHTML = ele.get(0).outerHTML;
//debugger;
var regResult = outerHTML.match(/for([\s\w=\"]*)in([\s\w=\"]*)/i);
var prop = regResult[1].match(/[a-z]/g).join("");
var props = regResult[2].match(/[a-z]/g).join("");
var compile = $compile(ele.html())
ele.empty();
return function($sc, $ele, $attrs) {
//这个有报了一个undefined, 不知道是什么原因, 你们知道的话指导我下; //监听这个对象是否发生改变;
$sc.watch(props,function() {
for(var i=0, len = $sc[props].length ;i<len;i++) {
var newSc = $sc.$new();
newSc[prop] = $sc[props][i];
var node = compile(newSc,angular.noop);
$ele.append(node);
};
});
}
}
}
});
</script>
</body>
</html>
上次大概浏览了angular的源代码， 对写出更好的指令还是有帮助的， 就像用jq看jQ源码一样的。
angular实例教程(用来熟悉指令和过滤器的编写)的更多相关文章
- vue-品牌管理案例-指令和过滤器
过滤器的基本使用 定义一个过滤器 <div id="app"> <p>{{ msg | msgFormat('疯狂+1', '123') | test }} ...
- angular实例
angular实例教程(用来熟悉指令和过滤器的编写) angular的插件太少了, 所以很多指令和过滤器都要自己写, 所以对指令传进来的参数, 以及angular编译的流程更加熟悉才行写出好的插件 ...
- BPEL 实例教程
http://www.oracle.com/technetwork/cn/articles/matjaz-bpel1-090722-zhs.html BPEL 实例教程 作者:Matjaz Juric ...
- 转载 《AngularJS》5个实例详解Directive（指令）机制
<AngularJS>5个实例详解Directive(指令)机制 大漠穷秋 本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请 ...
- [Python][flask][flask-wtf]关于flask-wtf中API使用实例教程
简介:简单的集成flask,WTForms,包括跨站请求伪造(CSRF),文件上传和验证码. 一.安装(Install) 此文仍然是Windows操作系统下的教程,但是和linux操作系统下的运行环境 ...
- Windows 8实例教程系列 - 开篇
原文:Windows 8实例教程系列 - 开篇 2012年10月26日,微软发布Windows 8操作系统以及自主品牌平板电脑Surface,Windows作为世界上最流行的操作系统,发布一周内,下载 ...
- Windows 8实例教程系列 - 布局控制
原文:Windows 8实例教程系列 - 布局控制 与传统应用类似,Windows store应用允许开发人员通过布局控件管理应用UI. 本篇将讨论Windows8布局设计控制. Windows 8布 ...
- 运行caffe自带的mnist实例教程
运行caffe自带的mnist实例教程 本文结合几篇博文总结下来的,附上其中一篇原博文链接以供参考:http://blog.sina.com.cn/s/blog_168effc7e0102xjr1.h ...
- Android中ViewPager实现滑动条及与Fragment结合的实例教程
ViewPager类主要被用来实现可滑动的视图功能,这里我们就来共同学习Android中ViewPager实现滑动条及与Fragment结合的实例教程,需要的朋友可以参考下 自主实现滑动指示条先上一个 ...
随机推荐
- [译]OpenStack Object Storage Monitoring
注:翻译的不完整,主要是有些地方翻译后反而妨碍理解,有些不知道怎么翻,anyway,需要时拿来用用也是可行的,顺便共享啦.欢迎提意见. 一个OpenStack Object Storage(OSOS) ...
- spring hadoop 访问hbase入门
1. 环境准备: Maven Eclipse Java Spring 版本 3..2.9 2. Maven pom.xml配置 <!-- Spring hadoop --> <d ...
- Java中的流
一.Java中流的原理 流是个抽象的概念,是对输入输出设备的抽象,Java程序中,对于数据的输入/输出操作都是以“流”的方式进行.设备可以是文件,网络,内存等. 四种基本流InputStream,Ou ...
- 【ASP.NET 进阶】无刷新上传图片之一：利用一般处理程序
效果图: 源代码地址:https://github.com/YeXiaoChao/UploadThePic
- c++仿函数 functor
内容整理自国外C++教材 先考虑一个简单的例子:假设有一个vector<string>,你的任务是统计长度小于5的string的个数,如果使用count_if函数的话,你的代码可能长成这样 ...
- [ubuntu]中文用户目录路径改英文
ubuntu中文版home文件夹里用目录的"桌面"."图片"."视频"虽然对于中文使用者看起来舒适直观,但是对于bash使用来说简直是障碍. ...
- 有向图的拓扑排序算法JAVA实现
一,问题描述 给定一个有向图G=(V,E),将之进行拓扑排序,如果图有环,则提示异常. 要想实现图的算法,如拓扑排序.最短路径……并运行看输出结果,首先就得构造一个图.由于构造图的方式有很多种,这里假 ...
- 类似区间计数的种类并查集两题--HDU 3038 & POJ 1733
1.POJ 1733 Parity game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 5744 Accepted: ...
- 用uGUI开发自定义Toggle Slider控件
一.前言 写完<Unity4.6新UI系统初探>后,我模仿手机上的UI分别用uGui和NGUI做了一个仅用作演示的ToggleSlider,我认为这个小小的控件已能体现自定义控件的开发过程 ...
- Jenkins学习六：修改Jenkins用户的密码
很多时候在使用jenkins的时候忘记密码了,遇到这种情况,可以看看下面的讲解. Jenkins专有用户的数据存放在JENKINS_HOME/users目录.users目录的结构你一看就懂.users ...