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.父组件获取子组件的信息:通过调 ...
随机推荐
- 使用shell/python获取hostname/fqdn释疑(转)
一直以来被Linux的hostname和fqdn(Fully Qualified Domain Name)困惑了好久,今天专门抽时间把它们的使用细节弄清了. 一.设置hostname/fqdn 在Li ...
- uva 10817 - Headmaster's Headache ( 状态压缩dp)
本文出自 http://blog.csdn.net/shuangde800 题目链接: 点击打开链接 题目大意 某校有n个教师和m个求职者,已知每人的工资和能教的课程集合,要求支付最少的工资使得每 ...
- Node.js v0.10.31API手冊-事件
Node.js v0.10.31API手冊-文件夹 Events(事件) Node里面的很多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, 一个fs.readStrea ...
- ORA-12545: Connect failed because target host or object does not exist
[oracle@ybdbtest oradata]$ sqlplus /nolog SQL*Plus: Release 9.2.0.4.0 - Production on Thu Jun 26 10: ...
- 中国澳门sinox很多平台CAD制图、PCB电路板、IC我知道了、HDL硬件描述语言叙述、电路仿真和设计软件，元素分析表
中国澳门sinox很多平台CAD制图.PCB电路板.IC我知道了.HDL硬件描述语言叙述.电路仿真和设计软件,元素分析表,可打开眼世界. 最近的研究sinox执行windows版protel,powe ...
- Hadoop Java Hdfs API
1. 在本地文件系统生成一个文本文件,,读入文件,将其第101-120字节的内容写入HDFS成为一个新文件2. 在HDFS中生成文本文件,读入这个文件,将其第101-120字节的内容写入本地文件系统成 ...
- 对java中classloader使用的一点理解（转）
先简单介绍下java的classloader,网上资料很多,就说点关键的. Java 中的类加载器大致可以分成两类,一类是系统提供的,另外一类则是由 Java 应用开发人员编写的.系统提供的类加载器主 ...
- IIS 7.0 Features and Vista Editions
原文 IIS 7.0 Features and Vista Editions Overview of IIS 7.0 differences Across Windows Vista Editions ...
- Android-采用Matrix对Bitmap加工
1.Android正在使用Matrix放.旋转.平移.斜切等变换的. Matrix是一个3*3的矩阵,其值相应例如以下: 以下给出详细坐标相应变形的属性|scaleX, skewX, translat ...
- MvcMailer通过ASP.NET MVC Razor视图和基架发送邮件
MvcMailer是一个有趣的组件,您可以使用ASP.NET MVC框架在发送邮件.很重要的是,它使用Razor视图引擎的观点作为电子邮件模板和很容易安装和使用.在本文中你将看到如何安装,设置邮件模板 ...