AngularJS Hello World-Anwendung: Ihr erstes Beispielprogramm

Der beste Weg, die Leistungsfähigkeit einer AngularJS-Anwendung kennenzulernen, 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 unsere IDE.

Webstorm
Sublime Text
AngularJS Eclipse
Visual Studio

Hallo Welt, AngularJS

Das folgende Beispiel zeigt den einfachsten Weg, Ihre erste „Hello World“-Anwendung in AngularJS zu erstellen.

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Code-Erklärung:

Das "ng-appDas Schlüsselwort „wird verwendet, um anzugeben, dass diese Anwendung als Angular-JS-Anwendung betrachtet werden sollte. Dieser Anwendung kann ein beliebiger Name gegeben werden.
Der Controller dient zur Speicherung der Geschäftslogik. Im h1-Tag möchten wir auf den Controller zugreifen, der über die Logik verfügt, um „HelloWorld“ anzuzeigen. Wir können also sagen, dass wir in diesem Tag auf den Controller mit dem Namen „HelloWorldCtrl“ zugreifen möchten.
Wir verwenden eine Mitgliedsvariable namens „message“, die nichts anderes als ein Platzhalter zur Anzeige der „Hello World“-Nachricht ist.
Das „script-Tag“ wird verwendet, um auf das Skript „angular.js“ zu verweisen, das über alle notwendigen Funktionen für „angular js“ verfügt. Wenn wir ohne diesen Verweis versuchen, AngularJS-Funktionen zu verwenden, funktionieren diese nicht.
„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, das ein globales Objekt ist, das in Angular.js verwendet wird. Das $scope-Objekt wird zum Verwalten der Daten zwischen dem Controller und der Ansicht verwendet.
Wir erstellen eine Mitgliedsvariable namens „message“, weisen ihr den Wert „HelloWorld“ zu und hängen die Mitgliedsvariable an das Bereichsobjekt an.

HINWEIS: Die ng-controller-Direktive ist ein Schlüsselwort, das in definiert ist AngularJS (Schritt 2) 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 den Controller 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.

Ausgang:

Die Nachricht „Hallo Welt“ wird angezeigt.

Du magst vielleicht: