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中自动切换焦点实现代码
Dec 15 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
js实现蒙版效果
Jan 11 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
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可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
清空上传控件input file的值
2010/07/03 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
物业管理专业个人的自我评价
2013/11/19 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
教学实习自我评价
2014/01/28 职场文书
教师职称自我鉴定
2014/02/12 职场文书
小班评语大全
2014/05/04 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
2015入党自荐书范文
2015/03/05 职场文书
车间班组长竞聘书
2015/09/15 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
Python中文纠错的简单实现
2021/07/07 Python
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL