2013-07-03 8 views
6

Jestem początkującym początkującym, buduję aplikację, jedną rzecz naprawdę zastanawiającą mnie jest kilka sposobów definiowania usługi, a ja przeczytałem więcej z tego linku: How to define service następnie wydaje się, że nie ma dużej różnicy między sposobami definiowania usługi.Definicja usługi kątowej: serwis lub fabryka

ale ja zauważyłem jedną różnicę, która moim zdaniem jest inaczej:

zobaczyć tę usługę otrzymuję stąd 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; 
    }; 
}); 

gdybym określić tę usługę za pomocą „fabrykę” jak poniżej, jedna funkcja nie może wywoływać inne funkcje usługi.

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

będę się tego w konsoli przeglądarki:

[08:41:13.701] "Error: getData is not defined 
[email protected]://fiddle.jshell.net/_display/:47 
[email protected]://fiddle.jshell.net/_display/:75 
[email protected]://code.angularjs.org/1.0.0/angular-1.0.0.js:2795 
[email protected]://code.angularjs.org/1.0.0/angular-1.0.0.js:2805 

Może ktoś to wyjaśnić? dzięki.

Odpowiedz

9

masz dwie duże problemy tam:

  • fabryka zwraca obiekt z niewłaściwej składni.
  • javascript zakres zmiennych jest funkcjonalny

Oznacza to, powinien być powrót do obiektu jak {key: value, key: value}

wartości mogą być funkcje. jednak zwrócić {key = value, key = value}

First Fix:

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

Po drugie, nie jest w stanie wywoływać funkcje są normalne. Zobacz to jsfiddle. Wszystko wyśmiałem. Możesz wywołać jedną z funkcji zwróconych przez usługę. Jednak, gdy z getSomething próby wywołania getData, można dostać „nieokreślone”:

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

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

To byłaby taka sama jak deklarowania wszystko w zakresie funkcji fabrycznych i powrót referencje see in jsfiddle:

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

a teraz można wywołać funkcje lokalne, jak pokazano na final version of the jsfiddle:

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

oryginalny usługi ma coś ważnego w niej: var self = this;. Niektórzy używają var that = this. Jest to obejście błędu w ECMA. W przypadku oryginalnego kodu służy on do "umieszczenia wszystkiego w jednym obiekcie". Funkcje (właściwości, które zdarzą się być funkcjami) w self potrzebują referencji, aby wiedzieć, gdzie jest funkcja, którą chcesz wywołać. Wypróbuj tutaj http://jsfiddle.net/Z2MVt/7/

+0

Jesteś człowiekiem, Eduard, dzięki bardzo dużo. –

+0

brak prob :) Uaktualniłem odpowiedź, aby dodać szybkie wyjaśnienie tej rzeczy w oryginalnym kodzie. Zobacz go w akcji tutaj http://jsfiddle.net/Z2MVt/7/ –

+2

+1, miłe użycie wzoru [ujawniającego moduł] (http: // addyosmani.com/resources/essentialjsdesignpatterns/book/# revealingmodulepatternjavascript) –