您的位置：首页 > Web前端 > AngularJS

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

2017-05-03 10:36 435 查看

版权声明：本文为博主原创文章，未经博主允许不得转载。

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

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

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

[html] view
plain copy

<!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方法引入:

[html] view
plain copy

<!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来使用了。

[html] view
plain copy

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航