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源码一样的。
天道酬勤
