返回介绍

定义服务

发布于 2024-12-24 22:41:42 字数 5717 浏览 0 评论 0 收藏 0

14.3. 定义服务

服务本身是一个任意的对象。但是 `ng` 提供服务的过程涉及它的依赖注入机制。在这里呢,就要先介绍一下叫 `provider` 的东西。

简单来说, `provider` 是被“注入控制器”使用的一个对象,注入机制通过调用一个 `provider` 的 `$get()` 方法,把得到的东西作为参数进行相关调用(比如把得到的服务作为一个 `Controller` 的参数)。

在这里“服务”的概念就比较不明确,对使用而言,服务仅指 `$get()` 方法返回的东西,但是在整体机制上,服务又要指提供了 `$get()` 方法的整个对象。

  //这是一个provider
  var pp = function(){
    this.$get = function(){
      return {'haha': '123'};
    }
  }

  //我在模块的初始化过程当中, 定义了一个叫 PP 的服务
  var app = angular.module('Demo', [], function($provide){
    $provide.provider('PP', pp);
  });

  //PP服务实际上就是 pp 这个 provider 的 $get() 方法返回的东西
  app.controller('TestCtrl',
    function($scope, PP){
      console.log(PP);
    }
  );

上面的代码是一种定义服务的方法,当然, `ng` 还有相关的 shortcut, `ng` 总有很多 shortcut 。

第一个是 `factory` 方法,由 `$provide` 提供, `module` 的 `factory` 是一个引用,作用一样。这个方法直接把一个函数当成是一个对象的 `$get()` 方法,这样你就不用显式地定义一个 `provider` 了:

  var app = angular.module('Demo', [], function($provide){
    $provide.factory('PP', function(){
      return {'hello': '123'};
    });
  });
  app.controller('TestCtrl', function($scope, PP){ console.log(PP) });

在 `module` 中使用:

  var app = angular.module('Demo', [], function(){ });
  app.factory('PP', function(){return {'abc': '123'} });
  app.controller('TestCtrl', function($scope, PP){ console.log(PP) });

第二个是 `service` 方法,也是由 `$provide` 提供, `module` 中有对它的同名引用。 `service` 和 `factory` 的区别在于,前者是要求提供一个“构造方法”,后者是要求提供 `$get()` 方法。意思就是,前者一定是得到一个 object ,后者可以是一个数字或字符串。它们的关系大概是:

  var app = angular.module('Demo', [], function(){ });
  app.service = function(name, constructor){
    app.factory(name, function(){
      return (new constructor());
    });
  }

这里插一句,js 中 `new` 的作用,以 new a() 为例,过程相当于:

  1. 创建一个空对象 obj
  2. 把 obj 绑定到 a 函数的上下文当中(即 a 中的 this 现在指向 obj )
  3. 执行 a 函数
  4. 返回 obj

`service` 方法的使用就很简单了:

  var app = angular.module('Demo', [], function(){ });
  app.service('PP', function(){
    this.abc = '123';
  });
  app.controller('TestCtrl', function($scope, PP){ console.log(PP) });

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文