Wie erstelle ich einen Dienst in Angular? 5 Möglichkeiten, es herauszufinden!

In diesem Artikel werden Ihnen Angular5 Möglichkeiten zum Erstellen von Diensten vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

config-Konfigurationsblock

Die Ausführung von Angular-Anwendungen ist hauptsächlich in zwei Teile unterteilt: app.config() und app.run() config ist die Phase, in der Sie einen beliebigen Anbieter für die Anwendung einrichten Um Dienste korrekt nutzen zu können, ist zu beachten, dass nur Anbieter in den Konfigurationsblock eingefügt werden können (die einzigen beiden Ausnahmen sind $provide und $injector). Und der Anbieter kann nur in der Konfiguration eingefügt werden. Von den fünf Möglichkeiten, wie Angular Dienste injiziert, können nur Dienste, die über Provider und Konstante injiziert werden, von der Konfiguration abhängen.

app.controller('MyController', function ($httpProvider) {
	//错误，无法在控制器中注入服务提供者
});
app.config(function ($http) {
	//错误，配置块中只能注入服务
});

Verwandte Empfehlungen: „AngularJS-Tutorial“

Über einige integrierte Dienste

Die Controller-Funktion kann injiziert werden, der Controller selbst kann jedoch nicht in irgendetwas injiziert werden. Es gibt jedoch einen integrierten. im AngularJS-Dienst namens $controller, der für die Einrichtung Ihres Controllers verantwortlich ist. Wenn Sie myMod.controller(…) aufrufen, greifen Sie tatsächlich auf den Anbieter dieses Dienstes zu.

Code:

myMod.controller('MainController', function($scope) {
  // ...
});

bewirkt tatsächlich Folgendes:

myMod.config(function($controllerProvider) {
  $controllerProvider.register('MainController', function($scope) {
// ...
  });
});

Ebenso gibt es Filter und Anweisungen, die einen Dienst namens $filter und seinen Anbieter $filterProvider verwenden, während die Direktive einen Dienst namens $compile und seinen Anbieter verwendet $compileProvidr.

5 Möglichkeiten, Dienste zu injizieren

factory()

Der Abhängigkeitsinjektor verwendet die Factory-Funktion, um eine Instanz des Dienstes zu erstellen, und die Factory-Funktion gibt ein Objekt zurück.

myModule.factory('myService', function () {
	var myService = {};
	//添加myService的一些属性和方法
	return myService;
});

service()

Service-Injection übergibt eine Funktion an den Dienst und verwendet dann die neue Operation von Javascript, um einen Dienst zu generieren, dh das Attribut daran anzuhängen. Seien Sie vorsichtig, wenn Sie diese Methode verwenden Bei dieser Javascript-Falle verweist dies nicht immer auf die ausführende Funktion selbst, sondern möglicherweise auch auf das Objektfenster der obersten Ebene.

myModule.service('myService', function () {
	this.foo = 'bar';
});

provider()

Tatsächlich werden die oben erwähnte Fabrik und der Dienst als syntaktischer Zucker auf dem Anbieter implementiert. Darüber hinaus kann der über den Anbieter injizierte Dienst als Anbieter verwendet werden Der Anbieter muss ein $ get-Attribut implementieren.

myMod.provider('greeting', function() {
  var text = 'Hello, ';

  this.setText = function(value) {
     text = value;
  };

  this.$get = function() {
     return function(name) {   //$get必须实现，可以返回一个函数或者一个对象
         alert(text + name);
     };
  };
});

myMod.config(function(greetingProvider) {
  greetingProvider.setText("Howdy there, ");
});

myMod.run(function(greeting) {
  greeting('Ford Prefect');
});

constant(name,value)

constant wird hauptsächlich zum Registrieren eines Werts oder eines JSON-Objekts verwendet, in das häufig verwendete Daten eingefügt werden können config.

angular.module('myApp', [])
.constant('apiKey', '123123123')
.config(function(apiKey) {
// 在这里apiKey将被赋值为123123123
// 就像上面设置的那样
})

value(name,value)

value wird hauptsächlich zum Speichern einiger Daten oder Methoden zur Verwendung verwendet. Wenn diese Daten oder Methoden geändert werden müssen, verwenden Sie value, um einen Dienst zu erstellen, bei dem der Parameterwert ein Wert ist oder JSON-Objekt. Darüber hinaus kann man sich in der Konfiguration nicht darauf verlassen.

serviceApp.value('myConfig',{
    name:'code_bunny',
    age:12,
    getId:function(){
        return 1
    }
});

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Dienst in Angular? 5 Möglichkeiten, es herauszufinden!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!