AngularJS - Erste Anwendung

Vor dem Erstellen der eigentlichen Hello World! Anwendung mit AngularJS, lassen Sie uns die Teile einer AngularJS-Anwendung sehen. Eine AngularJS-Anwendung besteht aus folgenden drei wichtigen Teilen:

ng-app - Diese Direktive definiert und verknüpft eine AngularJS-Anwendung mit HTML.
ng-model - Diese Anweisung bindet die Werte von AngularJS-Anwendungsdaten an HTML-Eingabesteuerelemente.
ng-bind - Diese Anweisung bindet die AngularJS-Anwendungsdaten an HTML-Tags.

AngularJS-Anwendung erstellen

Schritt 1: Framework laden

Als reines JavaScript-Framework kann es mit dem <Script> -Tag hinzugefügt werden.

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

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

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

Schritt 3: Definieren Sie einen Modellnamen mit der Anweisung ng-model

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

Schritt 4: Binden Sie den Wert des obigen Modells, der mit der Anweisung ng-bind definiert wurde

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

AngularJS-Anwendung ausführen

Verwenden Sie die oben genannten drei Schritte in einer HTML-Seite.

testAngularJS.htm

<html>
   <head>
      <title>AngularJS First Application</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

Ausgabe

Öffnen Sie die Datei testAngularJS.htm in einem Webbrowser. Geben Sie Ihren Namen ein und sehen Sie das Ergebnis.

Wie AngularJS in HTML integriert wird

Die ng-app-Direktive gibt den Start der AngularJS-Anwendung an.
Die ng-model-Direktive erstellt eine Modellvariable mit dem Namen name, die mit der HTML-Seite und innerhalb der div mit der ng-app-Direktive verwendet werden kann.
Die ng-Bindung verwendet dann das Namensmodell, das im HTML-Tag <span> angezeigt wird, wenn der Benutzer Eingaben in das Textfeld eingibt.
Das Schließen des </ div> -Tags zeigt das Ende der AngularJS-Anwendung an.