suchen

Heim >Web-Frontend >js-Tutorial >So erstellen Sie Ihre erste AngularJS-Anwendung_AngularJS

So erstellen Sie Ihre erste AngularJS-Anwendung_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:54:441149Durchsuche

Führen Sie die folgenden Schritte aus, um eine AngularJS-Anwendung zu erstellen
Schritt 1: Rahmen laden

Als reines JavaScript-Framework kann es mit dem 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag hinzugefügt werden. 

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>

Schritt 2: Definieren Sie die AngularJS-Anwendung mithilfe der ng-app-Direktive

<div ng-app="">
...
</div>

Schritt 3: Mustername mit ng-model-Direktive definiert

<p>Enter your Name: <input type="text" ng-model="name"></p>

Schritt 4: Verwenden Sie die ng-bind-Direktive, um die Wertbindung im obigen Modell zu definieren 

<p>Hello <span ng-bind="name"></span>!</p>

Folgen Sie den folgenden Schritten, um die AngularJS-Anwendung auszuführen

Verwenden Sie die drei oben genannten Schritte in Ihrer HTML-Seite.
testAngularJS.html

<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
 <p>我的名字: <input type="text" ng-model="name"></p>
 <p>Hello, <span ng-bind="name"></span>!</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Ausgabe

Öffnen Sie textAngularJS.html in Ihrem Webbrowser. Bitte geben Sie Ihren Namen ein und sehen Sie sich die Ergebnisse an.

2015616114947849.png (611×329)

So integrieren Sie AngularJS mit HTML

  • Die ng-app-Direktive gibt den Start einer AngularJS-Anwendung an.
  • Die ng-model-Direktive erstellt eine Modellvariable mit dem Namen „name“ auf der HTML-Seite und die ng-app-Direktive wird innerhalb des div verwendet.
  • ng-bind verwendet den Modellnamen zur Anzeige im HTML-Span-Tag, wenn der Benutzer etwas in das Textfeld eingibt.
  • Das schließende 16b28748ea4df4d9c2150843fecfba68-Tag zeigt das Ende der AngularJS-Anwendung an.

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：Einführung in die HTML-DOM-Unterstützung von AngularJS_AngularJSNächster Artikel：Einführung in die HTML-DOM-Unterstützung von AngularJS_AngularJS

In Verbindung stehende Artikel

Mehr sehen