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

最新推荐文章于 2020-01-20 15:54:56 发布

bboyjoe

最新推荐文章于 2020-01-20 15:54:56 发布

阅读量2.8k

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/bboyjoe/article/details/50456869

版权

AngularJS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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>

bboyjoe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs基础——自定义服务的三种方法以及provider供应商

AngularJs提供了三种方法可以自定义服务，分别是provider、factory、service.请注意三者之间的区别。有三种方式可以自定义服务：第一种方式，在module中以回调函数的形式作为参数引入： Angular基础 {{name}} var myApp=angular.module('myA
复制链接

扫一扫