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 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
jquery实现保存已选用户
Jul 21 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
vue resource post请求时遇到的坑
Oct 19 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
JS访问对象两种方式区别解析
Aug 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
php5.2时间相差8小时
2007/01/15 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
python批量获取html内body内容的实例
2019/01/02 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
电子专业推荐信范文
2013/11/18 职场文书
安全口号大全
2014/06/21 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL