Dieser Artikel führt Sie hauptsächlich in das relevante Wissen über AngularJS ein. Interessierte Freunde sollten einen Blick darauf werfen. AngularJS erweitert HTML um neue Attribute und Ausdrücke. AngularJS kann eine Single-Page-Anwendung erstellen (SPAs: Single Page Applications).
Einführung in AngularJS
AngularJS ist ein JavaScript-Framework. Es kann über das Tag <script> zu HTML-Seiten hinzugefügt werden. </p> <p>AngularJS erweitert HTML durch Anweisungen und bindet Daten durch Ausdrücke an HTML. </p> <p>AngularJS ist ein JavaScript-Framework </p> <p>AngularJS ist ein JavaScript-Framework. Es handelt sich um eine in JavaScript geschriebene Bibliothek. </p> <p>AngularJS wird als JavaScript-Datei veröffentlicht, die über das Skript-Tag zu Webseiten hinzugefügt werden kann: </p> <p><script src="http://cdn.static.runoob.com/ libs /angular.js/1.4.6/angular.min.js"></script>
Hinweis: Wir empfehlen, das Skript am Ende des
-Elements zu platzieren.Dadurch wird die Seitenladegeschwindigkeit erhöht, da das Laden von HTML nicht vom Laden von Skripten abhängt.
Verschiedene Angular.js-Versionen herunterladen: https://github.com/angular/angular.js/releases
AngularJS erweitert HTML
AngularJS erweitert durch ng-directives HTML . Die
ng-app-Direktive definiert eine AngularJS-Anwendung. Die
ng-model-Direktive bindet Elementwerte (z. B. den Wert eines Eingabefelds) an die Anwendung.
Die ng-bind-Direktive bindet Anwendungsdaten an eine HTML-Ansicht.
AngularJS-Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<p ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</p>
</body>
</html>Beispielerklärung:
Wenn die Webseite geladen wird, startet AngularJS automatisch. Die
ng-app-Direktive teilt AngularJS mit, dass das
-Element der „Eigentümer“ der AngularJS-Anwendung ist.
Die ng-model-Direktive bindet den Wert des Eingabefelds an den Namen der Anwendungsvariablen. Die
ng-bind-Direktive bindet den Namen der Anwendungsvariablen an das innerHTML eines Absatzes.
Hinweis: Wenn Sie die ng-app-Direktive entfernen, zeigt der HTML-Code den Ausdruck direkt an, ohne das Ergebnis des Ausdrucks zu berechnen.
Was ist AngularJS?
AngularJS erleichtert die Entwicklung moderner Single-Page-Anwendungen (SPAs: Single Page Applications).
AngularJS bindet Anwendungsdaten an HTML-Elemente.
AngularJS kann HTML-Elemente klonen und wiederholen.
AngularJS kann HTML-Elemente ein- und ausblenden.
AngularJS kann Code „hinter“ HTML-Elementen hinzufügen.
AngularJS unterstützt die Eingabevalidierung.
AngularJS-Direktiven
Wie Sie sehen können, sind AngularJS-Direktiven HTML-Attribute mit dem Präfix ng.
ng-init-Direktive initialisiert AngularJS-Anwendungsvariablen.
AngularJS-Beispiel
<p ng-app="" ng-init="firstName='John'"> <p>姓名为 <span ng-bind="firstName"></span></p> </p>
Hinweis HTML5 erlaubt erweiterte (selbst erstellte) Attribute, beginnend mit data-.
AngularJS-Attribute beginnen mit ng-, aber Sie können data-ng- verwenden, um die Seite für HTML5 gültig zu machen.
Mit gültigem HTML5:
AngularJS-Instanz
<p data-ng-app="" data-ng-init="firstName='John'"> <p>姓名为 <span data-ng-bind="firstName"></span></p> </p>
AngularJS-Ausdruck
AngularJS-Ausdrücke werden in doppelte geschweifte Klammern geschrieben: {{ Ausdruck }}.
AngularJS-Ausdrücke binden Daten an HTML, was der ng-bind-Direktive ähnelt.
AngularJS gibt Daten dort aus, wo der Ausdruck geschrieben ist.
AngularJS-Ausdrücke ähneln JavaScript-Ausdrücken: Sie können Literale, Operatoren und Variablen enthalten.
Instanz {{ 5 + 5 }} oder {{ firstName + " " + lastName }}
AngularJS-Instanz
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<p ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</p>
</body>
</html>AngularJS-Anwendung
AngularJS-Module definieren AngularJS-Anwendungen.
Der AngularJS-Controller (Controller) wird zur Steuerung von AngularJS-Anwendungen verwendet.
Die ng-app-Direktive definiert die Anwendung und ng-controller definiert den Controller.
AngularJS-Instanz
<p ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>AngularJS-Moduldefinitionsanwendung:
AngularJS-Modul
var app = angular.module('myApp', []);AngularJS-Controller-Steuerungsanwendung:
AngularJS-Controller
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});Verwandte Empfehlungen:
Implementierungscode für die AngularJS-Fuzzy-Abfragefunktion
AngularJS implementiert die Warenkorbauswahl und die umgekehrte Auswahlfreigabe Funktionsbeispiele
AngularJS implementiert die Erinnerungsfunktion für die Wortbeschränkung des Eingabefelds
Das obige ist der detaillierte Inhalt vonAngularJS-Tutorial und Beispielcode-Analyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
