Angular封装了一系列公共方法,帮助我们更简单的使用 JS。
1、angular.bind()
angular.bind 类似于 Function.prototype.bind,实现函数柯里化,返回一个函数代理。eg:
//函数原型 angular.bind(/*this对象*/self, /*要封装的function*/fn, /*参数列表*/args); //原始函数 function fun(arg1, arg2, arg3) { console.log(this); console.log(arg1); console.log(arg2); console.log(arg3); } fun('arg1', 'arg2', 'arg3'); //如果几个常用参数都是固定的,而且该函数被调用频繁,那么就可以包装一下 var fun2 = angular.bind(window, fun, 'arg1', 'arg2'); //新的调用方式 fun2('arg3');
2、angular.bootstrap()
用于使用 angular 执行渲染元素。也是 angular 的启动方法,如果没有 在页面上指定ng-app,必须要手动调用该函数进行启动。
angular.bootstrap(/*Dom元素*/element, /*Array/String/Function*/[modules], /*Object*/[config]); //常规用法 angular.bootstrap(document, ['app']) //带配置项 angular.bootstrap(document, ['app'], {strictDi: true/*Defaults: false*/})
3、angular.copy()
Angular.copy 用于复制对象,由于 angular 的双向绑定特点,那么如果直接操作 $scope 对象,那么很容易就会改变 ui 的显示,这个时候就需要借助 angular.copy 来创建一个对象副本,并进行操作。
//原型 angular.copy(source, [destination]); var obj = {a: 1}; var obj2 = angular.copy(obj); var obj3; angular.copy(obj, obj3); console.log(obj2 === obj) //false console.log(obj3 === obj) //false var obj4; //第二个和参数和返回值是相等的,而且第二个参数不管以前是什么,都会被重新赋值 var obj5 = angular.copy(obj, obj4); console.log(obj4 === obj5); //true
4、angular.element()
等价与 jQuery 的选择器,如果在 angular 之前没有引入 jQuery,那么就使用 jqLite 包装。
angular.element('body'); //等价于 $('body'); //用法 var $body = angular.element('body');
5、angular.equals()
用于比较两个对象是否相等,如下示例的规则和 JS 有区别,注意识别。
var obj1 = {a: 1}; var obj2 = obj1; //引用一致,则相等 console.log(angular.equals(obj1, obj2)); // true obj2 = {a: 1}; //引用不一致,对象表现一致,则相等 console.log(angular.equals(obj1, obj2)); // true obj2 = {a: 1,$a: 2}; //对象比较时,忽略以$开头的属性 console.log(angular.equals(obj1, obj2)); // true obj1 = /aa/; obj2 = /aa/; //正则表达式表现相等,则相等 console.log(angular.equals(obj1, obj2)); // true //NaN与NaN比较,则相等 console.log(angular.equals(NaN, NaN)); // true
6、angular.extend()
功能上和 jQuery.extend 没多大差异:
//原型-第一个参数为目标,之后的参数为源,同时返回dst angular.extend(dst, src); //示例 var obj1 = {a: 1}; var obj2 = angular.extend(obj1, {a: 2}, {b: 3}); console.log(obj1) console.log(obj1 === obj2); //true
7、angular.forEach()
angular.forEach 用于遍历对象或者数组,类似于 ES5 的 Array.prototype.forEach。
//原型 angular.forEach(obj, iterator, [context]); var values = {name: 'misko', gender: 'male'}; var arr = ['misko', 'male']; angular.forEach(values, function (value, key) { console.log(key + ' = ' + value); }); angular.forEach(arr, function (value, i) { console.log(i + ' = ' + value); }); //还可以传递this var obj = {}; angular.forEach(values, function (value, key) { obj[key] = value; }, obj); console.log(obj);
8、angular.fromJson()
angular.fromJson 将 JSON 字符串转换为 JSON 对象,注意,必须严格满足 JSON 格式,比如属性必须双引号,该函数内部实现是利用 JSON.parse()。
//原型 angular.fromJson(/*string*/ jsonString) var jsonString = '{"p1": "xx", "p2": 1, "p3": true}'; var jsonObj = angular.fromJson(jsonString); console.log(jsonObj);
9、angular.toJson()
angular.toJson 可以将对象,数组,日期,字符串,数字转换为 json 字符串
//原型 angular.toJson(obj, pretty); var obj = {p1: 1, p2: true, p3: '2'}; var jsonString = angular.toJson(obj); console.log(jsonString); //美化输出格式(设置为true,默认采用2个字符缩进) jsonString = angular.toJson(obj, true); console.log(jsonString); //还可以设置缩进字符数 jsonString = angular.toJson(obj, 10); console.log(jsonString);
10、angular.identity()
angular.identity 返回该函数参数的第一个值。编写函数式代码时,非常有用(待使用)。
//官方示例 function transformer(transformationFn, value) { return (transformationFn || angular.identity)(value); }; //简单演示 var value = angular.identity('a', 1, true); console.log(value); // 'a'
11、angular.injector()
angular.injector 能够创建一个 injector 对象,可以用于检索 services 以及用于依赖注入。
//原型,[strictDi]默认false,如果true,表示执行严格依赖模式, //angular则不会根据参数名称自动推断类型,必须使用['xx', function(xx){}]这种形式。 angular.injector(modules, [strictDi]); //定义模块A var moduleA = angular.module('moduleA', []) .factory('F1', [function () { return { print: function () { console.log('I\'m F1 factory'); } } }]); var $injector = angular.injector(['moduleA']) $injector.invoke(function (F1) { console.log(F1.print()); }); //此种写法会报错,因为是严格模式 var $injector2 = angular.injector(['moduleA'], true) $injector2.invoke(function (F1) { console.log(F1.print()); }); //可以采用如下写法 $injector2.invoke(['F1', function (F1) { console.log(F1.print()); }]);
12、angular.module()
angular.module 可以说是最常用的 function 了。通过它,可以实现模块的定义,模块的获取。 //定义模块A var moduleA = angular.module('moduleA', []); //定义模块B,模块B依赖moduleA var moduleB = angular.module('moduleB', ['moduleB']); //可以在第三个参数上设置配置函数 var moduleB = angular.module('moduleB', ['moduleB'], ['$locationProvider', function ($locationProvider) { console.log($locationProvider); }]); //等价于 var moduleB = angular.module('moduleB', ['moduleB']) .config(['$locationProvider', function ($locationProvider) { console.log($locationProvider); }]); //获取模块 angular.bootstrap(document, ['moduleB']);
13、angular.isArray()
angular.isArray 用于判断对象是不是数组,等价于 Array.isArray。
console.log(angular.isArray([])); // true console.log(angular.isArray({0: '1', 1: '2', length: 2})); // false
14、angular.isDate()
通过判断 toString.call(value) 是不是等于 '[object Date]' 来判断对象是个是一个 Date 对象。
console.log(angular.isDate(new Date())); // true console.log(angular.isDate(223)); // false
15、angular.isDefined()
判断对象或者属性是否定义
var obj = {a: 1, b: null, c: undefined}; console.log(angular.isDefined(obj.a)); // true console.log(angular.isDefined(obj.b)); // true console.log(angular.isDefined(obj.c)); // false console.log(angular.isDefined(obj.d)); // false
16、angular.isElement()
此方法判断元素是不是一个元素(包含dom元素,或者jquery元素)
console.log(angular.isElement(document.getElementsByTagName('body')[0])); // true console.log(angular.isElement($('body'))); // true
17、angular.isFunction()
此方法判断对象是不是一个 function ,等价于 typeof fn === 'function'
console.log(angular.isFunction(new Function('a', 'return a'))); // true console.log(angular.isFunction(function(){})); // true console.log(angular.isFunction({})); // false
18、angular.isNumber()
判断是否为数字
function isNumber(value) { return typeof value === 'number'; }
19、angular.isObject()
判断是否为对象
function isObject(value) { return value !== null && typeof value === 'object'; }
20、angular.isString()
判断是否为字符串
function isString(value) { return typeof value === 'string'; }
21、angular.isUndefined()
判断变量是否未定义
function isUndefined(value) { return typeof value === 'undefined'; }
22、angular.lowercase()
转换字符串为小写模式,如果参数不是字符串,那么原样返回
var lowercase = function(string) { return isString(string) ? string.toLowerCase() : string; }; console.log(angular.lowercase(1)); // 1 console.log(angular.lowercase('ABCdef')); // 'abcdef'
23、angular.uppercase()
转换字符串为大写模式,如果参数不是字符串,那么原样返回
var uppercase = function(string) { return isString(string) ? string.toUpperCase() : string; }; console.log(angular.uppercase(1)); // 1 console.log(angular.uppercase('ABCdef')); // 'ABCDEF'
24、angular.merge()
将多个对象进行深度复制,与extend()不同,merge将会递归进行深度拷贝。该拷贝是完全深拷贝,就连对象引用也不一样。
var o = {}; var obj1 = {a1: 1, a2: 2, a3: [1]}; var obj2 = {b1: [2], b2: /abc/}; var obj3 = [o]; var obj4 = {d: o}; var result = angular.merge({}, obj1, obj2, obj3); console.log(result); console.log(result[0] === o); // false console.log(result.d === o); // false
25、angular.noop()
一个空函数,调试时非常有用。可以避免 callback 未定义引发的 error。
function foo(callback) { var result = calculateResult(); (callback || angular.noop)(result); }
26、angular.reloadWithDebugInfo()
启用 DebugInfo,该设置优先级高于 $compileProvider.debugInfoEnabled(false)
下拉框初始化无默认值,或者有空白选项,影响美观,可通过以下方法调整:
<form> 选择一个选项: <select ng-model="myVar" ng-init="myVar='tuts'"> <option ng-show="false" value=""> <option value="dogs">Dogs <option value="tuts">Tutorials <option value="cars">Cars </select> </form>
尝试一下 »
用 ng-init 实现 count 自加和清零:
<div ng-app="" ng-init="count=0"> <button ng-click="count = count + 1">点我!</button> <button ng-click="count = 0">清零!</button> <p>{{ count }}</p>
感谢您的支持,我会继续努力的!
支付宝扫一扫,即可进行扫码打赏哦
745AngularJS API
Angular封装了一系列公共方法,帮助我们更简单的使用 JS。
1、angular.bind()
angular.bind 类似于 Function.prototype.bind,实现函数柯里化,返回一个函数代理。eg:
2、angular.bootstrap()
用于使用 angular 执行渲染元素。也是 angular 的启动方法,如果没有 在页面上指定ng-app,必须要手动调用该函数进行启动。
3、angular.copy()
Angular.copy 用于复制对象,由于 angular 的双向绑定特点,那么如果直接操作 $scope 对象,那么很容易就会改变 ui 的显示,这个时候就需要借助 angular.copy 来创建一个对象副本,并进行操作。
4、angular.element()
等价与 jQuery 的选择器,如果在 angular 之前没有引入 jQuery,那么就使用 jqLite 包装。
5、angular.equals()
用于比较两个对象是否相等,如下示例的规则和 JS 有区别,注意识别。
6、angular.extend()
功能上和 jQuery.extend 没多大差异:
7、angular.forEach()
angular.forEach 用于遍历对象或者数组,类似于 ES5 的 Array.prototype.forEach。
8、angular.fromJson()
angular.fromJson 将 JSON 字符串转换为 JSON 对象,注意,必须严格满足 JSON 格式,比如属性必须双引号,该函数内部实现是利用 JSON.parse()。
9、angular.toJson()
angular.toJson 可以将对象,数组,日期,字符串,数字转换为 json 字符串
10、angular.identity()
angular.identity 返回该函数参数的第一个值。编写函数式代码时,非常有用(待使用)。
11、angular.injector()
angular.injector 能够创建一个 injector 对象,可以用于检索 services 以及用于依赖注入。
12、angular.module()
13、angular.isArray()
angular.isArray 用于判断对象是不是数组,等价于 Array.isArray。
14、angular.isDate()
通过判断 toString.call(value) 是不是等于 '[object Date]' 来判断对象是个是一个 Date 对象。
15、angular.isDefined()
判断对象或者属性是否定义
16、angular.isElement()
此方法判断元素是不是一个元素(包含dom元素,或者jquery元素)
17、angular.isFunction()
此方法判断对象是不是一个 function ,等价于 typeof fn === 'function'
18、angular.isNumber()
判断是否为数字
19、angular.isObject()
判断是否为对象
20、angular.isString()
判断是否为字符串
21、angular.isUndefined()
判断变量是否未定义
22、angular.lowercase()
转换字符串为小写模式,如果参数不是字符串,那么原样返回
23、angular.uppercase()
转换字符串为大写模式,如果参数不是字符串,那么原样返回
24、angular.merge()
将多个对象进行深度复制,与extend()不同,merge将会递归进行深度拷贝。该拷贝是完全深拷贝,就连对象引用也不一样。
25、angular.noop()
一个空函数,调试时非常有用。可以避免 callback 未定义引发的 error。
26、angular.reloadWithDebugInfo()
启用 DebugInfo,该设置优先级高于 $compileProvider.debugInfoEnabled(false)
744AngularJS API
743AngularJS API
</p><pre>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="myInput" ng-blur="blur()">
<p>输入的内容为:{{myInput}}</p>
<p>变成小写:{{ x1 }}</p>
<p>变成大写:{{ x2 }}</p>
<p ng-switch = "x3">
是不是字符串:
<label ng-switch-when = "true">是</label>
<label ng-switch-when = "false">不是</label>
<label ng-switch-when = ""></label>
</p>
<p ng-switch = "x4">
是不是数字:
<label ng-switch-when = "true">是</label>
<label ng-switch-when = "false">不是</label>
<label ng-switch-when = ""></label>
</p>
</div></pre><p>
2、script内容:
</p><pre>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.blur = function(){
$scope.x1 = angular.lowercase($scope.myInput);
$scope.x2 = angular.uppercase($scope.myInput);
$scope.x3 = angular.isString($scope.myInput);
// angular.isNumber 这里无效
// $scope.x4 = angular.isNumber($scope.myInput);
$scope.x4 = !isNaN($scope.myInput);
}
});
</script></pre>
<p><a class="tryitbtn" href="/try/try.php?filename=angular.isnumber" target="_blank" rel="nofollow">尝试一下 »</a></p>
742AngularJS 表单
下拉框初始化无默认值,或者有空白选项,影响美观,可通过以下方法调整:
尝试一下 »
741AngularJS 事件
用 ng-init 实现 count 自加和清零:
尝试一下 »