Mehrere Möglichkeiten der Abhängigkeitsinjektion in AngularJS

Dieser Artikel bezieht sich auf AngularJsThe Authoritative Guide

Concepts

Dependency Injection ist ein Design Muster, das die Hardcodierung von Abhängigkeiten entfernt, sodass Abhängigkeiten zur Laufzeit geändert oder sogar entfernt werden können.

Aus funktionaler Sicht findet die Abhängigkeitsinjektion automatisch Abhängigkeiten im Voraus und informiert das Injektionsziel über die abhängigen Ressourcen, sodass die Ressourcen sofort injiziert werden können, wenn das Ziel sie benötigt.

AngularJS verwendet $injetor (Injektordienst), um Abhängigkeitsabfragen und Instanziierung zu verwalten.

Tatsächlich ist $injetor für die Instanziierung aller Komponenten in AngularJS verantwortlich, einschließlich Anwendungsmodulen, Direktiven und Controllern usw.

Zur Laufzeit ist $injetor dafür verantwortlich, jedes Modul beim Start zu instanziieren und alle benötigten Abhängigkeiten zu übergeben.

---

Mehrere Methoden der Abhängigkeitsinjektion

1. Inferenzinjektionsanweisung

Wenn keine explizite Anweisung vorhanden ist, geht AngularJS davon aus, dass der Parametername abhängig ist Name.

Bitte beachten Sie, dass dieser Prozess nur mit unkomprimiertem und unverschleiertem Code funktioniert, da AngularJS zum Parsen die ursprüngliche unkomprimierte Parameterliste benötigt.

Beispiel: (Deklarieren eines Moduls und eines Controllers)

angular.module('myApp', [])
.factory('greeter', function() {
    return {
        greet: function(msg) {alert(msg);}
    }
})
.controller('MyController',function($scope, greeter) {//其中function中的greeter就是依赖注入
    $scope.sayHello = function() {
    greeter.greet("Hello!");
    };
});

<p ng-app="myApp">
    <p ng-controller="MyController">
        <button ng-click="sayHello()">Hello</button>
    </p></p>

Wenn AngularJS dieses Modul instanziiert, sucht es nach einem Begrüßer und übergibt auf natürliche Weise eine Referenz dazu

2. Explizite Injektionsanweisung

AngularJS bietet eine explizite Methode zum eindeutigen Definieren einer Funktion , wenn sie als Erforderliche Abhängigkeiten bezeichnet wird.

Das Deklarieren von Abhängigkeiten auf diese Weise kann auch dann normal funktionieren, wenn der Quellcode komprimiert ist und sich die Parameternamen ändern.

var app=angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    });function MyController(renamed$scope, renamedGreeter) {
    renamed$scope.sayHello = function() {
        renamedGreeter.greet("Hello!");
    }};
MyController.$inject = ['$scope', 'greeter'];
app.controller('MyController', MyController);//注意这个语句，我这个例子弄了半天，各种报错，就是因为这个语句少了

Die Parameternamen, die wir für unsere Funktion festlegen, werden in $scope und Greeter umbenannt, und dann verwenden wir

MyController.$inject=['$scope','greeter'];

später, um die Parameter, die wir benötigen, explizit hinzuzufügen. Abhängigkeitsinjektion in die MyController-Funktion;

Also in der MyController-Funktion, umbenannt in

scope, MyController.

scope', 'greeter'];

3. Inline-Injection-Anweisung

---

Die letzte von AngularJS bereitgestellte Injektionsanweisung ist die Inline-Injection-Anweisung, die jederzeit verwendet werden kann.

ermöglicht uns die Inline-Übergabe von Parametern aus der Funktionsdefinition. Darüber hinaus wird die Verwendung temporärer Variablen während der Definition vermieden.

Diese Methode ist eigentlich ein Syntax-Zucker. Sie ist genau die gleiche wie die zuvor erwähnte Injektionsdeklaration über das Attribut $inject

Beispiel: (Mit dem obigen Beispiel ist derselbe, nur der js-Teil wurde geändert)

Der Demonstrationseffekt ist immer noch derselbe, es ist kein Bild angehängt

angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    })
    .controller('MyController',  ['$scope', 'greeter', function($scope, greeter)  {
    //这里注入的方式不一样了
    //在定义一个AngularJS的对象时，行内声明的方式允许我们直接传入一个参数数组而不是一个函数。
    //数组的元素是字符串，它们代表的是可以被注入到对象中的依赖的名字，最后一个参数就是依赖注入的目标函数对象本身。
            $scope.sayHello = function() {
                greeter.greet("Hello!");
            };
        }]);

Da es sich bei dem, was verarbeitet werden muss, um eine Liste von Zeichenfolgen handelt funktionieren Inline-Injection-Deklarationen auch in minimiertem Code einwandfrei.

Dieser Artikel bezieht sich auf den AngularJs Definitive Guide

Konzepte

Abhängigkeitsinjektion ist ein Entwurfsmuster, das die harte Codierung von Abhängigkeiten entfernt und so Änderungen oder sogar Änderungen ermöglicht Entfernen Sie Abhängigkeiten zur Laufzeit.

Aus funktionaler Sicht findet die Abhängigkeitsinjektion automatisch Abhängigkeiten im Voraus und informiert das Injektionsziel über die abhängigen Ressourcen, sodass die Ressourcen sofort injiziert werden können, wenn das Ziel sie benötigt.

AngularJS verwendet $injetor (Injektordienst), um Abhängigkeitsabfragen und Instanziierung zu verwalten.

Tatsächlich ist $injetor für die Instanziierung aller Komponenten in AngularJS verantwortlich, einschließlich Anwendungsmodulen, Anweisungen und Controllern.

Zur Laufzeit ist $injetor dafür verantwortlich, jedes Modul beim Start zu instanziieren und alle benötigten Abhängigkeiten zu übergeben.

---

Mehrere Methoden der Abhängigkeitsinjektion

1. Inferenzinjektionsanweisung

Wenn keine explizite Anweisung vorhanden ist, geht AngularJS davon aus, dass der Parametername der Name der Abhängigkeit ist.

Bitte beachten Sie, dass dieser Prozess nur mit unkomprimiertem und unverschleiertem Code funktioniert, da AngularJS zum Parsen die ursprüngliche unkomprimierte Parameterliste benötigt.

Beispiel: (Deklarieren eines Moduls und eines Controllers)

angular.module('myApp', [])
.factory('greeter', function() {
    return {
        greet: function(msg) {alert(msg);}
    }
})
.controller('MyController',function($scope, greeter) {//其中function中的greeter就是依赖注入
    $scope.sayHello = function() {
    greeter.greet("Hello!");
    };
});

<p ng-app="myApp">
    <p ng-controller="MyController">
        <button ng-click="sayHello()">Hello</button>
    </p></p>

Wenn AngularJS dieses Modul instanziiert, sucht es nach einem Begrüßer und übergibt auf natürliche Weise eine Referenz dazu

2. Explizite Injektionsdeklaration

AngularJS bietet eine explizite Methode, um die Abhängigkeiten klar zu definieren, die eine Funktion verwenden muss, wenn sie aufgerufen wird.

Das Deklarieren von Abhängigkeiten auf diese Weise kann auch dann normal funktionieren, wenn der Quellcode komprimiert ist und sich die Parameternamen ändern.

var app=angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    });function MyController(renamed$scope, renamedGreeter) {
    renamed$scope.sayHello = function() {
        renamedGreeter.greet("Hello!");
    }};
MyController.$inject = ['$scope', 'greeter'];
app.controller('MyController', MyController);//注意这个语句，我这个例子弄了半天，各种报错，就是因为这个语句少了

Die Parameternamen, die wir für unsere Funktion festlegen, werden in $scope und Greeter umbenannt. Anschließend verwenden wir

MyController.$inject=['$scope','greeter'];

, um die Parameter, die wir benötigen, explizit hinzuzufügen. Abhängigkeitsinjektion in die MyController-Funktion;

Also in der MyController-Funktion, umbenannt in

scope, MyController.

scope', 'greeter'];

3. Inline-Injection-Anweisung

---

Die letzte von AngularJS bereitgestellte Injektionsanweisung ist die Inline-Injection-Anweisung, die jederzeit verwendet werden kann.

ermöglicht uns die Inline-Übergabe von Parametern aus der Funktionsdefinition. Darüber hinaus wird die Verwendung temporärer Variablen während der Definition vermieden.

Diese Methode ist eigentlich ein syntaktischer Zucker. Sie ist genau das gleiche wie die zuvor erwähnte Injektionsdeklaration über das Attribut $inject

Beispiel: (Mit Das Gleiche wie Im obigen Beispiel wird nur der js-Teil geändert.)

Da es sich um eine Liste von Zeichenfolgen handelt, die verarbeitet werden müssen, können Inline-Injection-Anweisungen auch normal im komprimierten Code ausgeführt werden.

angular.module('myApp', [])
    .factory('greeter', function() {
        return {
            greet: function(msg) {alert(msg);}
        }
    })
    .controller('MyController',  ['$scope', 'greeter', function($scope, greeter)  {
    //这里注入的方式不一样了
    //在定义一个AngularJS的对象时，行内声明的方式允许我们直接传入一个参数数组而不是一个函数。
    //数组的元素是字符串，它们代表的是可以被注入到对象中的依赖的名字，最后一个参数就是依赖注入的目标函数对象本身。
            $scope.sayHello = function() {
                greeter.greet("Hello!");
            };
        }]);

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erläuterung des Datenbindungsprozesses von $watch, $apply und $digest

Html5 localStorage-Nutzung Detaillierte Erklärung

AJAX-domänenübergreifendes Wissen

Das obige ist der detaillierte Inhalt vonMehrere Möglichkeiten der Abhängigkeitsinjektion in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!