Heim >Web-Frontend >js-Tutorial >Eine kurze Einführung in das grundlegende AngularJS-Tutorial_AngularJS

Eine kurze Einführung in das grundlegende AngularJS-Tutorial_AngularJS

WBOYOriginal: 2016-05-16 15:37:521249Durchsuche

AngularJS ist ein JavaScript-Framework. Es kann über das Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a zu HTML-Seiten hinzugefügt werden.

AngularJS erweitert HTML-Attribute durch Anweisungen und bindet dann Daten durch Ausdrücke an HTML-Elemente.

AngularJS ist ein JavaScript-Framework
AngularJS ist ein JavaScript-Framework, eine in der JavaScript-Sprache geschriebene Klassenbibliothek.

AngularJS wird als JavaScript-Datei veröffentlicht, die wir über das Skript-Tag

zur Webseite hinzufügen können

de85def78bf4e5e73c3b76e0cbf117a2e41766e13484456de30e3c90d0e39b57df15d2bd3a0797a114d79c25e114807b

AngularJS erweitert HTML

AngularJS erweitert HTML durch eine Reihe von NG-Anweisungen.

Die ng-app-Direktive definiert die AngularJS-Anwendung.

Die ng-model-Direktive bindet den Wert des HTML-Steuerelements an das Datenmodell.

Die ng-bind-Direktive bindet Modelldaten an die HTML-Ansicht.

<script src="http://cdn.bootcss.com/angular.js/1.3.14/angular.js"></script>
<body>
<div ng-app="">
   <p>Name: <input type="text" ng-model="name"></p>
   <p ng-bind="name"></p>
</div>
</body>

Beispielbeschreibung:

AngularJS startet automatisch die Ausführung, wenn die Seite geladen wird.

Die ng-app-Direktive teilt AngularJS mit, dass das dc6dce4a544fdca2df29d5ac0ea9906b-Element, in dem es sich befindet, das Stammelement der AngularJS-Anwendung ist.

Die ng-model-Direktive bindet den Wert des Eingabe-Tags an den Variablennamen.

Die ng-bind-Direktive bindet den Wert des Variablennamens an das innerHTML-Attribut des e388a4556c0f65e1904146cc1a846bee

AngularJS-Befehle

Wie Sie sehen können, handelt es sich bei AngularJS-Anweisungen um eine Reihe von HTML-Attributen, die mit ng beginnen.

AngularJS-Anwendungsvariablen können über die ng-init-Direktive initialisiert werden.

<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>

Äquivalenter Code:

<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>

Hinweis: Sie können das Präfix data-ng- anstelle von ng- verwenden, um sicherzustellen, dass der HTML-Code auf der Seite gültig ist.
Weitere AngularJS-Direktiven erfahren Sie in späteren Kapiteln.

AngularJS-Ausdruck

AngularJS-Ausdrücke werden in doppelten Klammern geschrieben: {{ Ausdrucksanweisung }}.

AngularJS gibt den Ausdruck genau als berechnetes Ergebnis aus, zum Beispiel:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
   <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

AngularJS-Ausdrücke binden Daten auf die gleiche Weise wie die ng-bind-Direktive an HTML.

<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<body>

<div ng-app="">
 <p>Name: <input type="text" ng-model="name"></p>
 <p>{{name}}</p>
</div>

</body>
</html>

In den folgenden Kapiteln erfahren Sie mehr über AngularJS-Ausdrücke.

AngularJS-Anwendung

Das AngularJS-Modul definiert AngularJS-Anwendungen.

AngularJS-Controller steuern das Verhalten von AngularJS-Anwendungen.

Die ng-app-Direktive wird verwendet, um die Anwendung anzugeben, und die ng-controller-Direktive wird verwendet, um den Controller anzugeben.

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});
</script>

AngularJS-Moduldefinitionsanwendungen:

var app = angular.module('myApp', []);
　　AngularJS控制器控制AngularJS Applications的行为：

app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});

In den folgenden Kapiteln erfahren Sie mehr über Module und Controller.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Sammlung von nachgeahmten Tokyo-Mall-Menüs, nachgeahmten Win-Rechtsklick-Menüs und nachgeahmten Taobao-TAB-Spezialeffekten, implementiert durch JS_Javascript-FähigkeitenNächster Artikel：Sammlung von nachgeahmten Tokyo-Mall-Menüs, nachgeahmten Win-Rechtsklick-Menüs und nachgeahmten Taobao-TAB-Spezialeffekten, implementiert durch JS_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen