Service angulaire Définition: service ou usine

Question

Je suis un débutant angulaire, je construis une application, une chose vraiment énigmatique est qu'il y a deux façons de définir un service, et je lis plus à partir de ce lien: How to define service alors il Il semble qu'il n'y ait pas de grande différence entre les façons de définir un service.

mais je viens de remarquer une différence que je pense est différent:

voir ce service, je reçois d'ici 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; 
    }; 
}); 

si je définis ce service en utilisant « usine » comme ci-dessous, une fonction ne peut pas appeler d'autres fonctions du 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; 
    }, 
}; 
}); 

Je vais obtenir ceci dans la console du navigateur:

[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 

Quelqu'un peut-il expliquer cela? Merci.

Answer 1

vous avez deux gros problèmes là-bas:

• l'usine retourne un objet avec une syntaxe incorrecte.
• portée des variables javascript est fonctionnel

C'est, Vous devriez retournerez un objet comme {key: value, key: value}

Les valeurs peuvent être des fonctions. Cependant, vous revenez {key = value, key = value}

Première solution:

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

Deuxièmement, ne pas être en mesure d'appeler des fonctions est normal. Voir ceci jsfiddle. Je me suis moqué de tout. Vous pouvez appeler l'une des fonctions renvoyées par le service. Cependant, lorsque de getSomething essayez d'appeler getData, vous obtenez « undefined »:

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

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

Ce serait la même chose que déclarer tout dans le cadre de la fonction de l'usine et le retour des références see in jsfiddle:

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

et maintenant vous pouvez appeler des fonctions locales comme indiqué dans le final version of the jsfiddle:

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

le service d'origine a quelque chose d'important dans ce: var self = this;. Certaines personnes utilisent var that = this. C'est une solution de contournement pour une erreur dans ECMA. Dans le cas du code original, il est utilisé pour "mettre tout dans un objet". Les fonctions (propriétés qui sont des fonctions) dans self ont besoin d'une référence pour savoir où se trouve la fonction que vous voulez appeler. Essayez-le ici http://jsfiddle.net/Z2MVt/7/