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

查看:109
本文介绍了角服务定义:服务或工厂的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是一个新手的角度,我建立一个应用程序,一件事真的百思不得其解的是,有几个定义服务的方式,我从这个链接阅读更多:的如何定义服务
那么它似乎还有定义服务的方式之间没有大的区别。

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

有人能解释一下吗?谢谢。

Can anyone explain this? thanks.

推荐答案

您已经有两个大问题:


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

  • 变量的javascript范围功能

也就是说,
你应该返回一个对象,如 {键:值,键:值}

值可以是功能。但是,您返回 {键=值,键=值}

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');
    }...

这将是一样的,在工厂函数的声明范围内的一切,并返回 href=\"http://jsfiddle.net/Z2MVt/5/\">见参考文献:

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自我=这一点; 。有些人使用 VAR的=导致该。它是在ECMA错误一种变通方法。
在原来的code的情况下,它是用来把一切都放在一个对象。功能(即恰好是函数的性质)需要一个参照知道你要调用的函数。在这里你自己试试看 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/

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆