Ποιες είναι οι διαφορές μεταξύ των Service
, Provider
και Factory
στο AngularJS;
Από τη λίστα αλληλογραφίας AngularJS πήρα ένα καταπληκτικό νήμα που εξηγεί το service vs factory vs provider και τη χρήση της έγχυσης τους. Συγκεντρώνοντας τις απαντήσεις:
Συντακτικό: 'serviceName', function );<br/>, Αποτέλεσμα: Όταν δηλώνετε το serviceName ως ενέσιμο όρισμα **θα σας δοθεί μια περίπτωση της συνάρτησης. Με άλλα λόγια**
new FunctionYouPassedToService()`.
Σύνταξη: module.factory( 'factoryName', function );
<br/>,
Αποτέλεσμα: Όταν δηλώνετε το factoryName ως ενέσιμο όρισμα, θα σας δοθεί η τιμή που επιστρέφεται με την κλήση της αναφοράς της συνάρτησης που παραδίδεται στο module.factory.
Σύνταξη: module.provider( 'providerName', function );
<br/>,
Αποτέλεσμα: Όταν δηλώνετε το providerName ως ενέσιμο όρισμα θα σας δοθεί (new ProviderFunction()).$get()
. Η συνάρτηση του κατασκευαστή ενσαρκώνεται πριν από την κλήση της μεθόδου $get - ProviderFunction
είναι η αναφορά της συνάρτησης που περνάει στο module.provider.
Οι πάροχοι έχουν το πλεονέκτημα ότι μπορούν να διαμορφωθούν κατά τη φάση διαμόρφωσης του module.
Δείτε εδώ για τον παρεχόμενο κώδικα.
Εδώ'είναι μια μεγάλη περαιτέρω εξήγηση από τον Misko:
provide.value('a', 123);
function Controller(a) {
expect(a).toEqual(123);
}
Σε αυτή την περίπτωση ο εγχυτήρας απλά επιστρέφει την τιμή ως έχει. Τι γίνεται όμως αν θέλετε να υπολογίσετε την τιμή; Τότε χρησιμοποιήστε ένα εργοστάσιο
provide.factory('b', function(a) {
return a*2;
});
function Controller(b) {
expect(b).toEqual(246);
}
Έτσι, το factory
είναι μια συνάρτηση η οποία είναι υπεύθυνη για τη δημιουργία της τιμής. Παρατηρήστε ότι η συνάρτηση factory μπορεί να ζητήσει άλλες εξαρτήσεις.
Αλλά τι γίνεται αν θέλετε να είστε πιο OO και να έχετε μια κλάση που ονομάζεται Greeter;
function Greeter(a) {
this.greet = function() {
return 'Hello ' + a;
}
}
Τότε για να την ενσαρκώσετε θα πρέπει να γράψετε
provide.factory('greeter', function(a) {
return new Greeter(a);
});
Τότε θα μπορούσαμε να ζητήσουμε το 'greeter' στον ελεγκτή ως εξής
function Controller(greeter) {
expect(greeter instanceof Greeter).toBe(true);
expect(greeter.greet()).toEqual('Hello 123');
}
Αλλά αυτό είναι πολύ βαρύγδουπο. Ένας συντομότερος τρόπος για να το γράψουμε αυτό θα ήταν provider.service('greeter', Greeter);
Τι γίνεται όμως αν θέλουμε να ρυθμίσουμε την κλάση Greeter
πριν την έγχυση; Τότε θα μπορούσαμε να γράψουμε
provide.provider('greeter2', function() {
var salutation = 'Hello';
this.setSalutation = function(s) {
salutation = s;
}
function Greeter(a) {
this.greet = function() {
return salutation + ' ' + a;
}
}
this.$get = function(a) {
return new Greeter(a);
};
});
Τότε μπορούμε να κάνουμε αυτό:
angular.module('abc', []).config(function(greeter2Provider) {
greeter2Provider.setSalutation('Halo');
});
function Controller(greeter2) {
expect(greeter2.greet()).toEqual('Halo 123');
}
Ως δευτερεύουσα σημείωση, τα service
, factory
και value
προέρχονται όλα από το provider.
provider.service = function(name, Class) {
provider.provide(name, function() {
this.$get = function($injector) {
return $injector.instantiate(Class);
};
});
}
provider.factory = function(name, factory) {
provider.provide(name, function() {
this.$get = function($injector) {
return $injector.invoke(factory);
};
});
}
provider.value = function(name, value) {
provider.factory(name, function() {
return value;
});
};
factory
/ service
/ provider
: