Angular 服务定义:服务或工厂 [英] Angular Service Definition: service or factory

问题描述

我是一个有角度的新手，我正在构建一个应用程序，让我感到困惑的一件事是有几种定义服务的方法，我从这个链接中阅读了更多内容:如何定义服务那么，定义一个服务的方式似乎没有太大区别.

I am an angular newbie, I am building an application, one thing really puzzling me is there are couple of ways of defining a service, and I read more from this link: How to define service then it seems there is no big difference among the ways of defining a service.

但我只注意到一个我认为不同的区别:

but I just noticed one difference which I think is different:

查看我从这里获得的服务 http://jsfiddle.net/2by3X/5/

see this service I get from here http://jsfiddle.net/2by3X/5/

var app = angular.module('myApp', []);
app.service('test', function($timeout, $q) {
  var self = this;
  this.getSomething = function() {
    return self.getData().then(function(data) {
      return self.compactData(data);
    });
  };
  this.getData = function() {
    var deferred = $q.defer();

      $timeout(function() {
          deferred.resolve("foo");
      }, 2000);
    return deferred.promise;
  };
  this.compactData = function(data) {
    var deferred = $q.defer();

    console.log(data);

    $timeout(function() {
        deferred.resolve("bar");
    }, 2000);
    return deferred.promise;
  };
});

如果我像下面这样使用工厂"定义这个服务，一个函数不能调用该服务的其他函数.

if I define this service using "factory" like below, one function cannot call other functions of the service.

app.factory('test', function($timeout, $q) {
  return {
      getSomething : function() {
    return getData().then(function(data) {
      return compactData(data);
    });
  },

      getData : function() {
    var deferred = $q.defer();

      $timeout(function() {
          deferred.resolve("foo");
      }, 2000);
    return deferred.promise;
  },

      compactData : function(data) {
    var deferred = $q.defer();

    console.log(data);

    $timeout(function() {
        deferred.resolve("bar");
    }, 2000);
    return deferred.promise;
  },
 };
});

我会在浏览器控制台中得到这个:

I will get this in the browser console:

[08:41:13.701] "Error: getData is not defined
.getSomething@http://fiddle.jshell.net/_display/:47
Ctrl1@http://fiddle.jshell.net/_display/:75
invoke@http://code.angularjs.org/1.0.0/angular-1.0.0.js:2795
instantiate@http://code.angularjs.org/1.0.0/angular-1.0.0.js:2805

谁能解释一下?谢谢.

推荐答案

你有两个大问题:

• 工厂返回一个语法不正确的对象.
• javascript 变量范围是函数式的

也就是说，你应该返回一个像 {key: value, key: value}

That is, You should be returning an object like {key: value, key: value}

值可以是函数.但是，您返回 {key = value, key = value}

values can be functions. however, you return {key = value, key = value}

第一次修复:

return { 
    getSomething : function() {...},
    getData : function... 
}

其次，不能调用函数是正常的.请参阅此 jsfiddle.我嘲笑一切.您可以调用服务返回的函数之一.但是，当从 getSomething 尝试调用 getData 时，您会得到未定义":

Secondly, not being able to call functions is normal. See this jsfiddle. I mocked everything. You can call one of the functions returned by the service. However, when from getSomething try to call getData, you get "undefined":

app.factory('testSO', function () {
return {
    getSomething: function () {
        console.log('return getsomething');
        getData();
    },

    getData: function () {
        console.log('return getData');
    }...

这与声明工厂函数范围内的所有内容并返回引用相同参见 jsfiddle:>

This would be the same as declaring everything in the scope of the factory function and return references see in jsfiddle:

app.factory('testSO', function () {
    var getSomething = function () {
        console.log('return getsomething');
    };
    ...
return {
    getSomething: getSomething,
    ...
}

现在您可以调用本地函数，如jsfiddle的最终版本所示:

and now you can call local functions as shown in the final version of the jsfiddle:

app.factory('testSO', function () {
    var getSomething = function () {
        console.log('return getsomething');
        getData();
    };
...

原始服务中有一些重要的东西:var self = this;.有些人使用 var that = this.这是 ECMA 错误的解决方法.在原始代码的情况下，它用于将所有内容放在一个对象中".self 中的函数(恰好是函数的属性)需要引用才能知道要调用的函数在哪里.在这里自己尝试 http://jsfiddle.net/Z2MVt/7/

The original service has something important in it: var self = this; . Some people use var that = this. It's a workaround for an error in ECMA. In the case of the original code, it's used to "put everything in one object". Functions (properties that happen to be functions) in self need a reference to know where the function you want to call is. Try it yourself here http://jsfiddle.net/Z2MVt/7/

这篇关于Angular 服务定义:服务或工厂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！