angularjs - angular.service 定义 : service or factory

Question

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

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

看到我从这里获得的这项服务 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;
  };
});

如果我使用如下所示的“工厂”定义此服务，则一个函数无法调用该服务的其他函数。

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;
  },
 };
});

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

[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

谁能解释一下？谢谢。

Answer 1

你有两个大问题:

工厂返回一个语法不正确的对象。

javascript 变量范围是函数式的

那是，
你应该返回一个像 {key: value, key: value} 这样的对象

值可以是函数。但是，您返回 {key = value, key = value}
第一个修复:

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

其次，不能调用函数是正常的。看到这个 jsfiddle .我 mock 一切。您可以调用服务返回的函数之一。但是，当从 getSomething 尝试调用 getData 时，您会得到“未定义”:

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

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

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

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

现在您可以调用本地函数，如 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/