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入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
JS原型与继承操作示例
May 09 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获取后台Job管理的实现代码
2011/06/10 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
php实现文章评论系统
2019/02/18 PHP
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
详解python中的 is 操作符
2017/12/26 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
如何通过python实现人脸识别验证
2020/01/17 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
护士岗位竞聘书
2015/09/15 职场文书