AngularJS服务(Factory/Provider/Service)
2016-08-25 14:41
525 查看
除了constant以外,service,factory,value都是通过$provider构造的,decorator是用来修饰provider的,它本身不是provider,它不能修饰Constant,因为constant并不是通过provider()方法创建的。本文主要介绍这些如果创建和使用这些服务。
本质上就是:
通过工厂函数返回服务对象,每当logService被请求,都将被AngularJS使用。工厂函数仅会被调用一次。
使用logService服务:
声明对customServices模块的依赖。
在控制器的工厂函数中添加对logService服务的依赖。
1.创建BaseLogger的构造函数,在其中定义了message属性。并在BaseLogger的原型对象上定义了log方法。
2.创建DebugLogger构造函数,被设置其prototype对象为BaseLogger的实例,DebugLogger继承BaseLogger。
3.创建ErrorLogger构造函数,被设置其prototype对象为BaseLogger的实例,ErrorLogger继承BaseLogger。
将构造器传给service方法,AngularJS将调用new方法创建服务对象。
当然,也不是非得使用原型,也可以把它看作是工厂方法,如下所示:
在service里面可以不用返回东西,因为AngularJS会调用new关键字来创建对象。
Provider方法的参数是将被定义在服务的名称和工厂函数。
工厂函数必须返回选择器对象,并在其中定义get方法(注意:必须有get方法),返回服务对象。
需要该服务时,AngularJS将调用factory方法获得提供器对象,然后调用$get方法获得服务对象。服务的使用方式和service、factory定义的服务相同。
使用provider方法的优点是可以为provider方法提供功能,该方法可用于配置对象。
提供器对象方法的惯例是当提供参数时被用于设置,而没有参数时用于查询,
必须注意服务对象是单例的,一旦修改,将影响到所有使用该服务的组件。
总结
1、所有的服务都只被实例化一次,也就说他们都是单例的
2、除了constant,所有的服务都可以被装饰器(decorator)装饰
3、value就是一个简单的可注入的值
4、service是一个可注入的构造器
5、factory是一个可注入的方法
6、decorator可以修改或封装其他的服务,当然除了constant
7、provider是一个可配置的factory
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", []) .service("logService", 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方法(注意:必须有get方法),返回服务对象。
需要该服务时,AngularJS将调用factory方法获得提供器对象,然后调用$get方法获得服务对象。服务的使用方式和service、factory定义的服务相同。
使用provider方法的优点是可以为provider方法提供功能,该方法可用于配置对象。
angular.module("customServices", []) .provider("logService", function(){ var counter = true; var debug = true; return { messageCounterEnabled: function(setting){ if(angular.isDefined(setting)){ counter = setting; return this; } else { return counter; } }, debugEnabled: function(setting){ if(angular.isDefined(setting)){ debug = setting; return this; } else { return debug; } }, $get: function(){ return { messageCount: 0, log: function(msg){ if(debug){ console.log("(LOG" + (counter ? " + " + this.messageCount++ +")" : ")") + msg); } } } } } });
提供器对象方法的惯例是当提供参数时被用于设置,而没有参数时用于查询,
angular.module("exampleApp", ["customDirectives", "customServices"]) .config(function(logServiceProvider){ logServiceProvider.debugEnabled(true).messageCounterEnabled(true); }) .controller("defaultCtrl", function($scope, logService){ $scope.$watch("data.totalClicks", function(newVal){ logService.log("Total click count:" + newVal); }); })
Constant
定义常量,定义的值不能被改变,它可以被注入到任何地方,但是不能被装饰器(decorator)装饰angular.module("exampleApp",[]) .constant("country", "China");
Decorator
它不是provider,它是用来装饰其它provider的.它不能装饰Constant,因为实际上Contant不是通过provider()方法创建的。angular.module("exampleApp",[]) .config(function($provider){ $provider.decorator("country", function($delegate){ return $delegate + "is beautiful"; }); });
必须注意服务对象是单例的,一旦修改,将影响到所有使用该服务的组件。
总结
1、所有的服务都只被实例化一次,也就说他们都是单例的
2、除了constant,所有的服务都可以被装饰器(decorator)装饰
3、value就是一个简单的可注入的值
4、service是一个可注入的构造器
5、factory是一个可注入的方法
6、decorator可以修改或封装其他的服务,当然除了constant
7、provider是一个可配置的factory
相关文章推荐
- 深究AngularJS——自定义服务详解(factory、service、provider)
- 深究AngularJS——自定义服务详解(factory、service、provider)
- 深究AngularJS——自定义服务详解(factory、service、provider)
- AngularJS之自定义服务详解(factory、service、provider)
- AngularJS 1.x系列:AngularJS服务-Service、Factory、Provider、Value及Constant(5)
- 深究AngularJS——自定义服务详解(factory、service、provider)
- 《AngularJS》------自定义服务 provider、service、factory
- AngularJS学习笔记--服务的创建方法factory() service() provider()等
- AngularJS系统学习之Factory,Service, Provider(工厂,服务,供应者)
- AngularJS——自定义服务示例:factory+service+provider
- angularJs自定义服务(factory,service,provider)
- 深究AngularJS自定义服务详解(factory、service、provider)
- angularjs factory,service,provider 自定义服务的不同
- AngularJS服务之 Factory vs Service vs Provider
- angularjs factory,service,provider 自定义服务的不同
- AngularJS的自定义服务,factory、provider、service、constant、value等方法的区别
- 深究AngularJS——自定义服务详解(factory、service、provider)
- 深究AngularJS——自定义服务详解(factory、service、provider)
- 深究AngularJS——自定义服务详解(factory、service、provider)
- AngularJS笔记之创建服务方式比较 : factory vs service vs provider