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)装饰

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

本质上就是:

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

factory

  1. angular.module("customServices",[])
  2. .factory("logService",function(){
  3. var messageCount = 0;
  4. return {
  5. log: function(msg){
  6. console.log("(LOG: " + messageCount++ + ")" + msg);
  7. }
  8. }
  9. })

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

使用logService服务:

声明对customServices模块的依赖。

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

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

Service

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

  1. function BaseLogger(){
  2. this.message = 0;
  3. };
  4. BaseLogger.prototype.log = function(msg){
  5. console.log(this.msgType + ": " + (this.messageCount++) + " " + msg);
  6. }
  7.  
  8. function DebugLogger(){};
  9. DebugLogger.prototype = new BaseLogger();
  10. DebugLogger.prototype.msgType = "Debug";
  11.  
  12. function ErrorLogger(){};
  13. ErrorLogger.prototype = new BaseLogger();
  14. ErrorLogger.prototype.msgType = "Error";
  15.  
  16. angular.module("customServices",[])
  17. .service("logService",DebugLogger)
  18. .service("errorService",ErrorLogger);

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

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

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

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

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

  1. angular.module("customServices",function(){
  2. return {
  3. messageCount: 0,log: function(msg){
  4. console.log("Debug: " + (this.messageCount++) + " " + msg);
  5. }
  6. }
  7. });

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

Provider

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

  1. angular.module("customServices",[])
  2. .provider("logService",function(){
  3. $get: function(){
  4. return {
  5. messageCount: 0,log: function(msg){
  6. if(debug){
  7. console.log("(LOG" + (counter ? " + " + this.messageCount++ +")" : ")") + msg);
  8. }
  9. }
  10. }
  11. }
  12. });

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

工厂函数必须返回选择器对象,并在其中定义 get get方法),返回服务对象。

需要该服务时,AngularJS将调用factory方法获得提供器对象,然后调用$get方法获得服务对象。服务的使用方式和service、factory定义的服务相同。

使用provider方法的优点是可以为provider方法提供功能,该方法可用于配置对象。

  1. angular.module("customServices",function(){
  2. var counter = true;
  3. var debug = true;
  4. return {
  5. messageCounterEnabled: function(setting){
  6. if(angular.isDefined(setting)){
  7. counter = setting;
  8. return this;
  9. } else {
  10. return counter;
  11. }
  12. },debugEnabled: function(setting){
  13. if(angular.isDefined(setting)){
  14. debug = setting;
  15. return this;
  16. } else {
  17. return debug;
  18. }
  19. },$get: function(){
  20. return {
  21. messageCount: 0,log: function(msg){
  22. if(debug){
  23. console.log("(LOG" + (counter ? " + " + this.messageCount++ +")" : ")") + msg);
  24. }
  25. }
  26. }
  27. }
  28. }
  29. });

提供器对象方法的惯例是当提供参数时被用于设置,而没有参数时用于查询

  1. angular.module("exampleApp",["customDirectives","customServices"])
  2. .config(function(logServiceProvider){
  3. logServiceProvider.debugEnabled(true).messageCounterEnabled(true);
  4. })
  5. .controller("defaultCtrl",function(newVal){
  6. logService.log("Total click count:" + newVal);
  7. });
  8. })

Constant

定义常量,定义的值不能被改变,它可以被注入到任何地方,但是不能被装饰器(decorator)装饰

  1. angular.module("exampleApp",[])
  2. .constant("country","China");

Decorator

它不是provider,它是用来装饰其它provider的.它不能装饰Constant,因为实际上Contant不是通过provider()方法创建的。

  1. angular.module("exampleApp",[])
  2. .config(function($provider){
  3. $provider.decorator("country",function($delegate){
  4. return $delegate + "is beautiful";
  5. });
  6. });

必须注意服务对象是单例的,一旦修改,将影响到所有使用该服务的组件。

总结 1、所有的服务都只被实例化一次,也就说他们都是单例的 2、除了constant,所有的服务都可以被装饰器(decorator)装饰 3、value就是一个简单的可注入的值 4、service是一个可注入的构造器 5、factory是一个可注入的方法 6、decorator可以修改或封装其他的服务,当然除了constant 7、provider是一个可配置的factory

猜你在找的Angularjs相关文章