Der beste Weg, um die Leistungsfähigkeit einer AngularJS-Anwendung zu sehen, besteht darin, Ihre erste Basisprogramm-App "Hello World" in Angular.JS zu erstellen.
Es gibt viele integrierte Entwicklungsumgebungen, die Sie für die AngularJS-Entwicklung verwenden können. Einige der beliebtesten sind unten aufgeführt. In unserem Beispiel verwenden wir Webstorm als IDE.
- Webstorm
- Erhabener Text
- AngularJS Eclipse
- Visual Studio
Hallo Welt, AngularJS
Das folgende Beispiel zeigt den einfachsten Weg, um Ihre erste "Hello World" -Anwendung in AngularJS zu erstellen.
Guru99 {{message}}
Code Erläuterung:
- Das Schlüsselwort " ng-app " gibt an, dass diese Anwendung als eckige js-Anwendung betrachtet werden soll. Dieser Anwendung kann ein beliebiger Name gegeben werden.
- Der Controller wird verwendet, um die Geschäftslogik zu halten. Im h1-Tag möchten wir auf den Controller zugreifen, der die Logik hat, "HelloWorld" anzuzeigen. In diesem Tag möchten wir also auf den Controller mit dem Namen "HelloWorldCtrl" zugreifen.
- Wir verwenden eine Mitgliedsvariable namens "message", die nichts anderes als ein Platzhalter ist, um die "Hello World" -Nachricht anzuzeigen.
- Das "Skript-Tag" wird verwendet, um auf das Skript angle.js zu verweisen, das über alle erforderlichen Funktionen für Angular js verfügt. Ohne diese Referenz funktionieren AngularJS-Funktionen nicht, wenn wir versuchen, sie zu verwenden.
- "Controller" ist der Ort, an dem wir tatsächlich unsere Geschäftslogik erstellen, die unser Controller ist. Die Besonderheiten der einzelnen Schlüsselwörter werden in den folgenden Kapiteln erläutert. Es ist wichtig zu beachten, dass wir eine Controller-Methode namens 'HelloWorldCtrl' definieren, auf die in Schritt 2 verwiesen wird.
- Wir erstellen eine "Funktion", die aufgerufen wird, wenn unser Code diesen Controller aufruft. Das $ scope-Objekt ist ein spezielles Objekt in AngularJS, einem globalen Objekt, das in Angular.js verwendet wird. Das $ scope-Objekt wird verwendet, um die Daten zwischen dem Controller und der Ansicht zu verwalten.
- Wir erstellen eine Mitgliedsvariable mit dem Namen "message", weisen ihr den Wert "HelloWorld" zu und hängen die Mitgliedsvariable an das Bereichsobjekt an.
HINWEIS : Die Direktive ng-controller ist ein in AngularJS (Schritt 2) definiertes Schlüsselwort und wird zum Definieren von Controllern in Ihrer Anwendung verwendet. Hier in unserer Anwendung haben wir das Schlüsselwort ng-controller verwendet, um einen Controller mit dem Namen 'HelloWorldCtrl' zu definieren. Die eigentliche Logik für die Steuerung wird in (Schritt 5) erstellt.
Wenn der Befehl erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Die Meldung 'Hallo Welt' wird angezeigt.
