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 相关文章推荐
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
javascript 伪数组实现方法
2010/10/11 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
python获得一个月有多少天的方法
2015/06/04 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
python 正确保留多位小数的实例
2018/07/16 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
协议书样本
2014/04/23 职场文书
信访工作经验交流材料
2014/05/23 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
2014年村委会工作总结
2014/11/24 职场文书
考试后的感想
2015/08/07 职场文书