[TOC]
# Angular中的ng模塊的全局方法
Angular中的ng模塊是Angular的核心模塊，其中包含著一些默認啟動的方法、指令、服務、過濾器等一些列組件供我們使用。我們重點來看看ng模塊的全局方法。調用該方法都需要使用angular.調用
## angular.lowercase()
轉換成小寫字母方法
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
var temp='HZJ';
$scope.data=angular.lowercase(temp);
}]);
~~~
## angular.uppercase()
轉換成大寫字母方法.
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
var temp = 'hzj';
$scope.data = angular.uppercase(temp);
}]);
~~~
## angular.isUndefined
確定數據是否為undefined
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
var temp;
$scope.data = angular.isUndefined(temp);
}]);
~~~
## angular.isDefined
確定數據是否為有效數據
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
var temp2 = 'kk';
$scope.data = angular.isDefined(temp2);
}]);
~~~
## angular.isObject
確定數據是否是一個對象
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
var temp1 = 'kk';
var temp2 = [1];
var temp3 = {name:'xx'};
var temp4 = null;
//false
$scope.data1 = angular.isObject(temp1);
//true,數組也是對象
$scope.data2 = angular.isObject(temp2);
//true
$scope.data3 = angular.isObject(temp3);
//false null不是一個有效的對象
$scope.data4 = angular.isObject(temp4);
}]);
~~~
## angular.isString
確定數據是否是一個字符串
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
var temp1 = 'kk';
var temp2 = 123;
var temp3 = [12];
var temp4 = {name:'hzj'};
//true
$scope.data1 = angular.isString(temp1);
//false
$scope.data2 = angular.isString(temp2);
//false
$scope.data3 = angular.isString(temp3);
//false
$scope.data4 = angular.isString(temp4);
}]);
~~~
## angular.isNumber
確定數據是否是一個數字
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
var temp1 = 'kk';
var temp2 = 123;
var temp3 = [12];
var temp4 = {name:'hzj'};
var temp5 = NaN;
var temp6 = Infinity;
//false
$scope.data1 = angular.isNumber(temp1);
//true
$scope.data2 = angular.isNumber(temp2);
//false
$scope.data3 = angular.isNumber(temp3);
//false
$scope.data4 = angular.isNumber(temp4);
//true NaN會被判定為一個數字
$scope.data5 = angular.isNumber(temp5);
//true Infinity會被判定為一個數字
$scope.data6 = angular.isNumber(temp6);
}]);
~~~
## angular.isDate
確定數據是否為一個日期
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
var temp1 = new Date();
var temp2 = new Date().getTime();
var temp3 = '2008-01-01';
//true
$scope.data1 = angular.isDate(temp1);
//false 日期轉換成的毫秒數不算一個日期對象
$scope.data2 = angular.isDate(temp2);
//false
$scope.data3 = angular.isDate(temp3);
}]);
~~~
## angular.isArray
確定數據是否為數組
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
var temp1 = '123';
var temp2 = 123;
var temp3 = [1, 2, 3];
var temp4 = {xxx: [1, 2, 3]};
//false
$scope.data1 = angular.isArray(temp1);
//false
$scope.data2 = angular.isArray(temp2);
//true
$scope.data3 = angular.isArray(temp3);
//false
$scope.data4 = angular.isArray(temp4);
}]);
~~~
## angular.isFunction
確定數據是否為一個函數
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
var temp1 = '123';
var temp2 = function () {
};
var temp3 = new Function();
var temp4 = function () {
return function () {
};
};
//false
$scope.data1 = angular.isFunction(temp1);
//true
$scope.data2 = angular.isFunction(temp2);
//true
$scope.data3 = angular.isFunction(temp3);
//true
$scope.data4 = angular.isFunction(temp4);
}]);
~~~
## angular.isElement
確定數據是否是一個DOM元素
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$window','$document','$scope', function ($window,$document,$scope) {
var temp1 =$document[0];
var temp2 ='<div>aaaa</div>';
var temp3 = $document[0].getElementsByTagName('body')[0];
var temp4 = $window;
// true
$scope.data1 = angular.isElement(temp1);
// false 字符串表示的dom元素不是dom元素
$scope.data2 = angular.isElement(temp2);
// true
$scope.data3 = angular.isElement(temp3);
// false $window不是一個dom元素
$scope.data4 = angular.isElement(temp4);
}]);
~~~
## angular.forEach()
angular提供的迭代器，迭代的數據可以是一個數組，也可以是一個對象
基本格式為：
~~~
angular.forEach(obj, fn);
//如果迭代數組
angular.forEach(obj, fn(item,index,data));
//如果迭代對象
angular.forEach(obj, fn(key,value));
~~~
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
$scope.data1 = [1, 2, 3, 4, 5];
$scope.data2 = {name: 'hzj', sex: 'm', age: 18, score: 100};
$scope.data3 = [
{
name: 'hzj',
sex: 'm',
age: 18,
score: 100
},
{
name: 'hzj1',
sex: 'm',
age: 19,
score: 56
},
{
name: 'hzj2',
sex: 'w',
age: 22,
score: 89
}
];
//迭代數組
//item數組每一項【可選】
//index數組下標【可選】
//data數組原數據【可選】
angular.forEach($scope.data1, function (item, index, data) {
console.log('item:' + item);
console.log('index:' + index);
console.log('data:' + data);
});
//迭代對象【主要參數順序，第一個是屬性的值，第二個是屬性的名稱】
//value對象每個屬性的值【可選】
//key對象每個屬性的屬性名稱【可選】
angular.forEach($scope.data2, function (value, key) {
console.log('key:' + key);
console.log('value:' + value);
});
//綜合迭代數組里面每個元素都是對象
angular.forEach($scope.data3, function (item, index) {
console.log('item:' + item.name);
console.log('index:' + index);
});
}]);
~~~
## angular.extend
把原數據拷貝到目標數據
格式
~~~
angular.extend(dst, src);
~~~
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
var data1 = [1,2,3];
var data2 = [7,8,9,5,6,7];
//數組extend
//$scope.data2會覆蓋掉$scope.data1中的前6個元素
$scope.result= angular.extend(data1,data2);
//結果為：[7,8,9,5,6,7]
console.log($scope.result);
var stu1={name:'hzj',sex:'m'};
var stu2={scre:100,age:18};
$scope.result=angular.extend(stu1,stu2);
//結果為{name: "xx", sex: "m", scre: 100, age: 18}
console.log($scope.result);
}]);
~~~
## angular.noop
一個什么都不執行的函數，主要用于放置其它函數調用函數句柄的時候且為null的時候放置報錯用的。
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
//函數一
var fun1 = function (a) {
return a * 10;
};
//函數二
//第一個參數為fn函數句柄
//第二個參數為傳遞第一個函數的參數
var fun2 = function (fn, b) {
//這里使用了fn || angular.noop代表fn為null或者undefined的時候
//立即執行angular.noop，而angular.noop什么都做，防止了程序異常
return (fn || angular.noop)(b);
};
var temp1 = fun2(null, 3);
//結果為undefined
//但不會引發異常
console.log(temp1);
var temp2 = fun2(fun1, 3);
//結果為30
console.log(temp2);
}]);
~~~
## angular.identity
一個什么都不執行的函數，主要用于放置其它函數調用函數句柄的時候且為null的時候放置報錯用的，但是會返回原函數的第一個參數,不管第一個參數是什么
###案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
//函數一
var fun1 = function (a) {
return a * 10;
};
//函數二
//第一個參數為fn函數句柄
//第二個參數為傳遞第一個函數的參數
var fun2 = function (fn, b) {
//這里使用了fn || angular.noop代表fn為null或者undefined的時候
//立即執行angular.noop，而angular.noop什么都做，防止了程序異常
return (fn || angular.identity)(b);
};
var temp1 = fun2(null, 3);
//結果為3,返回第一個參數
//angular.noop與angular.identity不同的是angular.noop直接返回undefined,而angular.identity會返回第一個參數的有效值
//但不會引發異常
console.log(temp1);
var temp2 = fun2(fun1, 3);
//結果為30
console.log(temp2);
}]);
~~~
## angular.copy
深拷貝一個數組或者一個對象
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
var a1 = [1, 2, 3, 4, 5];
//深拷貝數組
var a2 = angular.copy(a1);
console.log(a2);
var o1={name:'hzj',classes:{name:'c1',count:100}};
//深拷貝對象
var o2=angular.copy(o1);
console.log(o2);
}]);
~~~
## angular.equals
比較兩個對象或者數組或者值，使用的是===方案
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$scope', function ($scope) {
//主要是NaN，在JavaScript中NaN是不相等的，但是angular中相等
//false
console.log(NaN===NaN);
//true
console.log(angular.equals(NaN,NaN));
//false
console.log(angular.equals(1,'1'));
var o1={name:'hzj'};
var o2={name:'hzj'};
//在JavaScript中兩個對象絕對不相等
//false
console.log(o1===o2);
//Angular中相等
//true
console.log(angular.equals(o1,o2));
var a1=[1,2];
var a2=[1,2];
//在JavaScript中兩個數組也不會相等
//false
console.log(a1===a2);
//在Angular中兩個數組相等
console.log(angular.equals(a1,a2));
}]);
~~~
## angular.bind
函數綁定，奇怪的東西
格式
~~~
angular.bind(self, fn, args);
~~~
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$document', '$scope', function ($document, $scope) {
//對象
var stu = {name: 'hzj', sex: 'm'};
//函數
var fn = function (a) {
//函數依賴stu對象
//函數有參數a
console.log(this.name + ":" + a);
};
//利用angular.bind方法，把函數依賴對象，函數句柄，以及函數參數綁定在一起
//并返回行的函數
var fn2=angular.bind(stu,fn,'100');
//執行新的函數
//結果為hzj:100
fn2();
}]);
~~~
## angular.toJson
序列化JSON
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$document','$scope', function ($document,$scope) {
var a1={name:'hzj',sex:'m'};
var xx= angular.toJson(a1);
//結果為{"name":"hzj","sex":"m"}
console.log(xx);
}]);
~~~
## angular.fromJson
反序列化JSON
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$document','$scope', function ($document,$scope) {
var json={"name":"hzj","sex":"m"};
var xx= angular.fromJson(json);
//結果為{name:'hzj',sex:'m'}
console.log(xx);
}]);
~~~
## angular.bootstrap
啟動多個ng-app的方法，高級部分出現【這里的bootstrap與bootstrap框架不是一回事】
## angular.injector
創建依賴注入的方法，高級部分出現
## angular.element
把dom變成jquery對象，可以使用Angular提供的jqlite的一些方法,但是不推薦這樣做
### 案例
~~~
//創建控制器
angular.module('myapp').controller('my_c', ['$document','$scope', function ($document,$scope) {
angular.element($document.getElementById('p1')).text('xxx');
}]);
~~~
## angular.module
angular模塊創建方法，也是第三方組件依賴的地方，也是調用模塊的方法
### 案例
~~~
//創建模塊
angular.module('myapp',[]);
//創建模塊,并且依賴其他模塊
angular.module('myapp',['ionic']);
//調用模塊
angular.module('myapp');
~~~
- Angular簡介
- angular1資料網站
- Angular初級部分
- 打破傳統的前端
- Angular基本組成部分
- Angular環境搭建
- Angular項目測試
- Angular基礎概念
- Angular模塊
- Angular控制器
- Angular指令
- Angular表達式
- Angular視圖
- Angular基礎實戰
- Angular模塊創建和使用
- Angular控制器和模型創建
- scope對象
- 控制器中調度window對象和document對象
- Angular表達式調度過濾器
- Angular中的ng模塊全局方法
- Angular模板應用
- 使用指令復制元素
- 使用指令隱藏顯示元素
- Angular指令ng-if
- ng-src和ng-href
- Angular處理樣式
- Angular作用域事件傳遞
- 表單中的元素
- Angular初學者常見的坑
- 再論雙向綁定
- Angular中級部分
- Angular路由機制
- ui-router管理狀態
- ui-router狀態嵌套和視圖嵌套
- ui-router多個命名的視圖
- ui-router路由控制
- 自定義指令
- 自定義過濾器
- Angular項目目錄結構
- Angular服務
- Angular高級部分
- Angular依賴注入
- README