AngularJS中自定义服务的常见方式及特点

一、自定义服务的常见方式

1. $provide.provider

1.1 返回基本类型

var myApp = angular.module('app',[],function($provide){
    $provide.provider('customService',function(){
        this.$get = function() {
            return 'customService message....';
        };
    });
});

//在模块内定义一个控制器firstController，并且注入了customService对象，customService参数放前放后都不要紧，都会自动匹配
myApp.controller('firstController', function($scope,customService){
    console.log(customService); //测试注入的对象
});

1.2 返回对象类型

var myApp = angular.module('app',[],function($provide){
    // 自定义的第二个服务
    $provide.provider('customService2',function(){
        this.$get = function() {
            return {
                message : 'customService2 message....'，
                show:function(){
                    alert("hi");
                }
            }
        };
    });
});

//在模块内定义一个控制器firstController，并且注入了customService对象，customService参数放前放后都不要紧，都会自动匹配
myApp.controller('firstController', function($scope,customService2){
    console.log(customService2.message); //测试注入的对象
    console.log(customService2.show()); //测试注入的对象
});

2 $provide.factory及$provide.service

2.1 $provide.factory服务

2.1.1 $provide.factory基本类型

        //使用factory创建服务
        $provide.factory('factoryServices02',function(){

                return 'this is factoryServices01  text';
        });

2.1.2 $provide.factory对象类型

    //使用factory创建服务（比provider语法简单）
        $provide.factory('factoryServices01',function(){
                return {
                    message:'this is factoryServices01',
                    shower:function(name,age){
                        var person ={};
                        person.name = name;
                        person.age = age;
                        return person;
                    },
                    info:function () {
                        return this.shower('rose',33);
                    }
                }

       });

2.2 $provide.service服务

2.2.1 $provide.service仅支持返回对象类型

        //使用service创建服务（比provider语法简单）
        $provide.service('serviceServices01',function(){
            return {
                message:'this is serviceServices01',
                show:function(){
                    return "hello chicken";
                }
            }

        })

3 app.provider、app.factory及app.service

比起以上两种注册服务的方式，该方式更简单

var m1 = angular.module('myApp',[]);

    //直接这么写
    m1.provider('providerServices01',function(){

        this.$get=function(){

            return {
                message:'this is providerServices01'
            }
        }

    });

    // 自定义工厂（既可以基本类型，又可以返回对象类型）
    m1.factory('factoryServices01',function(){
        return {
            message:'this is factoryServices01'
        }
    });

    // 自定义服务（只能返回对象类型）
    m1.service('serviceServices01',function(){
        return {
            message:'this is serviceServices01'
        }
        // return 100; //返回基本类型则无任何意义
    });

    m1.controller('firstController',['$scope','providerServices01','factoryServices01','serviceServices01',function($scope,providerServices01,factoryServices01,serviceServices01){

        console.log(providerServices01);

        console.log(factoryServices01);

        console.log(serviceServices01);

        $scope.name='张三';

    }]);

二、 provider、factory及service区别

1. provider特点

provider定义服务的方式是唯一可以注入到config的服务，注意名称是xxxxProvider

 m1.config(['providerServices01Provider','$interpolateProvider',function(providerServices01Provider,$interpolateProvider){

        //设置provider的属性
        providerServices01Provider.name='张三';
        providerServices01Provider.age=50;

        //重新定义绑定数据的起始和终止符号为##
        $interpolateProvider.startSymbol('##');
        $interpolateProvider.endSymbol('##');

    }])

    m1.provider('providerServices01',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;
        }
    });
 });

2. factory特点

既可以基本类型，又可以返回对象类型

3. service特点

只能返回对象类型