AngularJS服务(Factory/Provider/Service)

前端之家收集整理的这篇文章主要介绍了AngularJS服务(Factory/Provider/Service)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

除了constant以外,service,factory,value都是通过$provider构造的,decorator是用来修饰provider的,它本身不是provider,它不能修饰Constant,因为constant并不是通过provider()方法创建的。本文主要介绍这些如果创建和使用这些服务。

Value

可以是string,number,function,于constant的区别在于,它可以被修改,不能被注入到config中,但是能被装饰器(decorator)装饰

angular.module("exampleApp",[])
    .value("country","China");

本质上就是:

angular.module("exampleApp",[])
    config(function ($provider) {
        $provider.value('movieTitle','The Matrix');
    });

factory

angular.module("customServices",[])
    .factory("logService",function(){
        var messageCount = 0;
        return {
            log: function(msg){
                console.log("(LOG: " + messageCount++ + ")" + msg);
            }
        }
    })

通过工厂函数返回服务对象,每当logService被请求,都将被AngularJS使用。工厂函数仅会被调用一次。

使用logService服务:

声明对customServices模块的依赖。

在控制器的工厂函数添加对logService服务的依赖。

angular.module("exampleApp",["customServices"])
    .controller("defaultCtrl",function($scope,logService){
        $scope.$watch("data.totalClicks",function(newVal){
            logService.log("Total click count:" + newVal);
        });
    })

Service

使用service定义服务时,AngularJS使用工厂函数返回的对象就像构造器使用JavaScript的new关键字创建服务对象一样。

function BaseLogger(){
    this.message = 0;
};
BaseLogger.prototype.log = function(msg){
    console.log(this.msgType + ": " + (this.messageCount++) + " " + msg);
}

function DebugLogger(){};
DebugLogger.prototype = new BaseLogger();
DebugLogger.prototype.msgType = "Debug";

function ErrorLogger(){};
ErrorLogger.prototype = new BaseLogger();
ErrorLogger.prototype.msgType = "Error";

angular.module("customServices",[])
    .service("logService",DebugLogger)
    .service("errorService",ErrorLogger);

1.创建BaseLogger的构造函数,在其中定义了message属性。并在BaseLogger的原型对象上定义了log方法

2.创建DebugLogger构造函数,被设置其prototype对象为BaseLogger的实例,DebugLogger继承BaseLogger。

3.创建ErrorLogger构造函数,被设置其prototype对象为BaseLogger的实例,ErrorLogger继承BaseLogger。

将构造器传给service方法,AngularJS将调用new方法创建服务对象。

当然,也不是非得使用原型,也可以把它看作是工厂方法,如下所示:

angular.module("customServices",function(){
        return {
            messageCount: 0,log: function(msg){
                console.log("Debug: " + (this.messageCount++) + " " + msg);
            }
        }
    });

在service里面可以不用返回东西,因为AngularJS会调用new关键字来创建对象。

Provider

Module.provider方法可以更好地控制被创建或被配置的服务对象的方式。

angular.module("customServices",[])
    .provider("logService",function(){
        $get: function(){
            return {
                messageCount: 0,log: function(msg){
                    if(debug){
                        console.log("(LOG" + (counter ? " + " + this.messageCount++ +")" : ")") + msg);
                    }
                }
            }
        }
    });

Provider方法的参数是将被定义在服务的名称和工厂函数

工厂函数必须返回选择器对象,并在其中定义 get

猜你在找的Angularjs相关文章