Heim >Web-Frontend >js-Tutorial >Sprechen Sie über die Unterschiede zwischen Anbietern in AngularJS

Sprechen Sie über die Unterschiede zwischen Anbietern in AngularJS

青灯夜游
青灯夜游nach vorne
2020-08-26 10:18:491969Durchsuche

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');
    });
  • 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');

  • 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');
    })

    Einfache Möglichkeit, Werte zu schaffen:
  • app.value('movieTitle', 'The Matrix');
  • 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');
});

Einfache Möglichkeit, einen Service zu erstellen:

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

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

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

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

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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen