AngularJS Dependency Injection - verwirrende Syntax

Ich habe den folgenden Code:AngularJS Dependency Injection - verwirrende Syntax

<!doctype html> 
<html> 
<body> 
    <div ng-controller="MyController"> 
    Hello {{greetMe}}! 
    </div> 
    <script src="http://code.angularjs.org/snapshot/angular.js"></script> 

    <script> 
    angular.module('myApp', []) 
     .controller('MyController', ['$scope', function ($scope) { 
     $scope.greetMe = 'World'; 
     }]); 

    angular.element(function() { 
     angular.bootstrap(document, ['myApp']); 
    }); 
    </script> 
</body> 
</html>

von der Website: https://docs.angularjs.org/guide/bootstrap

Ich kann wirklich nicht verstehen, wie die Syntax funktioniert, insbesondere

angular.module('myApp', []) 
      .controller('MyController', ['$scope', function ($scope) { 
      $scope.greetMe = 'World'; 
      }]);

Was bedeutet die obige hässliche Syntax? Welche Rolle spielt MyController? Was bedeutet der Array-Parameter? Was bedeutet $ scope? Wer ruft die "Funktion ($ scope)" auf?

Wie funktioniert es? angular.bootstrap (Dokument, ['myApp']);

Wann wird der obige Parameter ['myApp'] injiziert und wie?

Die Website erklärt nichts zur Syntax. Ich nehme an, der Leser weiß alles darüber.

Bitte helfen.

Quelle

2016-12-26 user1539343

Ich glaube, Sie haben könnte begonnen „aus der Mitte des Book_ _reading“. Die Seite, die Sie verlinken, ist eine Anleitung zum manuellen Bootstrapping. Das ist ein fortgeschrittenes Thema für jemanden, der bereits mit Angular vertraut ist. Ich schlage vor, dass Sie anfangen, von einem tatsächlichen Tutorial zu lernen, das Sie schrittweise durch die Bedeutung und Syntax führt. –

Angulars Dependency Injection "stringt" die Funktion und extrahiert dann die Parameternamen aus der Zeichenfolge und verwendet diese, um den abhängigen Dienst zu finden.

Allerdings, wenn Sie Ihren Code minimieren, diese Parameter wegen "g", "e" usw. Da Angular jetzt nicht wissen kann, welchen Dienst Sie eigentlich wollten, bieten sie zwei verschiedene Methoden zur expliziten Beschreibung Ihrer Abhängigkeiten.

Die erste besteht darin, Ihre Funktion/Klasse als letzten Parameter in einem Array bereitzustellen, wobei die Elemente im Array vor den ursprünglichen Namen der Parameter stehen.

Die Alternative besteht darin, die ursprüngliche Funktion/Klasse zu übergeben, aber der Funktion selbst eine "statische" $ inject-Eigenschaft zuzuweisen. Die Eigenschaft erhält den Wert eines Arrays aus Strings, die Ihre ursprünglichen Parameternamen darstellen.

Und schließlich ist der erste Parameter, der an angular.controller/service/factory/etc geliefert wird, der Name, den Sie auf den Service anwenden werden, den Sie registrieren. Es ist diese Zeichenfolge, die andere Dienste verwenden, um ihre Abhängigkeit von Ihrem Controller/Service zu deklarieren.

"myApp" ist in Ihrem Beispiel ein Modul. Module werden nicht als Abhängigkeiten injiziert, sondern sind eine Möglichkeit, eine Gruppe von Services (Controller, Direktiven) zusammenzufassen. Sie können einen Dienst nicht von einem anderen Modul aus einspeisen, ohne zuerst eine Abhängigkeit zu diesem Modul zu deklarieren, indem Sie den Namen des Moduls zum Array hinzufügen, das als zweiter Parameter an angular.module übergeben wurde. angular.bootstrap erlaubt einem Modul (und dessen Abhängigen), mit einem Dom-Knoten zu arbeiten.

Quelle

2016-12-26 03:42:54

Mai unter Erklärung dafür sein, geben Sie klares Verständnis

angular.module ('myApp', [])

Diese Linie erzeugt Variable für Modul (in diesem Fall myApp), die wir in der Verwendung von HTML wird Seite die Anwendung von dem Element auf Bootstrap

Entweder durch manul bootstrapping unter Verwendung der unten angegebenen Codezeile

eckig.Bootstrap (Dokument, ['myApp']);

oder von irgendeinem Element Zugabe wo wir

$ Umfang ist das Anwendungsobjekt und verfügbaren sowohl für Sicht und Controller Winkel verwenden möchten, die

Modelldaten enthält

ng -controller directive wird ermöglichen, den angegebenen Controller zu verwenden (in diesem Fall ng-controller = "MyController")

Ein Modul kann mehrere Controller haben, und jedem Controller werden eigene $ scope -Objekt- und Konstruktorfunktionsmodelleigenschaften zugeordnet, und Funktionen werden innerhalb dieses zugeordneten Bereichs definiert.

Angular Dependency Injection Funktion wird dazu beitragen, die separat erstellten Komponenten zu verbrauchen und dadurch diese Komponenten wiederverwendbar, wartbar und testbar zu machen.

Unten Artikel auf Dependency Injection wird dies hilfreich http://anandmanisankar.com/posts/angularjs-dependency-injection-demystified/

Hoffnung mehr Einblick für Sie

Quelle

2016-12-26 04:14:39

AngularJS Dependency Injection - verwirrende Syntax

Antwort

Verwandte Themen