AngularJS Hello World-Anwendung: Ihr erstes Beispielprogramm
James Hartmann
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:
- Die vollstรคndigeng-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.
