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.父组件获取子组件的信息:通过调 ...
随机推荐
- rest-work-eat-study-rest-work-eat or rest-rest-work-work-eat-eat..
words are for your heart. tks for my dear family's ok. Listening more means not more talkive. 版权声明: ...
- 《Programming Hive》读书笔记（一）Hadoop和hive环境搭建
<Programming Hive>读书笔记(一)Hadoop和Hive环境搭建 先把主要的技术和工具学好,才干更高效地思考和工作. Chapter 1.Int ...
- Android 实现蘑菇街购物车动画效果
版本号:1.0 日期:2014.8.6 版权:© 2014 kince 转载注明出处 使用过蘑菇街的用户基本上都知道有一个增加购物车的动画效果,此处不详细描写叙述想知道的能够去下载体验一下. 1 ...
- SQL入门学习6-集合运算
7-1 表的加减法 集合运算 集合运算就是对满足同一规则的记录,进行的加减等四则运算. 1.1 表的加法--UNION 表之间进行并集运算. 语法: SELECT 对应列1,对应列2-- FROM 表 ...
- atitit.无损传输二进制数据串传输网络
atitit.无损传输二进制数据串传输网络 1. gbk的网络传输问题,为什么gbk不能使用来传输二进制数据 1 2. base64 2 3. iso-8859-1 (推荐) 2 4. utf-8 ...
- NSIS：使用PassDialog插件实现密码安装（卸载）功能
原文 NSIS:使用PassDialog插件实现密码安装(卸载)功能 有时,出于特殊的需求,我们要给安装或卸载程序加一个密码,只有输入了正确的密码才可以继续.比如: 下面我们使用插件来实现安装密码: ...
- Linux内核分析（五）----字符设备驱动实现
原文:Linux内核分析(五)----字符设备驱动实现 Linux内核分析(五) 昨天我们对linux内核的子系统进行简单的认识,今天我们正式进入驱动的开发,我们今后的学习为了避免大家没有硬件的缺陷, ...
- kd-tree注解 & bzoj 2648 & 2716 & 3053 解决问题的方法
[KD-TREE简介]于SYC1999大神"迷住"下一个.我开始接触这样的算法. 首先.这个概念大概能去百度百科.详细的实施.我在看RZZ的代码长大的. 我们能够想象在平面上有N个 ...
- CentOS 7 下安装 LEMP 服务(nginx、MariaDB/MySQL 和 php)
原文 CentOS 7 下安装 LEMP 服务(nginx.MariaDB/MySQL 和 php) LEMP 组合包是一款日益流行的网站服务组合软件包,在许多生产环境中的核心网站服务上起着强有力的作 ...
- Codeforces 514 D R2D2 and Droid Army(RMQ+二分法）
An army of n droids is lined up in one row. Each droid is described by m integers a1, a2, ..., am, w ...