AngularJs基础——自定义服务的三种方法以及provider供应商

来源：互联网发布：如何入侵网站修改数据编辑：程序博客网时间：2024/05/22 17:49

AngularJs提供了三种方法可以自定义服务，分别是provider、factory、service.请注意三者之间的区别。

有三种方式可以自定义服务：

第一种方式，在module中以回调函数的形式作为参数引入：

<!DOCTYPE html><html lang="zh_CN"><head>    <meta charset="UTF-8">    <title>Angular基础</title></head><body><div ng-app="myApp">    <div ng-controller="firstCtrl">        {{name}}    </div></div><script src="angular.min.js"></script><script type="application/javascript">    var myApp=angular.module('myApp',[],function($provide){        $provide.provider('providerService01',function(){            this.$get=function(){                return {message:'this is providerService01'};            }        });        $provide.provider('providerService02',function(){            this.$get=function(){                return 'this is providerService02';            }        });        $provide.factory('factoryService01',function(){            return {message:'this is factoryService01'};        });        $provide.factory('factoryService02',function(){            return 'this is factoryService02';        });        $provide.service('serviceService01',function(){            return {message:'this is serviceService01'};        });    });    myApp.controller('firstCtrl',['$scope','providerService01','providerService02','factoryService01','factoryService02','serviceService01',function(            $scope,providerService01,providerService02,factoryService01,factoryService02,serviceService01){        console.log(providerService01);        console.log(providerService02);        console.log(factoryService01);        console.log(factoryService02);        console.log(serviceService01);        $scope.name="张三";    }]);</script></body></html>

第二种方式,用config方法引入:

<!DOCTYPE html><html lang="zh_CN"><head>    <meta charset="UTF-8">    <title>Angular基础</title></head><body><div ng-app="myApp">    <div ng-controller="firstCtrl">        {{name}}    </div></div><script src="angular.min.js"></script><script type="application/javascript">    var myApp=angular.module('myApp',[]);    myApp.config(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;            }        });    });    myApp.controller('firstCtrl',['$scope','providerService01','providerService02',function($scope,providerService01,providerService02){        console.log(providerService01);        providerService02.setName("服务二");        $scope.name=providerService02.getName();    }]);</script></body></html>

第三种方式，module调用各自的方法：

<!DOCTYPE html><html lang="zh_CN"><head>    <meta charset="UTF-8">    <title>Angular基础</title></head><body><div ng-app="myApp">    <div ng-controller="firstCtrl">        {{name}}    </div></div><script src="angular.min.js"></script><script type="application/javascript">    var myApp=angular.module('myApp',[]);    myApp.provider('providerService01',function(){        this.$get=function(){            return {message:'this is providerService01'};        }    });    myApp.factory('factoryService01',function(){            return {message:'this is factoryService01'};    });    myApp.service('serviceService01',function(){            return {message:'this is serviceService01'};    });    myApp.controller('firstCtrl',['$scope','providerService01','factoryService01','serviceService01',function(            $scope,providerService01,factoryService01,serviceService01){        console.log(providerService01);        console.log(factoryService01);        console.log(serviceService01);        $scope.name="张三";    }]);</script></body></html>

Provider、Factory、Service三者之间的区别是：

Provider是唯一一种可以传进.config()函数的service.当你想要在service对象启用之前，先进行模块范围的配置，那就应该用provider。

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

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

<!DOCTYPE html><html lang="zh_CN"><head>    <meta charset="UTF-8">    <title>Angular基础</title></head><body><div ng-app="myApp">    <div ng-controller="firstCtrl">        {{name}}<br/>        ##name##    </div></div><script src="angular.min.js"></script><script type="application/javascript">    var myApp=angular.module('myApp',[]);    myApp.config(['providerService01Provider','$interpolateProvider',function(providerService01Provider,$interpolateProvider){        providerService01Provider.name="李四";        providerService01Provider.age=25;        //用$interpolateProvider改变数据绑定的方式        $interpolateProvider.startSymbol('##');        $interpolateProvider.endSymbol('##');    }]);    myApp.provider('providerService01',function(){        //可以在config里配置的属性            this.name="";            this.age="";            this.$get=function(){                var that=this;                var _name="";                var service={};                service.setName=function(name){                    _name=name;                };                service.getName=function(){                    return _name;                };                service.getConfigName=function(){                    return that.name+',age:'+that.age;                }                return service;            }    });    myApp.factory('factoryService01',function(){        var _name="";        var service={};        service.setName=function(name){            _name=name;        };        service.getName=function(){            return _name;        };        return service;    });    myApp.service('serviceService01',function(){        var _name="";        this.setName=function(name){            _name=name;        };        this.getName=function(){            return _name;        }    });    myApp.controller('firstCtrl',['$scope','providerService01','factoryService01','serviceService01',function(            $scope,providerService01,factoryService01,serviceService01){        console.log(providerService01);        console.log(providerService01.getConfigName());        console.log(factoryService01);        console.log(serviceService01);        $scope.name="张三";    }]);    </script></body></html>

0 0