AngularJS -Abhängigkeitsinjektion
Was ist Abhängigkeitsinjektion
Die Erklärung des Wiki lautet: Abhängigkeitsinjektion (DI) ist ein Software -Design -Muster, in dem eine oder mehrere Abhängigkeiten (oder Dienste) in ein separates Objekt (oder Client) injiziert (oder übergeben werden) und dann Teil des Kundenstaates werden.
Dieses Muster trennt die Erstellung von Kundenabhängigkeitsverhalten, wodurch die Programmierung locker gekoppelt ist und den Prinzipien der Abhängigkeitsumkehr und der einzelnen Verantwortung folgt. Im direkten Gegensatz zum Service -Locator -Muster kann der Client verstehen, wie der Client das System verwendet, um Abhängigkeiten zu finden
Mit einem Wort-wenn Sie nichts zu tun haben, kommen Sie nicht zu mir, ich werde zu Ihnen gehen, wenn Sie etwas zu tun haben.
AngularJS bietet einen guten Abhängigkeitsinjektionsmechanismus. Die folgenden 5 Kernkomponenten werden als Abhängigkeitsinjektion verwendet:
Wert
Fabrik
Service
Anbieter
Konstante
Wert
Wert ist ein einfaches JavaScript -Objekt, das Werte an den Controller übergibt (Konfigurationsphase):
var mainApp = angular.module("mainApp", []);// Create the value object "defaultInput" and pass the data mainApp.value("defaultInput", 5);...// Inject "defaultInput" into the controller mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $ scope.result = calcService.square ($ scope.number);Fabrik
Fabrik ist eine Funktion, die einen Wert zurückgibt. Erstellt, wenn Service und Controller erforderlich sind.
Normalerweise verwenden wir Fabrikfunktionen, um Werte zu berechnen oder zurückzugeben.
// Definieren Sie ein Modul var mainApp = angular.module ("mainApp", []); // Factory "MathService" erstellen, um das Produkt von zwei Zahlenmainapp.factory ('mathService', function () {var factory = {{}; factory.multiply = function (a, b) {b {b {b {b {b {b {b {b {b {b {b {b}) zu multiplizieren, multiplizieren. // Fabrik "mathService" in service mainApp.service ('calcService', function (mathService) {this.square = function (a) {return MathService.multiply (a, a);}});Anbieter
In AngularJS werden ein Dienst, eine Fabrik usw. über den Anbieter (Konfigurationsstufe) erstellt.
Eine Fabrikmethode get () wird im Anbieter bereitgestellt, mit dem Wert/Dienst/Fabrik zurücksend werden.
// Definieren Sie ein Modul var mainApp = angular.module ("mainApp", []); ... // Service mit Anbieter erstellen. Definieren Sie eine Methode, um das Produkt zweier Zahlen zu berechnen, Mainapp.config ($ ($ bereitgestellt) {$ cgeben. B;Konstante
Konstante (konstant) wird verwendet, um numerische Werte während der Konfigurationsphase zu übergeben. Beachten Sie, dass diese Konstante während der Konfigurationsphase nicht verfügbar ist.
mainApp.constant ("configParam", "konstanter Wert");
Beispiel
Die folgenden Beispiele liefern eine Demonstration mehrerer Mechanismen der obigen Abhängigkeitsinjektionsmechanismen.
<html> <head> <meta charset = "utf-8"> <title> AngularJS-Abhängigkeitsinjektion </title> </head> <body> <h2> AngularJS Einfache Anwendung </H2> <div ng-App = "mainapp" ng-controller = "calccontroller"> <p> applapper eine number: ng-click = "square()">X<sup>2</sup></button> <p>Result: {{result}}</p> </div> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> var mainApp = angular.module("mainApp", []); mainApp.config (Funktion ($ bereitgestellt) {$ ciplipt.provider ('mathService', function () {this. $ get = function () {var factory = {}; factory.multiply = function (a, b) {return a * b;} return factory;};};}); }); mainApp.Value ("defaultInput", 5); mainApp.factory ('mathService', function () {var factory = {}; factory.multiply = function (a, b) {return a * b;} return factory;}); mainApp.service ('calcService', function (mathService) {this.square = function (a) {return MathService.multiply (a, a);}}); mainapp.controller ('Calccontroller', Funktion ($ scope, calcService, defaultInput) {$ scope.number = defaultInput; $ scope.result = calcService.square ($ scope.number); </script> </body> </html>Auslaufergebnisse:
Das obige ist die Sortierung von Daten zur Injektion von AngularJS -Abhängigkeiten. Wir werden es später weiter hinzufügen. Ich hoffe, dass es Freunden helfen kann, die AngularJs entwickeln.