Integrieren Sie AngularJS in das Projekt und schreiben Sie eine Hallo-Welt-Anwendung
In diesem Artikel starten wir ein Hello-World-Programm mit angleJS
Mục lục
Laden Sie AnglearJS herunter
Du gehst auf die Homepage von AngularJS, klickst auf DOWNLOAD ANGULARJS und lädst das Framework herunter:
Besuchen Sie: https://angularjs.org und laden Sie das AngularJS-Framework herunter:
Umgebungseinstellungen ausführen (optional)
Um mit Angular zu beginnen, ist es durchaus möglich, Ihr HTML-Projektverzeichnis abzulegen und auszuführen. Wenn Sie es jedoch mit dieser Lösung verwenden, wird bei Verwendung der Vorlage in Angular ein Fehler angezeigt. Daher wird empfohlen, die lokale Hostumgebung des Servers zu installieren wie XAMPP oder NodeJS als Laufzeitumgebung. Sie können den Artikel zur Installation von localhost mit xampp sehen
Beginnen Sie mit dem Schreiben des Helloworld-Programms
Da wir für den Einstieg in AngularJS eine Kombination aus Modell, View, Controller und Framework-Eigenschaften benötigen, führen wir aus diesem Grund, bevor wir das Problem verstehen, zuerst diesen Beispielquellcode aus und erfahren dann mehr über das Problem in den folgenden Artikeln.
Schritt 1: Erstellen Sie ein Projektverzeichnis, initialisieren Sie die Datei index.html und importieren Sie die Angular-Bibliothek wie folgt (mit dem Weg unten verwende ich CDN):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello world angular</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> </body> </html>Schritt 2: Starten Sie die Codestruktur wie folgt:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello world angular</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="toanngo92App"> <div ng-controller="toanngo92Controller"> <h1>Hello {{name}}</h1> <p>You are {{age}} years old, your score is {{score}}</p> <input type="text" ng-model="name"> </div> </div> <script> var app = angular.module('toanngo92App', []); app.controller('toanngo92Controller', function($scope) { $scope.name = 'Toanngo92'; $scope.age = 18; $scope.score = 9.5; }); </script> </body> </html>Ergebnisse beim Ausführen des Codes im Browser:
Analysieren Sie den gerade geschriebenen Code der Reihe nach:
- Integrieren Sie das Angular-Framework in das Projekt in Zeile 8
- Zeile 11: <div ng-app="Toanngo92App"> Informiert Angle, dass das/die Element(e) fragment(tags) Angular verstehen und über das Attribut ng-app kommunizieren kann, der Wert „toanngo92App“ ist der Name der Anwendung, can willkürlich eingestellt werden. Bei der Verwendung von Attributen in HTML-Strukturen ist es sinnvoll, dass nur Elemente von dem Tag, der das Attribut enthält, bis zu den darin enthaltenen Elementen per Angular abgefragt werden können. Beachten Sie dies!
- Zeile 19: Initialisiere das Winkelobjekt über die Funktion angle.module('toanngo92App',[]), wobei der erste Parameter der Anwendungsname ist, der nächste Parameter das leere Array ist, das in den folgenden Artikeln näher erwähnt wird. .
- Zeile 20: Controller -Methode aufrufen, darin sind 2 Parameter, der erste Parameter ist eine Zeichenfolge, die den Controller-Namen 'toanngo92Controller' definiert, der zweite Parameter ist eine anonyme Funktion, wobei der Parameter eine eingebaute Variable ($scope) ist, innerhalb dieser Funktion definieren Sie 3 Eigenschaften für $ Scope-Variablenname, Alter, Punktzahl, das ist Modell
- Zeilen 12 – 16: Innerhalb der ng-app-Tag-Struktur befindet sich eine Tag-Struktur mit dem Attribut ng-controller="toanngo92Controller", hier haben wir das Verständnis, dass dies die Ansicht ist, die von dem Controller namens " toanngo92Controller" zurückgegeben wird, die Daten in Der Controller durchläuft die Ansicht über die $scope .-Variable
Als nächstes versuchen wir, mehr Daten in das Eingabefeld einzugeben, das tonngo92-Daten anzeigt. Wir werden sehen, dass die Daten auf dem h1-Tag nach dem Wort hallo gemäß den eingegebenen Daten aktualisiert werden, ohne dass zusätzliche Zeilen js-Code geschrieben werden. Dies sind die Daten -Binding- Mechanismus und der Leistungsfähigkeit von AngularJS, mit reinem Javascript oder Jquery, müssten die sequentiellen Schritte lauten: Fangen Sie das Onkeyup-Ereignis des Benutzers ab, holen Sie sich die Daten aus der Eingabe im Fokus und aktualisieren Sie sie dann im <h1>-Tag.
Hier ist ein Beispielcode einer einfachen Abrechnungsanwendung mit angleJS:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello world angular</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="calculateApp" ng-controller="calculateController"> <label>Quantity:</label> <input type="number" min="1" max="10" ng-model="qty" /> <label>Price</label> <input type="number" min="0" max="5000" ng-model="price" /> <div>Total: {{total | currency: '$ '}}</div> <button ng-click="calculate()">Calculate</button> </div> <script> var app = angular.module('calculateApp', []); app.controller('calculateController',function($scope){ $scope.qty = 0; $scope.price = 0; $scope.total = 0; $scope.calculate = function(){ this.total = this.qty * this.price; } }); </script> </body> </html>Ergebnis beim Ausführen von Test im Browser:
Das obige Beispiel ist eine Kombination einiger Konzepte von angleJS, einschließlich:
- ng-app, ng-controller, ng-model, ng-click innerhalb der HTML-Struktur sind Tag-Attribute, die von AngularJS erkannt und verwendet werden, sogenannte Direktiven
- {{Gesamt | Währung: '$ '}} Dieses Konzept wird als Standardfilter von angleJS bezeichnet (Neufilterung des Werts für das Modell bei Anzeige)
- $scope ist eine eingebaute Variable von anglejs, die verwendet wird, um gemeinsame Daten zwischen Controller und View zu kommunizieren
- angle.module() , app.controller() , dies sind die integrierten Methoden in der angleJS-Struktur, die in den folgenden Artikeln behandelt werden
Schreiben Sie für diesen Artikel Ihr eigenes erstes helloworld-Programm, bevor Sie in späteren Artikeln in die theoretischen Konzepte eintauchen.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
