AngularJS API

API 意为 ApplicationProgramming 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()

实例

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

尝试一下 »

angular.uppercase()

实例

尝试一下 »

angular.isString()

实例

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

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

尝试一下 »

angular.isNumber()

实例

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

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

尝试一下 »

3篇笔记写笔记

#745

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)

#744
大王叫我来巡山1998

针对楼上说的angular.isNumber无效问题，解决可以使用如下方法：<pre style="">var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.blur = function(){ if($scope.myInput ==''){ $scope.myInput = undefined; } if(!isNaN($scope.myInput)){ $scope.myInput = Number($scope.myInput); } $scope.x1 = angular.lowercase($scope.myInput); $scope.x2 = angular.uppercase($scope.myInput); $scope.x3 = angular.isString($scope.myInput); $scope.x4 = angular.isNumber($scope.myInput); }});</pre><a target="_blank" href="/try/try.php?filename=angular.isnumber ">尝试一下 »</a>
#743
 大王叫我来巡山1998


1、定义ng-app以及控制器，在输入框中填写值，x1和x2分别接收其大小写转换的值，并根据switch来判断true/false让其显示是否是字符串和数字
<pre>
<div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="myInput" ng-blur="blur()">
    输入的内容为：{{myInput}}
    变成小写：{{ x1 }}
    变成大写：{{ x2 }}

 是不是字符串：
 <label ng-switch-when = "true">是</label>
 <label ng-switch-when = "false">不是</label>
 <label ng-switch-when = ""></label>

    
 是不是数字：
 <label ng-switch-when = "true">是</label>
 <label ng-switch-when = "false">不是</label>
 <label ng-switch-when = ""></label>

</div></pre>
2、script内容：
<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>
<a class="tryitbtn" href="/try/try.php?filename=angular.isnumber" target="_blank" rel="nofollow">尝试一下 »</a>

尊贵的董事大人

英文标题不为空时视为本栏投稿

需要关键字描述英文标题

AngularJS API

AngularJS 全局 API

angular.lowercase()

实例

angular.uppercase()

实例

angular.isString()

实例

angular.isNumber()

实例

3篇笔记写笔记

尊贵的董事大人

分类导航

Advertisement

微信关注