Nachdem ich viele Artikel und Beispielcodes gelesen hatte, war mir nicht klar, worin der Unterschied zwischen den verschiedenen Anbietern wie Provider, Factory und Service besteht. Ohne dieses Wissen konnten Sie nicht den richtigen Anbieter auswählen. Ich werde Ihnen die Unterschiede zwischen den Providern anhand von Beispielen erklären.
Was ist ein Anbieter?
Wenn Sie sich die AngularJS-Dokumente ansehen, finden Sie die nächste Definition eines Providers:
Ein Anbieter ist ein Objekt mit einer $get()-Methode. Der Injektor ruft die $get-Methode auf, um eine neue Instanz eines Dienstes zu erstellen. Der Provider kann über zusätzliche Methoden verfügen, die eine Konfiguration des Providers ermöglichen.
AngularJS verwendet $provide, um neue Anbieter zu registrieren. Die Provider erstellen im Grunde neue Instanzen, aber nur einmal für jeden Provider. $provide verfügt über sechs Methoden zur Erstellung von benutzerdefinierten Providern, die ich Ihnen anhand von Beispielcode erläutern werde. Diese Provider sind über $provide verfügbar:
Konstante
Eine Konstante kann überall injiziert werden. Eine Konstante kann nicht von einem Dekorator abgefangen werden, d.h. der Wert einer Konstante kann niemals geändert werden.
[code language="javascript"] var app = angular.module('app', []); app.config(function ($provide) { $provide.constant('movieTitle', 'The Matrix'); }); app.controller('ctrl', function (movieTitle) { expect(movieTitle).toEqual('The Matrix'); }); [/code]
AngularJS bietet eine praktische Methode zur Erstellung einer Konstante. Sie können die Zeilen 3-5 in umschreiben:
[code language="javascript"] app.constant('movieTitle', 'The Matrix'); [/code]
Wert
Ein Wert ist nichts anderes als ein einfacher injizierbarer Wert. Der Wert kann ein String, eine Zahl oder auch eine Funktion sein. Ein Wert unterscheidet sich von einer Konstante dadurch, dass ein Wert nicht in Konfigurationen injiziert werden kann, aber er kann von Dekoratoren abgefangen werden.
[code language="javascript"] var app = angular.module('app', []); app.config(function ($provide) { $provide.value('movieTitle', 'The Matrix') }); app.controller('ctrl', function (movieTitle) { expect(movieTitle).toEqual('The Matrix'); }) [/code]
AngularJS bietet eine praktische Methode zur Erstellung eines Wertes. Sie können die Zeilen 3-5 in umschreiben:
[code language="javascript"] app.value('movieTitle', 'The Matrix'); [/code]
Service
Ein Dienst ist ein injizierbarer Konstruktor. Wenn Sie möchten, können Sie die Abhängigkeiten, die Sie benötigen, in der Funktion angeben. Ein Dienst ist ein Singleton und wird nur einmal von AngularJS erstellt. Dienste eignen sich hervorragend für die Kommunikation zwischen Controllern, z.B. für die gemeinsame Nutzung von Daten.
[code language="javascript"] var app = angular.module('app' ,[]); app.config(function ($provide) { $provide.service('movie', function () { this.title = 'The Matrix'; }); }); app.controller('ctrl', function (movie) { expect(movie.title).toEqual('The Matrix'); }); [/code]
AngularJS bietet eine praktische Methode zur Erstellung eines Dienstes. Sie können die Zeilen 3-7 umschreiben in:
[code language="javascript"] app.service('movie', function () { this.title = 'The Matrix'; }); [/code]
Fabrik
Eine Fabrik ist eine injizierbare Funktion. Eine Factory ist einem Service insofern sehr ähnlich, als sie ein Singleton ist und Abhängigkeiten in der Funktion angegeben werden können. Der Unterschied zwischen einer Factory und einem Service besteht darin, dass eine Factory eine einfache Funktion injiziert, so dass AngularJS die Funktion aufruft, während ein Service einen Konstruktor injiziert. Ein Konstruktor erzeugt ein neues Objekt, so dass
[code language="javascript"] var app = angular.module('app', []); app.config(function ($provide) { $provide.factory('movie', function () { return { title: 'The Matrix'; } }); }); app.controller('ctrl', function (movie) { expect(movie.title).toEqual('The Matrix'); }); [/code]
AngularJS bietet auch eine Komfortmethode für die Zeilen 3-9. Sie können sie umschreiben in:
[code language="javascript"] app.factory('movie', function () { return { title: 'The Matrix'; } }); [/code]
Dekorateur
Ein Dekorator kann andere Anbieter verändern oder kapseln. Es gibt eine Ausnahme, und zwar kann eine Konstante nicht dekoriert werden. [code language="javascript"] var app = angular.module('app', []); app.value('movieTitle', 'The Matrix'); app.config(function ($provide) { $provide.decorator('movieTitle', function ($delegate) { return $delegate + ' - starring Keanu Reeves'; }); }); app.controller('myController', function (movieTitle) { expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves'); }); [/code]
Anbieter
Ein Provider ist die anspruchsvollste Methode aller Provider. Er ermöglicht Ihnen eine komplexe Erstellungsfunktion und Konfigurationsoptionen. Ein Provider ist eigentlich eine konfigurierbare Fabrik. Der Provider nimmt ein Objekt oder einen Konstruktor entgegen.
[code language="javascript"] var app = angular.module('app', []); app.provider('movie', function () { var version; zurück { setVersion: function (Wert) { Version = Wert; }, $get: function () { zurück { Titel: 'Die Matrix' + ' ' + Version } } } }); app.config(function (movieProvider) { movieProvider.setVersion('Reloaded'); }); app.controller('ctrl', function (film) { expect(movie.title).toEqual('The Matrix Reloaded'); }); [/code]
Zusammenfassung
- Alle Anbieter werden nur einmal instanziiert. Das bedeutet, dass sie alle Singletons sind.
- Alle Anbieter außer Konstant können dekoriert werden.
- Eine Konstante ist ein Wert, der überall eingespeist werden kann. Der Wert einer Konstante kann niemals geändert werden.
- Ein Wert ist nur ein einfacher injizierbarer Wert.
- Ein Dienst ist ein injizierbarer Konstruktor.
- Eine Fabrik ist eine injizierbare Funktion.
- Ein Dekorator kann andere Anbieter außer einer Konstanten ändern oder kapseln.
- Ein Anbieter ist eine konfigurierbare Fabrik.
Verfasst von
Arjan Wulder
Unsere Ideen
Weitere Blogs
Contact