自学angular系列-----创建服务

在angualr应用中,factory方法是用来注册服务的最常规方式,其实总结了一下,一共有5种方式来创建服务:

1.    factory()

factory方法是创建和配置服务最快捷的方式;接受两个参数:

name(字符串):需要注册的服务名;

getFn(函数):这个函数会在angularJs创建服务实例时被调用。

var formApp = angular.module("formApp",["ngRoute"]);

formApp.factory("progress", function()

{//service不能直接接收参数(服务除外),此处有坑

varprogress = {};

progress.prev= function(id)

{

varcurrentElement = document.getElementById(id);

currentElement.className= "";

currentElement.className= "progressStep";

};

progress.next= function(id)

{

varcurrentElement = document.getElementById(id);

currentElement.className= "";

currentElement.className= "progressStep activeStep";

};

progress.init= function(id, defaultArr)

{

varcurrentIndex = defaultArr.indexOf(id);

for(i = 0; i <= currentIndex; i++)

{

varcurrentElement = document.getElementById(defaultArr[i]);

currentElement.className= "";

currentElement.className= "progressStep activeStep";

}

}

returnprogress;

});

这是一个进度条的服务;我们知道服务是单例的对象,getFn在应用的生命周期内只会被调用一次,同其他angularJs服务一样,在定义服务时,getFn函数可以接受一个包含被注入对象的数组或函数;需要指出的是factory方式创建服务需要返回一个对象;当然这个返回值可以是一个简单的数据类型,函数,或者对象。

2.    service

使用service方式可以注册一个支持构造函数的服务,容许我们为这个服务对象注册一个构造函数。接受两个参数。

name(字符串):要注册的服务名称;

constructor(函数):构造函数,我们调用它来实例化对象。

var SendData = function($http)

{

varparseParam = function(url, param)

{

varparams = JSON.stringify(param);

returnurl + "=" + "‘" +params + "‘";

};

this.postData= function (url, param)

{

varpostURL = url +".action" + "?" + parseParam(url, param);

return$http({method:"POST", url:postURL});

};

this.getData= function (url, param)

{

varpostURL = url +".action" + "?" +  parseParam(url, param);

return$http({method:"GET", url:postURL});

}

}

formApp.service("AjaxUtil",SendData);

service()函数会在创建实例时通过new关键字来实例化服务对象;this指针实际就值向了AjaxUtil;这样如果想使用该服务,就可以直接注入AjaxUtil服务,就可以。

3.    provider

实际上在angularJs的源码中,所有的服务工厂都是由$provider服务创建的;$provider服务负责在运行时初始化这个提供者。

提供者是一个具有$get()方法的对象,$injector通过调用$get方法创建服务的实例。$provider提供了数个不同的API用于创建服务,每个方法都用各自的特殊用途。

所有的创建服务的方法都构建在provider方法之上。Provider方法负责在$providerCache中注册服务。

从技术上来讲,当我们传入的函数就是$get()时;factory函数就是provider方法注册服务的简略形式。比如下面两种创建服务的方式(实际上是等价的)。

angular.module("formApp").factory("getUserInfro",function()

{

return{"username":"jxj","work":"FED",emai:"[email protected]"};

});

angular.module("formApp").provider("getUserInfro",{$get:function()

{

return{"username":"jxj","work":"FED",emai:"[email protected]"};

}});

是否可以一直使用.factory方法来代替provider?

答案取决于是否需要用AngularJs的config()函数来对provider方法放回的五福进行额外的扩展配置。同其他创建服务的方式不同,config方法可以被注入特殊的参数。比如,我们希望在应用启动前配置myPath的Url:

formApp.provider("AjaxUtil",function()

{

//默认的私有变量

var myPath = "http://jxj.com";

var setPath = function(path)

{

//通过config改版默认的属性

myPath = url;

};

this.$get = function($http)

{

var obj = {};

var parseParam = function(url, param)

{

var params = JSON.stringify(param);

return url + "=" + "‘"+params + "‘";

};

obj.postData = function (url, param)

{

var postURL = url +".action" +"?" + parseParam(url, param);

return $http({method:"POST",url:postURL});

};

obj.getData = function (url, param)

{

var postURL = url +".action" +"?" +  parseParam(url, param);

return $http({method:"GET",url:postURL});

};

return obj;

}

});

通过使用provider方法,可以在多个应用使用同一个服务时,获得更强的拓展性,特别是在不同应用或者开源社区共享服务时。

在上面的李自重provider方法在文本AjaxUtil后添加provider生成一个新的提供者,AjaxUtilProivder可以被注入到config函数中。

formApp.config(function(AjaxUtilProvider)

{

AjaxUtilProvider.setPath("http://jiaxiangjun.com");

});

如果希望在config函数中可以对服务惊醒配置,必须用provider来定义服务。Provider方法为服务注册提供者,接受两个参数。

name()字符串:providerCache中注册的名字;name+provider会成为服务的提供者,也是服务实例的名字。

aProvider(对象、函数、数组)

如果aProvider是函数,那么他会通过依赖注入被调用,并且负责通过$get方法返回一个对象。

如果是一个数组,会被当做一个带有行内依赖注入声明的函数来处理;数组的最后一个元素应该是函数,可以返回一个带有$get方法。

Provider函数返回一个已经注册的提供者实例。

直接providerAPI是最原始的创建服务的方法:

angular.module("myApp", []).provider("userService", {

favoriteColor:null,

setFavoriteColor:function(newColor) {

this.favoriteColor =newColor;

},

$get:function($http) {

return {

"name":"Ari",

getFavoriteColor:function(){

returnthis.favoriteColor || "unkown";

}

};

}

});

用这个方法创建服务,必须返回一个定义有$get()函数的对象,否则会导致错误;可以通过注入器来实例化服务。

var injector = angular.injector(["myApp"]);

injector.invoke(

["userService",function(userService) {

//todo smething

}]);

Provider非常强大,可以让我们在不同的应用中共享服务。

4.    constant

可以将一个已经存在的变量值注册为服务,冰晶其注入到应用的其他部分;例如,假设我们需要一个apiKey,可以用constant将其当做常量保存下来。

接受两个参数。

name(字符串):需要注册常量的名字;

value(常量):需要注入的常量的值。

angular.module("myApp").constant("apiKey","jiaxiangjun");

//这个常量服务可以想其他服务一样被注入到配置函数中

angular.module("myController",function($scope, apiKey) {

//to do something

})

5.    value

如果服务的$get方法返回的是一个常量,那就没必要定义一个包含复杂功能的完整服务,可以通过value函数方便地注册服务,接收两个参数。

name(字符串),注册的服务名;

value,将这个值作为可以注入的实例返回。

Value方法返回已name参数的值为名称的注册后的服务实例。

angular.module("myApp").value("api","jiaxiangjun");

何时使用value,constant

主要的区别在于,常量可以注入到配置函数中,而value不行;

一般来讲,value来注册服务对象或函数,用constant来配置数据。

时间: 2024-10-13 01:24:41

自学angular系列-----创建服务的相关文章

自学angular系列-----路由与多视图

http://www.angularjs.cn/A00a

自学angular系列-----链接与图片模板

http://www.angularjs.cn/A009

自学angular系列-----更多模板

http://www.angularjs.cn/A00b

Angular系列------AngularJS快速开始(转载)

Hello World! 开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”: 使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html. 将下面的源代码复制到您的HTML文件. 在web浏览器中打开这个HTML文件. 源代码 <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1

Angular系列----AngularJS入门教程05:双向绑定(转载)

在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f step-4 你应该发现除了搜索框之外,你的应用多了一个下来菜单,它可以允许控制电话排列的顺序. 步骤3和步骤4之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 模板 app/index.html Search: <input ng-model="query"&g

Angular系列----AngularJS入门教程04:迭代器过滤(转载)

我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视着你的应用,并且在发生回归的时候迅速报告. 请重置工作目录: git checkout -f step-3 我们的应用现在有了一个搜索框.注意到页面上的手机列表随着用户在搜索框中的输入而变化. 步骤2和步骤3之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 控制器 我们对控制器不做

Angular系列---- AngularJS入门教程03:AngularJS 模板(转载)

是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图

Angular系列----AngularJS入门教程01:AngularJS模板 (转载)

是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图

Angular系列----AngularJS入门教程00:引导程序(转载)

我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angular-phonecat目录,运行如下命令: git checkout -f step-0 该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改成您学习步骤对应的数字,该命令将清除您在工作目录内做的任何更改. 运行以下命令: node scripts/web-s