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'];

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.

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

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.

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.

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>

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);//注意这个语句，我这个例子弄了半天，各种报错，就是因为这个语句少了

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

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!");
            };
        }]);

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!