Heim > Artikel > Web-Frontend > Eine kurze Einführung in die grundlegenden Studiennotizen von AngularJS_AngularJS

Eine kurze Einführung in die grundlegenden Studiennotizen von AngularJS_AngularJS

WBOYOriginal: 2016-05-16 15:59:581210Durchsuche

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

Code kopieren Der Code lautet wie folgt:

ff5cd64f1a10e2fb41bdb3fa4f0523c42cacc6d41bbb37262a98f745aa00fbf0

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-Direktiven 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="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

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：So imitieren Sie den Slide-Out-Effekt von Tencent Weibo mithilfe von jQuery, um das tägliche Wetter zu meldenNächster Artikel：So imitieren Sie den Slide-Out-Effekt von Tencent Weibo mithilfe von jQuery, um das tägliche Wetter zu melden

In Verbindung stehende Artikel

Mehr sehen