分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了《AngularJS》------自定义服务 provider、service、factory，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

在AngularJS中，我们经常将通用的业务逻辑封装在服务里面，这样一来，不仅减少了代码量，而且使出错率也降低了，代码的易读性也提高了，所以说，我们经常用到了业务逻辑，或者是说持久化数据化操作应该放在自定义的服务里面，而不是Controller里面。下面我说一下provider、service、factory的定义方式还有主要区别。

1、provider

Providers是唯一一种你可以传进 .config() 函数的service。当你想要在 service对象启用之前，先进行模块范围的配置，那就应该用 provider。当我们定义provider时候，我们还必须将返回对象放在this.$get=function(){}中。代码如下:

var mymodule = angular.module("HelloAngular",[]);
mymodule.config(['providerserviceProvider',function(providerserviceProvider){
    providerserviceProvider.name='这是通过外部config传入的参数名字:大哥你好啊！！！！！！';
}])

mymodule.provider('providerservice',function(){

    this.name='';

    this.$get=function(){
        var _name='';
        var serverce={};
        var that =this;
        serverce.setName=function(Name){
            _name=name;
        }

        serverce.getName=function(){
            return _name;
        }

        serverce.getConfigName=function(){
            return that.name;
        }
        return serverce;
    }
});

定义个Controller调用该服务

@H_879_26@m ymodule.controller("HelloAngular",['$scope','service01','factory01','providerservice',function HelloAngular($scope,service01,factory01,providerservicE) { providerservice.setName("这是providerservice服务设置的名字：美女，今晚约吗？"); console.log(providerservice.getName()); console.log(providerservice.getConfigName()); } ]); 效果图：

2、service

service是用"new"关键字实例化的。因此，你应该给"this"添加属性，然后service返回"this"。你把 service 传进 controller 之后，在 controller 里 "this" 上的属性就可以通过 service来使用了。

@H_278_49@m ymodule.service('service01',function(){ var _name=''; this.setName=function(Name){ _name=name; } this.getName=function(){ return _name; }; });

Controller可以这么写

@H_379_59@m ymodule.controller("HelloAngular",service01) { service01.setName("这是service01服务设置的名字：美女，今晚约吗？"); console.log(service01.getName()); } ]);

3、factory

factory 方法直接把一个函数当成一个对象的$get 方法，它还可以直接返回字符串，用factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。你把service 传进 controller 之后，在controller 里这个对象里的属性就可以通过factory 使用了。代码如下:

factory直接返回字符串，其它的两个服务不行。

@H_565_77@m ymodule.factory('factory01',function(){ return '你大爷的'; });

factory定义对象，然后在对象上定义各种属性，各种方法。

@H_407_87@m ymodule.factory('factory01',function(){ var _name=''; var serverce={}; var that =this; serverce.setName=function(Name){ _name=name; } serverce.getName=function(){ return _name; } serverce.getConfigName=function(){ return that.name; } return serverce; }); Controller的调用我就不用再写了吧，和上面一样，相比较三种方式，定义服务的方法大同小异，只是provider方法稍微复杂了点。

service方法与factory相比，service可以不用生命对象，它直接将某些属性和方法绑定在this上就可以，但是它不可以直接返回字符串，而factory定义的服务必须在里面定义一个对象，将某些公用的方法或者属性绑定在此对象上，然后Return回去。这就是我总结的Angular中三种自定义服务的区别，其实这三种服务还有其它定义方式，可以通过config定义，也可以直接在声明module时当第三个参数传入进去使用，本人认为使用module方法简单，所以今天只是总结了这种方法。