简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
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
1172 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
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
2
1809
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
10
1962
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1660
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1563
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1592
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！