Angular工具方法学习


Posted in Javascript onDecember 26, 2016

angular为我们提供了很多的工具方法。

angular.bind 更改this指向

var obj1 = {
 name : 'obj1',
 show : function(str){
  return this.name + str;
 }
};
var obj2 = {
 name : 'obj2'
};

var a = angular.bind(obj2,obj1.show,' is a object');
var b = angular.bind(obj2,obj1.show,[' is a object']);
console.log(a());

angular.bind会根据你的参数类型来决定调用call或apply,注意a和b後面传递的参数,a是传递一个字符串,b是传递一个数组。 

angular.copy 拷贝

var a = {
 name : 'hello'
};

var c = angular.copy(a);
console.log(c);

angular.extend 继承

var a = {
 name : 'hello'
};
var b = {
 age : 20
};

var c = angular.extend(a,b);
console.log(c);

 angular.extend 比较

console.log(angular.equals(1,1)); //true
console.log(angular.equals({name:'xxx'},{name:'xxx'})); //true
console.log(angular.equals({name:'xxx'},{name:'yyy'})); //false


console.log(angular.equals(NaN,NaN)); //true
console.log(NaN == NaN); //false
console.log(NaN === NaN); //false

注意最後NaN和NaN的比较,在原生JS中都是为false的,但是在angular中尉true。   

angular.forEach 遍历

var array = ['a','b','c'];
angular.forEach(array,function(value,i){
 console.log(value,i);
 console.log(this);
});

遍历数组,对象也可以。value表示值,i表示索引,而this表示window对象。(在angular.forEach中我们传递了两个参数,1是遍历的数组,2是匿名函数)

var array = ['a','b','c'];
var result = [];
angular.forEach(array,function(value,i){
 //遍历查找数组时,我们可能是为了获取某些值
 if(value === 'a'){
  //如果数组中有'a'的话,就存入到result中,这里的this就代表result
  this.push(value);
 };
},result);
console.log(result);

这个时候我们三个参数,1是遍历的数组,2是匿名函数,3是结果集(当传递了第三个参数的时候angular.forEach里面的this就会是一个空数组,否侧为window对象)。   

angular也为我们提供了原生的JSON.parse()以及JSON.stringify()方法。

var str = '{"name" : "xiecg","age" : "18"}';
var json = angular.fromJson(str);
console.log(json);

将一个字符串的json解析成对象。

var str = {"name" : "xiecg","age" : "18"};
var json = angular.toJson(str,true);
console.log(json);

将一个json解析成字符串(後面传入一个true可换行,便于阅读) 

辅助方法

console.log( angular.identity(1,2,3) ); //返回第一个参数

var flag = false; 
flag ? console.log('xxx') : angular.noop(); //空函数,防止出错

大小写转换

console.log(angular.uppercase('hello')); //转成大写
console.log(angular.lowercase('HELLO')); //转成小写
 

判断类型

var a = [];
console.log(angular.isArray(a)); //true

angular.isArray   //判断一个元素是否是数组
angular.isDate   //判断一个元素是否是时间对象
angular.isDefined   //判断一个元素是否存在
angular.isUndefined  //判断一个元素是否是undefined
angular.isFunction  //判断一个元素是否是个函数
angular.isNumber  //判断一个元素是否是数字
angular.isObject  //判断一个元素是否是对象
angular.isString  //判断一个元素是否是字符串
angular.isElement  //判断一个元素是否是html节点元素(JQ获取的元素也是可以判断到的)

文件信息

console.log( angular.version ) 

angular也提供了部分JQ中的方法

<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>DEMO</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
</head>
<body>


<div id="box">1</div>
<script type="text/javascript">

document.onclick = function(){
 var oDiv = document.getElementById('box');
 angular.element(oDiv).css('background','red');
  console.log(angular.element(oDiv)); //查看原型上挂载的方法
};

</script>
</body>
</html>

console.log(angular.element(oDiv));

  Angular工具方法学习

是不是很熟悉呢 ?  如果将JQ引入进来方法会更多。

Javascript 相关文章推荐
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
js制作简易年历完整实例
Jan 28 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 Javascript
angular双向绑定模拟探索
Dec 26 #Javascript
jquery Banner轮播选项卡
Dec 26 #Javascript
Javascript中常用类型的格式化方法小结
Dec 26 #Javascript
Angular的自定义指令以及实例
Dec 26 #Javascript
如何提高javascript加载速度
Dec 26 #Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 #Javascript
javascript实现去除HTML标签的方法
Dec 26 #Javascript
You might like
PHP实现HTML页面静态化的方法
2015/11/04 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
银行员工辞职信范文
2014/01/20 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
入党团支部推荐意见
2015/06/02 职场文书
《日月潭》教学反思
2016/02/20 职场文书
旅游安全责任协议书
2016/03/22 职场文书
人民币使用说明书
2019/04/17 职场文书