Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine kurze Einführung in die grundlegenden Studiennotizen von AngularJS_AngularJS

WBOY
Freigeben: 2016-05-16 15:59:58
Original
1209 Leute haben es durchsucht

AngularJS ist ein JavaScript-Framework. Es kann über das Tag <script> zu HTML-Seiten hinzugefügt werden. </p> <p>AngularJS erweitert HTML-Attribute durch Anweisungen und bindet dann Daten durch Ausdrücke an HTML-Elemente. </p> <p><strong>AngularJS ist ein JavaScript-Framework<br> </strong></p> <p> AngularJS ist ein JavaScript-Framework, eine in der JavaScript-Sprache geschriebene Klassenbibliothek. </p> <p> AngularJS wird als JavaScript-Datei veröffentlicht, die wir über das Skript-Tag <br> zur Webseite hinzufügen können </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="84745" class="copybut" id="copybut84745" onclick="doCopy('code84745')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code84745"><script src="http://cdn.bootcss.com /angular.js/1.3.14/angular.min.js"></script>


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>

Nach dem Login kopieren

Beispielbeschreibung:

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

Die ng-app-Direktive teilt AngularJS mit, dass das

-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

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>

Nach dem Login kopieren

Äquivalenter Code:

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

AngularJS-Moduldefinitionsanwendungen:

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

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

Nach dem Login kopieren

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.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage