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的版本

原文地址：https://www.cnblogs.com/10manongit/p/12633602.html

时间： 2024-12-20 11:16:02

AngularJS的核心对象angular上的方法全面解析(AngularJS全局API)的相关文章

定义在构造函数内部的方法,会在它的每一个实例上都克隆这个方法;定义在构造函数的prototype属性上的方法会让它的所有示例都共享这个方法,但是不会在每个实例的内部重新定义这个方法. 如果我们的应用需要创建很多新的对象,并且这些对象还有许多的方法,为了节省内存,我们建议把这些方法都定义在构造函数的prototype属性上。

定义在构造函数内部的方法,会在它的每一个实例上都克隆这个方法;定义在构造函数的prototype属性上的方法会让它的所有示例都共享这个方法,但是不会在每个实例的内部重新定义这个方法. 如果我们的应用需要创建很多新的对象,并且这些对象还有许多的方法,为了节省内存,我们建议把这些方法都定义在构造函数的prototype属性上.当然,在某些情况下,我们需要将某些方法定义在构造函数中,这种情况一般是因为我们需要访问构造函数内部的私有变量.

angularJS的核心特性

前几天师傅让我了解一下angularJS,angularJS是一个前端框架,具体的优缺点和运用场景我现在也还没有搞清楚,暂时就先不做描述了,留到运用以后进行补充吧. angularJS四大核心特性:MVC.Module(模块化).指令系统.双向数据绑定. 下面就以上四大核心特性,进行一些简要介绍: 1.MVC(Module——Control——View) 我们应该都知道MVC代表:数据模型层(Module)——业务逻辑和控制逻辑(Control)——视图层(View),先看一个简单的angula

我心目中的Asp.net核心对象

想当初在只使用WebForms框架并以服务端为中心的开发模式时,发现Asp.net好复杂.一大堆服务端控件,各有各的使用方法, 有些控件的事件也很重要,必须在合适地时机去响应,还真有些复杂.后来逐渐发现这些复杂的根源其实就是服务器控件相关的抽象逻辑. 随着Ajax越用越多,可能有些人也做过这些事情:[新建一个ashx文件,读取一些用户的输入数据,Form, QueryString, 然后调用业务逻辑代码,将处理后的结果序列化成JSON字符串再发给客户端],这样也能完成一次请求. 不知大家有没有做

ASP.NET MVC路由系统的核心对象介绍

众所周知,ASP.NET MVC有一套自己的路由系统.这套路由系统是在原来的ASP.NET 路由系统上扩展过来的.今天这篇文章就来聊聊MVC路由系统中非常关键的一些对象. ASP.NET MVC路由系统主要由以下几个核心对象:         1.RouteCollection(RouteCollextionExtentions)         2.RouteTable         3.RouteData         4.Route:RouteBase         5.URLRou

(转载）ASP.NET三大核心对象及基础功能解析

原文链接:http://tech.it168.com/a2011/1207/1284/000001284879_all.shtml 想当初在只使用WebForms框架并以服务端为中心的开发模式时,发现Asp.net好复杂.一大堆服务端控件,各有各的使用方法,有些控件的事件也很重要,必须在合适地时机去响应,还真有些复杂.后来逐渐发现这些复杂的根源其实就是服务器控件相关的抽象逻辑.随着Ajax越用越多,可能有些人也做过这些事情:[新建一个ashx文件,读取一些用户的输入数据,Form, QueryS

API解读第一篇——建立连接的核心对象（JDBC）

结构图 核心对象 Driver Java通过Driver接口表示驱动,每种类型的数据库通过实现Driver接口提供自己的Driver实现类. Driver由属性,操作,事件三部分组成. 属性 公共属性 版本号:版本号由两个字段主版本号(majorVersion)和副版本号(minorVersion)组成. 特殊属性: DriverPropertyInfo对象:它有四个字段,name表示属性名称,value表示属性值,required.表示是否是必要属性,description表示对属性的描述.

HTML DOM对象的属性和方法介绍(原生JS方法)

HTML DOM对象的属性和方法介绍 DOM 是 Document Object Model(文档对象模型)的缩写. DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口),它允许程序和脚本动态地访问和更新文档的内容,结构和样式. W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 HTML DOM 定义了所有 HTML 元

AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法

简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的任务.这也使得他们成为维护和测试的单独实体.控制器,过滤器可以调用它们作为需求的基础.服务使用AngularJS的依赖注入机制注入正常. AngularJS提供例如许多内在的服务,如:$http, $route, $window, $location等.每个服务负责例如一个特定的任务,$http是用来创建AJ

Java-面向对象篇上《二》

1.面向对象的设计思想  面向过程:是以一个流程为单位,考虑它的实现方法,关心的是它的功能实现. 面向对象:是以具体事物为单位,考虑它的属性(特征)和动作(行为). 2.面向对象思考问题的方式 有哪些对象? 对象有什么特征和功能? 对象之间的关系? 3.类和对象 3.1,面向对象的编程思想:是力图使计算机语言中对事物的描述尽可能的与现实中的该事物的本来面目一致. 3.2,类(class)和对象(object)是面向对象方法的核心概念. 类:是对一类事物特征和行为的描述,是抽象,概念上的定义.如: