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 相关文章推荐
JS request函数 用来获取url参数
May 17 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
实例教学如何写vue插件
Nov 30 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
微信小程序如何使用云开发
May 17 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防盗链的常用方法小结
2010/07/02 PHP
PHP学习之正则表达式
2011/04/17 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
常用js脚本
2006/12/03 Javascript
文本链接逐个出现的js脚本
2007/12/12 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
js表头排序实现方法
2015/01/16 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
python定时器使用示例分享
2014/02/16 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
新西兰优惠网站:Treat Me
2019/07/04 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
个人实用简单的自我评价
2013/10/19 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
2014年管理工作总结
2014/11/22 职场文书
建国大业观后感800字
2015/06/01 职场文书
python基础之//、/与%的区别详解
2022/06/10 Python