Heim > Web-Frontend > js-Tutorial > Hauptteil

Sprechen Sie über die Unterschiede zwischen Anbietern in AngularJS

青灯夜游
Freigeben: 2021-02-22 17:56:41
nach vorne
1937 Leute haben es durchsucht

Sprechen Sie über die Unterschiede zwischen Anbietern in AngularJS

Verwandte Tutorial-Empfehlungen: „angular Tutorial

Was ist Provider?

angularjsDokumentdefinition von Provider:

Provider ist ein Objekt mit einer $get()-Methode. Der Injektor ruft die Methode $get auf, um eine neue Dienstinstanz zu erstellen. Der Anbieter verfügt auch über einige andere Methoden, mit denen der Anbieter konfiguriert werden kann.

AngularJS verwendet $provide, um neue Anbieter zu registrieren. Anbieter erstellen grundsätzlich eine neue Instanz, aber jeder Anbieter wird nur einmal erstellt. $provideBietet 6 Methoden zum Erstellen benutzerdefinierter Anbieter. Ich werde sie jeweils anhand einfacher Codebeispiele erläutern. Die 6 Methoden lauten wie folgt: Anbieter

  • Konstant

  • Konstant kann überall eingespritzt werden. Die Konstante kann vom Dekorateur nicht abgefangen werden, was bedeutet, dass der Wert der Konstante niemals geändert werden kann.

    var app = angular.module('app', []); 
    app.config(function ($provide) {
      $provide.constant('movieTitle', 'The Matrix');
    }); 
    
    app.controller('ctrl', function (movieTitle) {
      expect(movieTitle).toEqual('The Matrix');
    });
    Nach dem Login kopieren
  • AngularJS bietet eine einfachere Möglichkeit, Konstanten zu erstellen. Sie können die oben genannten 3 bis 5 Codezeilen wie folgt umschreiben:
  • app.constant('movieTitle', 'The Matrix');
    Nach dem Login kopieren

  • Wert
  • Wert ist ein einfacher Wert, der eingefügt werden kann. Es kann sich um eine Zeichenfolge handeln. Zahl oder Funktion.
  • Der Unterschied zur Konstante besteht darin, dass der Wert nicht in Konfigurationen eingefügt werden kann, sondern dass der Wert von Dekoratoren abgefangen werden kann.

    var app = angular.module('app', []); 
    app.config(function ($provide) {
     $provide.value('movieTitle', 'The Matrix')
    });
    
    app.controller('ctrl', function (movieTitle) {
     expect(movieTitle).toEqual('The Matrix');
    })
    Nach dem Login kopieren

    Einfache Möglichkeit, Werte zu schaffen:
  • app.value('movieTitle', 'The Matrix');
    Nach dem Login kopieren
  • Service

service ist ein Konstruktor, der injiziert werden kann. Wenn Sie möchten, können Sie in der Funktion die erforderlichen Abhängigkeiten angeben. Service ist ein Singleton und wird nur einmal erstellt. Dienste sind eine gute Möglichkeit, Daten zwischen Controllern zu übertragen, beispielsweise durch den Austausch von Daten.

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');
});
Nach dem Login kopieren

Einfache Möglichkeit, einen Service zu erstellen:

app.service('movie', function () {
 this.title = 'The Matrix';
});
Nach dem Login kopieren

Factory

factory ist eine injizierbare Funktion.

Gleich wie Service: Factory ist ebenfalls ein Singleton, und in dieser Funktion können auch Abhängigkeiten angegeben werden.


Der Unterschied ist: Factory fügt eine normale Funktion ein, AngularJs ruft diese Funktion auf, während Service einen Konstruktor einfügt.

service ist ein Konstruktor, der new aufruft, um ein neues Objekt zu erstellen. Mit einer Factory können Sie dafür sorgen, dass die Funktion alles zurückgibt, was Sie möchten.

Sie werden sehen, dass Factory ein Anbieter mit nur der $get-Methode ist.

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');
});
Nach dem Login kopieren
Eine einfache Möglichkeit, eine Fabrik zu erstellen:
app.factory('movie', function () {
 return {
   title: 'The Matrix';
 }
});
Nach dem Login kopieren

Decorator

Decorator kann andere Anbieter modifizieren oder kapseln, aber Konstanten können nicht dekoriert werden.

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');
});
Nach dem Login kopieren

Provider

Provider ist der komplexeste aller Anbieter und kann über komplexe Erstellungsfunktionen und Konfigurationsmöglichkeiten verfügen.

Provider ist eigentlich eine konfigurierbare Fabrik. Der Anbieter akzeptiert ein Objekt oder einen Konstruktor.

var app = angular.module('app', []); 
app.provider('movie', function () {
 var version;
 return {
   setVersion: function (value) {
     version = value;
   },
   $get: function () {
     return {
       title: 'The Matrix' + ' ' + version
     }
   }
 }
});

app.config(function (movieProvider) {
 movieProvider.setVersion('Reloaded');
});

app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix Reloaded');
});
Nach dem Login kopieren

Zusammenfassung


Alle Anbieter werden nur einmal instanziiert, es sind also alle Singletons.

Außer konstant können auch andere Anbieter dekoriert werden. Konstante ist ein Wert, der überall eingefügt werden kann und dessen Wert nicht geändert werden kann. Wert ist ein einfacher injizierbarer Wert.

service ist ein injizierbarer Konstruktor.

factory ist eine injizierbare Funktion. Decorator kann andere Anbieter außer Konstanten ändern oder kapseln. Provider ist eine konfigurierbare Fabrik.

Englische Originaladresse: https://xebia.com/blog/differences-between-providers-in-angularjs/

Verwandte Empfehlungen: Programmierunterricht

Das obige ist der detaillierte Inhalt vonSprechen Sie über die Unterschiede zwischen Anbietern in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage