angularJs自定义服务
在AngularJS中,系统内置的服务都是以$开头,所以我们的自定义服务尽量避免以$开头。自定义服务的方式有如下几种:
- 使用Module的provider方法
- 使用Module的factory方法
- 使用Module的service方法
使用provider方法
app.provider('myProvider', function () {
this.$get = function () {
//do somthing
};
});
通过provider方法创建的服务一定要包含$get方法,provider注入的结果就是$get方法返回的结果,如果不包含$get方法,则程序会报错。
在三种创建服务的方法中,只有使用provider方法创建的服务才可以传进config函数,以用于在对象启用之前,对模块进行配置。但是在config中进行配置的只能是在$get函数之外定义的变量,在下面定义的provider中只有artist与thingFromConfig两个变量可以被访问到,而getArtist与getThingFromConfig两个方法是不能被在config函数中访问到的。
而且在注入config函数中时,参数名必须由服务名+Provider组成,例如下面的例子注入到config函数中的就是myProviderProvider
app.controller('myCtrl', ['$scope', 'myProvider', function ($scope, myProvider) {
console.log(myProvider.getThingFromConfig()); //kingx name
}]);
app.provider('myProvider', function () {
this.artist = '';
this.thingFromConfig = '';
this.$get = function () {
var that = this;
return {
getArtist: function () {
return that.artist;
},
getThingFromConfig: function () {
return that.thingFromConfig;
}
}
};
});
app.config(function (myProviderProvider) { //注意这里参数的名字
myProviderProvider.thingFromConfig = 'kingx name';
});
使用provider方法
app.factory('myFactory', function ($http) {
//不一定是要对象类型,实际为任意类型
var factory = {};
return factory;
});
通过factory方法创建的服务必须有返回值,即必须有return函数,它可以返回任意类型的值,包括基本数据类型或者对象类型。如果没有return函数,则会报错。
factory注入的结果就是return返回的结果,可以在被注入的对象中使用注入的结果定义的各种方法.
app.controller('myCtrl', ['$scope', 'myFactory', function ($scope, myFactory) {
console.log(myFactory.getName()); //foo
//请求当前文件夹下的test.html
myFactory.getData('./test.html').then(function (response) {
console.log(response); //返回test.html的字符串形式
});
}]);
/**------------ 使用factory方法 -----------------*/
app.factory('myFactory', function ($http) {
var factory = {};
var _name = 'foo';
//模仿ajax请求
factory.getData = function (url) {
return $http({
method: 'get',
url: url
});
};
factory.getName = function () {
return _name;
};
return factory; //这里返回的是factory 包含2个方法
});
使用service方法
通过service方法创建的服务,可以不用返回任何值,因为service方法本身返回一个构造器,系统会用new关键字来创建一个对象,所以我们可以在service内部使用this关键字,对service进行扩展。
app.controller('myCtrl', ['$scope', 'myService', function ($scope, myService) {
console.log(myService);
myService.setName('foo');
console.log(myService.getName());
}]);
/**------------ 使用service方法 -----------------*/
app.service('myService', function () {
this._name = '';
this.getName = function () {
return this._name;
};
this.setName = function (name) {
this._name = name;
};
});
如果使用具有返回值的写法,返回的值必须是一个对象,如果只返回基本类型,则实际返回的还是相当于this
app.service('myService', function () {
var obj = {};
this._name = '';
obj.getName = function () {
return this._name;
};
obj.setName = function (name) {
this._name = name;
};
return obj;
});
三种方法的比较
- 需要在config中进行全局配置的话,只能选择provider方法
- factory和service是使用比较频繁的创建服务的方法。他们之间的唯一区别是:service方法用于注入的结果通常是new出来的对象,factory方法注入的结果通常是一系列的functions
- provider是创建服务最为复杂的方法,除非你需要创建一个可以复用的代码段并且需要进行全局配置,才需要使用provider创建
所有具有特定性目的的对象都是通过factory方法去创建
angularJs自定义服务的更多相关文章
- angularjs 自定义服务的三种方式
angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...
- angularJs自定义服务(实现签名和加密)
写在前面: angularJS是google公司主推的js开发优秀框架... 页面展示: 在应用中进行加密是普遍存在的,个人建议在前端实现加密签名(前端加密是否必要来自知乎:http://www.zh ...
- 深究AngularJS——自定义服务详解(factory、service、provider)
前言 3种创建自定义服务的方式. Factory Service Provider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想.所以我们得了解下分 ...
- angularJs 自定义服务 provide 与 factory 的区别
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...
- angularjs 自定义服务(serive,factory,provder) 以及三者的区别
1.Serive 服务:通过service方式创建自定义服务,相当于new的一个对象:var s = new myService();,只要把属性和方法添加到this上才可以在controller里调 ...
- angularjs 自定义服务
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- 42.angularJS自定义服务
转自:https://www.cnblogs.com/best/tag/Angular/ 1. 你可以创建自定义服务,链接到你的模块中: <!DOCTYPE html> <html& ...
- angularJS自定义服务的几种方式
在angularJS中定义服务共有四种常见的方式:factory,service,provider,constant,value 使用形式的不同: 1)factory以返回对象的形式定义服务: mya ...
- angularJS——自定义服务provider之$get
可以认为provider有三个部分: 第一部分是私有变量和私有函数,这些变量和函数会在以后被修改. 第二部分是在app.config函数里可以访问的变量和函数,所以,他们可以在其他地方使用之前被修改. ...
随机推荐
- LDO/DC-DC区别总结(转)
电源是一个电子系统中不可缺少的非常重要的一部分.但是外接的电源通常不能够完全提供系统中需要的所有的电源种类.因此带来了电源电压的变换问题.常用的电源电压的变换芯片包括LDO和DC-DC两种.下面对这两 ...
- JXLS 双循环模板
商户名称 门店代码 时间 金额 <jx:forEach items="${resultList}" var="l"> ${l.name} ...
- Oracle中Kill session的研究(转 出自eagle)
itpub link: http://www.itpub.net/235873.html 我们知道,在Oracle数据库中,可以通过kill session的方式来终止一个进程,其基本语法结构为: a ...
- 【转】开放api接口签名验证
不要急,源代码分享在最底部,先问大家一个问题,你在写开放的API接口时是如何保证数据的安全性的?先来看看有哪些安全性问题在开放的api接口中,我们通过http Post或者Get方式请求服务器的时候, ...
- mac osx 系统 brew install hadoop 安装指南
mac osx 系统 brew install hadoop 安装指南 brew install hadoop 配置 core-site.xml:配置hdfs文件地址(记得chmod 对应文件夹 ...
- parallels无法启动之大乌龙-流水账版
欢迎访问我的blog:blog.thinkinside.me 早上到公司,像往日一样,开电脑倒茶喝水. 回到座位打开parallels desktop,发现不对,打开PD非常的慢.显示正在初始 ...
- NYOJ 741 "数学家"ST
"数学家"ST 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描写叙述 ST是个非常特别的人类,不仅喜欢做一些不同平常的事,并且对于在无聊的时候怎样打发时 ...
- 在 远程桌面 权限不足无法控制 UAC 提示时,可使用 计划任务 绕开系统的 UAC 提示
就是记录一下,在远程的时候,很可能远程软件没有以管理员身份运行,或者其它原因,操作会被系统阻止,UAC 会进行提示,但是远程软件目前是无法操作的.(以下方法在 Windows 7 中测试通过) 可以通 ...
- iOS CoreData技术学习资源汇总
一.CoreData学习指引 1. 苹果官方:Core Data Programming Guide 什么是CoreData? 创建托管对象模型 初始化Core Data堆栈 提取对象 创建和修改自定 ...
- (原)win8下编译GLUT
1.到opengl官网下载glut源代码 2.修改glutwin32.mak下 # MSVC install directoriesLIBINSTALL = XXXXX\VC\lib //vs ...