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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
jQuery 事件的命名空间简单了解
Nov 22 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
json字符串传到前台input的方法
Aug 06 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
详解TypeScript中的类型保护
Apr 29 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
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
javascript中Function类型详解
2015/04/28 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
vuejs router history 配置到iis的方法
2018/09/20 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
python使用append合并两个数组的方法
2015/04/28 Python
python中的json总结
2018/10/11 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
村委会贫困证明范文
2014/09/21 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
初三语文教学计划
2015/01/22 职场文书
合作合同协议书范本
2015/01/27 职场文书
跑出一片天观后感
2015/06/08 职场文书
投诉书格式范本
2015/07/02 职场文书
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers