加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 09:11:11 所属栏目:安全 来源:网络整理
导读:一、自定义服务的常见方式 1. $provide.provider 1.1 返回基本类型 var myApp = angular.module( 'app' ,[], function ($provide) { $provide.provider( 'customService' , function () { this .$get = function () { return 'customService message....' ;

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

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',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',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特点

只能返回对象类型

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读