Winkelvorlage ist eine Deklarationsspezifikation, die in die Ansicht aufgenommen wird, die der Benutzer im Browser zusammen mit den Informationen des Modells und des Controllers sieht. Es handelt sich um eine statische DOM, einschließlich HTML, CSS, eckigen Spezialelementen und angular angegebenen Elementattributen. Angularelemente und Attribute geben angular an, um das Verhalten zu erweitern und Template DOM in dynamische Ansicht DOM zu konvertieren.
Hier ist die Art eines bereits Winkelelements bereits zu Attributs, das wir in der Vorlage verwenden können:
Hinweis: Zusätzlich zur Deklaration der oben genannten Elemente in der Vorlage können wir auch auf diese Elemente im JavaScript -Code zugreifen.
Das folgende Code-Snippet zeigt eine einfache Winkelvorlage, die aus Standard-HTML-Tags und Angular-Anweisungen, Brace-gebundener Ausdruck ({{{Expression}}, //www.vevb.com/article/91742.htm), bestand.
<!DOCTYPE html><!--ng-app, define the application scope, create root scop--><html ng-app><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>template</title> <meta content="IE=edge,chrome=1" http-äquiv = "x-ua-kompatible"> <style type = "text/css"> .ng-cloak {display: keine; } </style> </head> <!-ng-cloak, Klasse, die nach der Zusammenstellung des NG-Controller entfernt wird, eine Anweisung, die angibt, dass der entsprechende Controller der aktuellen Vorlage MyController ist-> <Körper ng-kontroller = "MyController"> <! -> <Eingabe type = "text" ng-model = "foo" value = ""/> <!-NG-Klick, Anweisung, was Sie nach dem Klicken tun müssen, kann Ausdruck sein, wie z. B. ButtonText = '1'; oder es kann eine Aufruffunktion sein, wie unten gezeigt. {{{ButtonText}}, verwendet, um den Wert des ButtonText anzuzeigen, der in der aktuellen Scope-Kette-> <button ng-klick = "aynefoo ()"> {{ButtonText}} </button> <script src = "../ Angular-1.1.1.JS" tection = "text/javaScript"> </javaScript "> </javaScript"> </javaScript "> </javaScript"-angezeigt wird. MyController($scope) { $scope.buttonText = "Default stuff";//Initialize model buttonText $scope.foo = "Modify me";//Initialize model foo $scope.changeFoo = function() {//Declare changeFoo this.buttonText = this.foo;//Assign the value of foo to buttonText //This used here points to the current $scope. }; } </script> </body> </html>In einer einfachen einseitigen Anwendung besteht die Vorlage aus HTML, CSS und Angular -Direktive, die alle in einer HTML -Datei enthalten sind (normalerweise index.html). In einigen komplexeren Anwendungen können wir jedoch mehrere Ansichten in einer Seite mit "Partials" verwenden, dh die Vorlagensegmente in einer separaten HTML -Datei speichern. Wir können den $ Route Service (http://code.angularjs.org/1.0.2/docs/api/ng.$route) und die NGView -Richtlinie (http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngvview) In der Hauptseite bis "this inclydo. Ein Beispiel für diese Technik ist in den siebten und achten Schritten des Angular -Tutorials (http://code.angularjs.org/1.0.2/docs/tutorial/index). (Ich werde später mit dieser Rolle spielen --_-!)
Das obige ist eine Sammlung von Informationen über AngularJS -Verständnis von Winkelvorlagen. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!