AngularJS服务service用法总结
本文实例总结了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的使用
Factory方法直接把一个函数当成一个对象的$get 方法可以直接返回字符串，用 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服务的一些总结，这些都是入门的知识，在这和大家分享一下，如果想要对服务有更深层的理解还需要我们在项目中好好的研究。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
本篇文章主要介绍了angular5 httpclient的示例实战，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
angularjs ocLazyLoad分步加载js文件实例
本篇文章主要介绍了angularjs ocLazyLoad分步加载js文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
Angular组件库ng-zorro-antd实现radio单选框选择
这篇文章主要为大家介绍了Angular组件库ng-zorro-antd实现radio单选框取消选择实现问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
ng-template 是用来定义模板的，当使用ng-template定义好一个模板之后，可以用ng-container和templateOutlet指令来进行使用。这篇文章给大家介绍了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法，需要的朋友参考下吧2018-08-08
本文主要介绍AngularJs E2E Testing的资料，这里整理了详细的资料，及简单代码示例，有兴趣的小伙伴可以参考下2016-09-09
这篇文章主要介绍了AngularJS控制器之间的通信方式,结合实例形式分析了作用域继承方式、事件方式及angular服务方式等常用的通信方式,需要的朋友可以参考下2016-11-11
深入解析AngularJS框架中$scope的作用与生命周期
这篇文章主要介绍了AngularJS中$scope的作用与生命周期,包括在DOM中添加controller对象的相关用法,需要的朋友可以参考下2016-03-03
本篇文章主要介绍了如何在Angular2中使用jQuery及其插件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了Angular 常用指令实例总结整理的相关资料,本文整理了常用指令，大家可以参考使用，需要的朋友可以参考下2016-12-12
这篇文章主要介绍了Angular设置别名alias及打包命令的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论