Befolgen Sie die folgenden Schritte, um eine AngularJS -Anwendung zu erstellen
Schritt 1: Laden des Rahmens
Als reines JavaScript -Framework kann es mit dem <Script> -Tag hinzugefügt werden.
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script>
Schritt 2: Verwenden Sie die NG-App-Direktive, um die AngularJS-Anwendung zu definieren
<div ng-App = ""> ... </div>
Schritt 3: Der mit der NG-Model-Anweisung definierte Mustername
<P> Geben Sie Ihren Namen ein: <Eingabe type = "text" ng-model = "name"> </p>
Schritt 4: Verwenden Sie die NG-Bind-Direktive, um die Wertdefinition im obigen Modell zu binden
<p> Hallo <span ng-bind = "name"> </span>! </p>
Befolgen Sie die folgenden Schritte, um die AngularJS -Anwendung auszuführen
Verwenden Sie die drei oben genannten Schritte auf der HTML -Seite.
testangularJs.html
<html> <titels> AngularJS Erste Anwendung </title> <body> <h1> Beispielanwendung </h1> <div ng-App = "> <p> Mein Name: <Eingabe type =" text "ng-model =" name "> </p> <p> Hallo, <spann ng-bind =" name "> </span>! src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>
Ausgabe
Öffnen Sie TextangularJs.html in einem Webbrowser. Bitte geben Sie Ihren Namen ein und sehen Sie die Ergebnisse.
Wie man AngularJs in HTML integriert
Die NG-App-Anweisung gibt den Beginn der AngularJS-Anwendung an.
Die NG-Model-Direktive erstellt auf der HTML-Seite eine Modellvariable mit dem Namen "Name" und hat die NG-App-Direktive in der Div.
NG-Bind verwendet den Modellnamen, solange der Benutzer im Textfeld etwas in das HTML-Span-Tag eingibt.
Das Ende </div> Tag gibt das Ende der AngularJS -Anwendung an.
Das obige ist die einfache AngularJS -Anwendung. Wir werden in Zukunft weiterhin relevante Informationen organisieren. Vielen Dank für Ihre Unterstützung für diese Website.