AngularJS API

本节课，我们学习下AngularJS API。

API 意为 Application Programming Interface（应用程序编程接口）。

AngularJS 全局 API

AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：

比较对象
迭代对象
转换对象

全局 API 函数使用 angular 对象进行访问。

以下列出了一些通用的 API 函数：

API	描述
angular.lowercase (<angular1.7） angular.$$lowercase()（angular1.7+）	转换字符串为小写
angular.uppercase() (<angular1.7） angular.$$uppercase()（angular1.7+）	转换字符串为大写
angular.isString()	判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber()	判断给定的对象是否为数字，如果是返回 true。

注意：自 AngularJS 1.7 之后移除 angular.lowercase 和 angular.uppercase 方法, 改为 angular.$$lowercase 和 angular.$$uppercase

angular.lowercase()

<!DOCTYPE html>
<html>
<head>
	<title>AngularJS 实例 | Web176教程网web176.com</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.x1 = "WEB176";
    $scope.x2 = angular.$$lowercase($scope.x1);
});
</script>

</body>
</html>

angular.uppercase()

<!DOCTYPE html>
<html>
<head>
	<title>AngularJS 实例 | Web176教程网web176.com</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.x1 = "Web176";
    $scope.x2 = angular.$$uppercase($scope.x1);
});
</script>

</body>
</html>

angular.isString()

<!DOCTYPE html>
<html>
<head>
	<title>AngularJS 实例 | Web176教程网web176.com</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.x1 = "WEB176";
    $scope.x2 = angular.isString($scope.x1);
});
</script>

</body>
</html>

angular.isNumber()

<!DOCTYPE html>
<html>
<head>
	<title>AngularJS 实例 | Web176教程网web176.com</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.x1 = "WEB176";
    $scope.x2 = angular.isNumber($scope.x1);
});
</script>

</body>
</html>

总结

Angular封装了一系列公共方法，帮助我们更简单的使用 JS。

1、angular.bind()

angular.bind 类似于 Function.prototype.bind，实现函数柯里化，返回一个函数代理。

//函数原型
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)

作者：terry，如若转载，请注明出处：https://www.web176.com/angularjs/6484.html