AngularJS的核心對象angular上的方法全面解析(AngularJS全局API)

總結一下AngularJS的核心對象angular上的方法，也幫助本身學習一下平時工做中沒怎麼用到的方法，看能不能提升開發效率。我當前使用的Angularjs版本是1.5.5也是目前最新的穩定版本，不過在全局API上，版本不一樣也沒什麼區別。

AngularJS 全局 API列表

• element

• bootstrap

• copy

• extend

• merge

• equals

• forEach

• noop

• bind

• toJson

• fromJson

• identity

• isUndefined

• isDefined

• isString

• isFunction

• isObject

• isNumber

• isElement

• isArray

• version

• isDate

• lowercase

• uppercase

• module

angular.forEach

forEach(obj, iterator)
遍歷obj(能夠是對象，也能夠是數組)對象，並依次調用iterator(value, key, obj)函數。
其中iterator函數，接收的三個參數分別爲

• value: 對象的屬性(數組元素)

• key: 對象的屬性名(數組的索引)

• obj: 數組(對象)自己

例子:

var list = ['小明', '小毛', '小周', '小蕾'];
angular.forEach(list, function (val, key) {
    console.log(key + '號同窗:' + val);
})

var obj = {
    name: '吳登廣',
    age: '21',
    title: 'worker'
}

angular.forEach(obj, function (val, key) {
    console.log(key + ':' + val);
})

效果:

angular.module

這個方法你們應該都很熟悉了
module(name, requires)，name爲模塊名，requires(可選)爲依賴的模塊，當有依賴的模塊數組的時候，表示註冊一個模塊，沒有時爲引用一個模塊。
例子:

angular.module('main', []);

console.log(angular.module('main'));

效果:

angular.element

這個方法是用來操做DOM的，通常在指令裏面使用。
在引入了jquery的狀況下，使用方法和jquery幾乎同樣，至關於一個語法糖。

var ele = angular.element('h1');
console.log(ele.html());

在沒有引入jquery的狀況下，使用的實際上是jqLite(angular本身封裝的相似於jquery的一個東西)，使用方法也相似，只不過不支持一些jquery的選擇器。

var ele = angular.element(document.getElementsByTagName('h1')[0]);
console.log(ele.html());

至於用jqLite獲取到的封裝事後的DOM節點和jquery的有點不太同樣，這裏能夠參考一篇文章。

angular.bootstrap

這個函數不太經常使用。若是你不想使用ng-app指令來啓動angular應用的話，能夠用angular.bootstrap()來啓動

angular.element(document).ready(function() {
    angular.bootstrap(document, []);
});

須要依賴的模塊數組作爲參數。

angular.toJson

其實就是調用JSON.stringify()方法將一個對象或數組，格式化爲JSON字符串。

angular.fromJSON

就是調用JSON.parse()方法將一個JSON字符串轉換爲一個對象
例子:

var user = {
    name: 'Jax2000',
    age: 21,
    title: 'worker'
}
user = angular.toJson(user)
console.log(user);
user = angular.fromJson(user);
console.log(user);

效果:

angular.copy

copy(source, destination)
深複製一個對象或者數組，這是一個很是實用的方法，熟悉js的人都應該知道，js中 = 操做符，實際上覆制的是指針，因此先後兩個變量指向的仍是內存中的同一個對象，因此咱們在其中一個變量上操做該對象時，對另一個變量也會生效，有時候咱們並不但願出現這種狀況。而後angular.copy方法就是深複製，會在內存中再生成一個對象，兩個變量就能夠獨立，相互不產生影響。
接收一個必須參數source，和一個可選參數destination

var user1 = {
    name: 'wudengguang',
    age: 21,
    title: 'worker'
}
var user2 = user1;
var user3 = angular.copy(user1);
var user4 = {};

// 注意這個user4必須是一個對象或者數組
angular.copy(user1, user4);
user1.name = 'liulei';
console.log('user1:' + user1.name);
console.log('user2:' + user2.name);
console.log('user3:' + user3.name);
console.log('user4:' + user4.name);

效果:

能夠看到改變user1的name字段以後，淺複製的user2受到了影響，而深複製的user3和user4沒有受到影響

angular.extend

extend(destination, src1, src2...)
這個方法是用來擴展對象的，destination爲要擴展的對象，會將後面的對象的屬性所有複製到destination中，不過是淺複製

var user1 = {
    name: 'Jax2000',
    age: 21,
}

var user2 = {
    age: 22,
    skill: {}
}

var dst = {};

angular.extend(dst, user1, user2);

console.log(dst);

console.log(dst.skill === user2.skill);

angular. merge

這個方法和extend方法是同樣的，也是用來擴展目標對象的，不過用的是深複製

var user1 = {
    name: 'Jax2000',
    age: 21,
}

var user2 = {
    age: 22,
    skill: {}
}

var dst = {};

angular.merge(dst, user1, user2);

console.log(dst);

console.log(dst.skill === user2.skill);

merge和extend經常使用於獲取存儲在服務端的用戶設置，而後須要和本地的結合的這一類案例。若是對於copy,extend,merge的區別還不是很瞭解的話，能夠看這篇文章。

angular.equals

equals(o1, o2)
見文知意，判斷兩個對象或者值是否相等，其中對象只要是屬性都想同便可。

var user1 = {
    name: 'Jax2000',
    age: 21,
}

var user2 = {
    age: 21,
    name: 'Jax2000'
}

console.log(angular.equals(user1, user2));

結果是true

angular.noop

這個方法直接看源代碼就知道了

function noop() {}

我也不是很清楚，這個東西幹嗎的，多是有些函數須要回調函數作爲參數，在沒有時調用的吧，官方的文檔案例:

function foo(callback) {
    var result = calculateResult();
    (callback || angular.noop)(result);
}

angular.bind

這個方法就是返回一個有特定做用域的函數對象
angular.bind(self, fn, args)
self: 函數的做用域
fn: 須要改變做用域的函數
args: 須要傳遞給該函數的參數數組

var user1 = {
    name: 'Jax',
    age: 21,
}

var user2 = {
    age: 21,
    name: 'Scarlett'
}

function sayName(user) {
    console.log(this.name, user.name);
}

 var _sayName = angular.bind(user1, sayName, user2);

_sayName();

效果就是打印出了 Jax Scarlett

angular.identity

該函數也很簡單，就是返回這個函數接收到的第一個參數
例子也用官方的例子好了

function getResult(fn, input) {
    return (fn || angular.identity)(input);
};

getResult(function(n) { return n * 2; }, 21);   // returns 42
getResult(null, 21);                            // returns 21
getResult(undefined, 21);                       // returns 21

angular.isUndefined

判斷傳入的參數是否爲undefined

console.log(angular.isUndefined(undefined)); // true
console.log(angular.isUndefined(null)); // false

angular.isDefined

判斷傳入進來的參數是否不是undefined

console.log(angular.isDefined(undefined)); // false
console.log(angular.isDefined(null)); // true

angular.isString

判斷傳入進來的參數是否爲字符串

console.log(angular.isString('123')); // true
console.log(angular.isString(123)); // false

angular.isNumber

判斷傳進來的參數是否爲number類型

console.log(angular.isNumber('123')); // false
console.log(angular.isNumber(123)); // true

angular.isFunction

判斷傳遞進來的參數是否爲一個函數

console.log(angular.isFunction(fn)); // true
console.log(angular.isFunction(fn())); // false

angular.isObject

判斷傳遞進來的參數是否爲對象(null 除外)

console.log(angular.isObject({})); // true
console.log(angular.isObject(null)); // false
console.log(angular.isObject(123)); // false

angular.isArray

就是Array.isArray
判斷傳入進來的參數是否爲數組

console.log(angular.isArray([])); // true
console.log(angular.isArray(null)); // false

angular.isElement

判斷傳遞進來的參數是否爲一個DOM節點(被jquery擴展過的也可)

var body = angular.element(document.getElementsByTagName('body')[0]);

console.log(angular.isElement(body)); // true

angular.isDate

判斷傳遞進來的對象是否爲Date類型

console.log(angular.isDate(new Date())); // true

angular.lowercase

將一個字符串轉換爲小寫

angular.upercase

將一個字符串轉換爲小寫

console.log(angular.lowercase('ABCD')); // abcd
console.log(angular.uppercase('abcd')); // ABCD

angular.version

這是一個屬性，返回angular的版本