angular实例
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实例的更多相关文章
- angular实例教程(用来熟悉指令和过滤器的编写)
angular的插件太少了, 所以很多指令和过滤器都要自己写, 所以对指令传进来的参数, 以及angular编译的流程更加熟悉才行写出好的插件, 有些简单的指令是参考angularUI里面, 作为 ...
- angular 实例笔记之嵌套指令间的传参
最近在项目中遇到了需要嵌套指令的情况,指令在嵌套后子指令必须获得父指令中的数据来进行判断,但是在写传参的时候遇到了坑,因此记录下来,防止以后遗忘,个人的肤浅理解,欢迎大家留言讨论 首先,关于direc ...
- AngularJs angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...
- angular localStorage使用方法
var YourCtrl = function($scope, localStorageService, ...) { // To add to local storage localStorageS ...
- Angular - - angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...
- 初探angular
前言 angular4.0目前已经发布了,angular是mvw框架,所以对其有一个简单的了解还是很有必要的. 目前angular有中文官网,且文档介绍也都是4.x的,但是为了了解其发展过程,我们先了 ...
- angular的Dom操作
原文 https://www.jianshu.com/p/9d7249922bda 大纲 1.angular的DOM操作 2.为什么不能直接操作DOM? 3.三种错误操作DOM的方式 4.angula ...
- angular之Http服务
原文 https://www.jianshu.com/p/53e4a4bfad7d 大纲 1.什么是angular服务 2.服务的类别 3.认识angular的Http请求 4.简单实例 5.angu ...
- angular组件间的信息传递
原文 https://www.jianshu.com/p/82207f2249c1 大纲 1.父组件向子组件传递信息:通过属性 2.子组件向父组件传递信息:通过事件 3.父组件获取子组件的信息:通过调 ...
随机推荐
- RH133读书笔记(10)-Lab 10 Exploring Virtualization
Lab 10 Exploring Virtualization Goal: To explore the Xen virtualization environment and the creation ...
- 基于AVR128单纯Modbus协议实施
Modbus通信协议Modicon公司1979在发展中,适用于工业现场总线协议控制.Modbus通信系统包含芯片的节点,并与组合物可编程控制的公共传输线,它的目的是收集和监视多个节点的数据.Modbu ...
- OpenGL 实现Interpolation插值算法
这是一个静态插值算法的效果,图形学中插值算法应用十分广.如动画.photoshop, autocAD等软件画曲线,还有shader中的渐变上色也是一个硬件支持的插值算法. Interpolation是 ...
- 每天一点点java---继承exception类来实现自己的异常类
package prac_1; /** * <p>Title: 捕获异常和实现自己的异常类</p> * <p>Description: 通过继承Exception类 ...
- Async和Await进行异步编程
使用Async和Await进行异步编程(C#版 适用于VS2015) 你可以使用异步编程来避免你的应用程序的性能瓶颈并且加强总体的响应.然而,用传统的技术来写异步应用是复杂的,同时编写,调试和维护都很 ...
- 有趣 IOS 开展 - block 使用具体解释
Block 它是iOS于4.0新的程序语法之后,于iOS SDK 4.0之后,block应用几乎无处不在. 在其他语言中也有类似的概念,称为闭包(closure),实例object C兄弟swift ...
- 熟人Dubbo 系列1-Dubbo什么
Dubbo阿里巴巴内部SOA治理方案和服务的核心框架.每天2000+ 个服务提供3,000,000,000+ 次訪问量支持,并被广泛应用于阿里巴巴集团的各成员网站.Dubbo自2011年开源后,已被很 ...
- urlrewrite使用地址重写
地址重写: 主要是为了站点的安全. 比如我们平时的地址请求 地址重写前,訪问路径是: /read.egov?action=read&bid=2 地址重写后,訪问路径是:/read-read-2 ...
- Python标准库：内置函数format(value[, format_spec])
的值的函数value按format_spec的格式来格式化,然而函数解释format_spec是依据value的类型来决定的.不同的类型有不同的格式化解释. 当參数format_spec为空时,本函数 ...
- sql小总结
---------------------------------------------------------------------------------------------------- ...