[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