Eine kurze Einführung in die grundlegenden Studiennotizen von AngularJS_AngularJS

WBOY

Freigeben： 2016-05-16 15:59:58

Original

1188 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：

angularjs

Quelle：php.cn

Vorheriger Artikel：So imitieren Sie den Slide-Out-Effekt von Tencent Weibo mithilfe von jQuery, um das tägliche Wetter zu melden Nächster Artikel：So ersetzen Sie den Bannerbildpfad dynamisch durch JS tab_javascript-Kenntnisse

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

Neueste Artikel des Autors