angularJS学习小结——service
引言最近在项目中用到了关于angularJS中的服务相关的知识,在起初学习这个东西的时候就了解到这个东西在项目 中是经常被用到的,在angular中也是比较重要的一块,所以今天小编就总结一些关于service的知识。 认识Service关于service我们一点都不陌生,不论实在c#中还是java中我们经常会遇到service的概念,其实service的作用 就是对外提供某种特定的功能,也就是我们经常说的“为了实现某个功能而调用哪个服务”是一样的道理,他们一般 是一个独立的模块,ng服务是这样的定义的: Angular services are singletons objects or functions that carry out specific tasks common to web apps. 1、它是一个单利对象或函数,对外提供特定的功能。 2、它与我们自己定义一个function然后在其他地方调用不同,因为服务被定义在一个模块中,所以它的作用范 围是可以被我们来管理的,ng避免全局变量污染意识是非常强的。 自定义服务在angular中为我们提供了三种不同的方式来实现自定义服务,他们分别是系统内置的$provider、module中的 service和module中的factory,下面来看看如何使用这三种方式; 1)$provide的使用 Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前,先进行 模块范围的配置,那就应该用 provider
var m1 = angular.module('myApp',[],function ($provide) { $provide.provider('providerService01',function () { this.$get = function () { return { message: 'this is providerService01' } } }) $provide.provider('providerService02',function () { this.$get = function () { var _name = ''; var service = {}; service.setName = function (name) { _name = name; } service.getName = function () { return _name } return service; } }) }) m1.controller('firstController',['$scope','providerService01','providerService02',function ($scope,providerService01,providerService02) { console.log(providerService01); providerService02.setName("李四"); $scope.name = providerService02.getName(); }]) 我们在使用$provide的使用可以像上面这样直接在module中直接注入$provide,然后再module中依次定义多个服 务,当然我们也可以利用config来完成服务的定义。
var m1=angular.module('myApp',[]); m1.config(function($provide){ $provide.provider('providerService01',function () { this.$get = function () { return { message: 'this is providerService011' } } }); $provide.provider('providerService02',function () { this.$get = function () { var _name=''; var service={}; service.setName=function(name){ _name=name; } service.getName=function(){ return _name } return service; } }); }) 2)factory的使用
为它添加属性,然后把这个对象返回出来。你把 service 传进 controller 之后,在 controller 里这个对象里的 属性就可以通过 factory 使用了。
var m1 = angular.module('myApp',function ($provide) { $provide.factory('factoryService01',function(){ return{ message:'this is providerServices01' } }) }); factory的使用比$provide的使用简单一些,可以在factory直接返回已给对象,不在使用$get来实现对象的返 回。并且$factory和$provide不仅仅可以返回一个对象还可以返回一个任意的字符串。 3)service的使用 Service 是用"new"关键字实例化的。因此,你应该给"this"添加属性,然后 service 返回"this"。你把 service 传进 controller 之后,在 controller 里 "this" 上的属性 就可以通过 service 来使用了
$provide.service('service01',function(){ return{ message:'this is providerServices01' } }) service和factory的使用是非常相似的,但是service是不能返回字符串的,而factory既可以返回对象也可以返回任意 的字符串。 三者的区别:provider需要借助$get来实现,而其余的两者都不需要。series不能返回字符串,而其他的两个 都可以返回。 服务之间的依赖关系 我们在实现某个功能的时候也许需要多个服务相互依赖才可以完成,那么对于服务之间的关系我们就需要来管 理,例如我们在完成一个数据验证的功能,这是在jsFiddle中找的一个非常简单的小例子
var app = angular.module('MyApp',[]); app.controller('testC3',function($scope,validate){ $scope.validateData = validate; }); app.factory('remoteData',function(){ var data = {name:'n',value:'v'}; return data; }); app.factory('validate',function(remoteData){ return function(){ if(remoteData.name=='n'){ alert('验证通过'); } }; }); 服务validate是来验证数据是否合法的功能,但是它需要依赖另外一个服务remoteData来获得数据,但是在 factory的参数中,我们可以直接传入服务remoteData,ng的依赖注入机制便帮我们做好了其他工作。不过一定要保 证这个参数的名称与服务名称一致,ng是根据名称来识别的。若参数的名次与服务名称不一致,你就必须显示的声明 一下,方式如下:
app.factory('validate',['remoteData',function(remoteDataService){ return function(){ if(remoteDataService.name=='n'){ alert('验证通过'); } }; }]); 小结以上是小编在学习angularJS服务的一些总结,这些都是入门的知识,在这和大家分享一下,如果想要对服务有更 深层的理解还需要我们在项目中好好的研究。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |