AngularJS Hello World: Ihr erstes Beispielprogramm

By: James Hartmann James Hartmann
Hours Aktualisiert

โšก Intelligente Zusammenfassung

AngularJS Hello World-Programme benรถtigen nur eine einzige HTML-Datei, einen Skriptverweis und zwei Direktiven, ng-app und ng-controller, um eine Controller-Scope-Variable รผber einen doppelten geschweiften Ausdruck an die Seite zu binden.

  • ๐Ÿ”˜ ng-app: Das ng-app-Attribut kennzeichnet das Wurzelelement und startet das benannte AngularJS-Modul automatisch.
  • โ˜‘๏ธ ng-controller: ng-controller bindet HelloWorldCtrl an das h1-Element an und stellt so den Controller-Bereich dort zur Verfรผgung.
  • โœ… Bereichsbindung: Durch die Zuweisung von $scope.message innerhalb des Controllers wird der {{message}}-Ausdruck in der Ansicht gerendert.
  • ๐Ÿงช Einzeldatei: Eine HTML-Datei und ein Skriptverweis reichen aus, um das Beispiel auszufรผhren; ein Build-Schritt ist nicht erforderlich.
  • ๏ธ Fehlerbehebung: Geschweifte Klammern auf dem Bildschirm bedeuten fast immer, dass die Bibliothek nicht geladen wurde oder ng-app fehlt.
  • ๐Ÿ“Š Versionshinweis: Die Unterstรผtzung fรผr AngularJS endete im Januar 2022 mit Version 1.8.3 als letzter Version; neue Entwicklungen gehรถren zu Angular.
MEHR LESEN

AngularJS Hello World erstes Beispielprogramm mit ng-app und ng-controller

Die beste Mรถglichkeit, die Leistungsfรคhigkeit einer AngularJS-Anwendung kennenzulernen, besteht darin, ein erstes einfaches Programm, eine โ€žHello Worldโ€œ-App, in AngularJS zu erstellen.

Es gibt viele integrierte Entwicklungsumgebungen, die Sie verwenden kรถnnen fรผr AngularJS Im Rahmen der Entwicklung werden einige der gรคngigsten im Folgenden aufgefรผhrt. In unserem Beispiel verwenden wir Webstorm als unsere IDE.

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

Hallo Welt, AngularJS

Versionshinweis: AngularJS 1.x hat den Langzeit-Support am 31. Dezember 2021 verlassen, und das Framework-Team bestรคtigt, dass Die Unterstรผtzung fรผr AngularJS wurde offiziell eingestellt. Im Januar 2022 wurde die Version 1.8.3 als finale Version verรถffentlicht, danach gab es keine Sicherheitsupdates mehr. Jeder der folgenden Schritte und Codeblรถcke ist unverรคndert. Neue Projekte gehรถren in das moderne Angular, wo die gleiche Vorgehensweise beginnt. ng serve und eine eigenstรคndige Komponente und verwendet immer noch dasselbe {{ }} Interpolationssyntax.

Das folgende Beispiel zeigt den einfachsten Weg, Ihre erste โ€žHello Worldโ€œ-Anwendung in AngularJS zu erstellen.

Der untenstehende Screenshot mit Anmerkungen kennzeichnet jeden Teil dieser Datei, und ihre sieben Zahlen stimmen mit den folgenden รผberein: Code Erlรคuterungsliste unten. Die Aufzeichnung stammt von einer frรผheren Version 1.4.0, daher weicht die Skriptzeile von der im Code festgelegten Version ab.

Annotierte AngularJS-Hello-World-HTML-Datei mit sieben nummerierten Aufrufen fรผr ng-app, ng-controller, die Skriptreferenz und die Scope-Variable

<!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 Erlรคuterung:

  1. Die vollstรคndigeng-appDas Schlรผsselwort โ€žโ€œ kennzeichnet diese Anwendung als AngularJS-Anwendung. Der Name der Anwendung kann beliebig gewรคhlt werden.
  2. Der Controller enthรคlt die Geschรคftslogik. Im h1-Tag mรถchten wir auf Folgendes zugreifen: Controller, das die Logik zur Anzeige von โ€žHello Worldโ€œ enthรคlt, sodass wir sagen kรถnnen, dass wir in diesem Tag auf den Controller mit dem Namen โ€žHelloWorldCtrlโ€œ zugreifen mรถchten.
  3. Wir verwenden eine Mitgliedsvariable namens โ€žmessageโ€œ, die nichts anderes als ein Platzhalter zur Anzeige der โ€žHello Worldโ€œ-Nachricht ist.
  4. Das โ€žScript-Tagโ€œ dient dazu, auf das angular.js-Skript zu verweisen, das alle notwendigen Funktionen fรผr AngularJS enthรคlt. Ohne diesen Verweis funktionieren AngularJS-Funktionen nicht.
  5. Der โ€žControllerโ€œ ist der Ort, an dem wir unsere Geschรคftslogik, also unseren Controller, erstellen. Die Bedeutung der einzelnen Schlรผsselwรถrter wird in den folgenden Kapiteln erlรคutert. Wichtig ist, dass wir eine Controller-Methode namens โ€žHelloWorldCtrlโ€œ definieren, auf die in Schritt 2 verwiesen wird.
  6. Wir erstellen eine Funktion, die aufgerufen wird, wenn unser Code diesen Controller aufruft. Das `$scope`-Objekt ist ein spezielles, globales Objekt in AngularJS, das innerhalb von AngularJS verwendet wird. Es dient der Datenverwaltung zwischen Controller und View.
  7. Wir erstellen eine Membervariable namens โ€žmessageโ€œ, weisen ihr den Wert โ€žHello Worldโ€œ zu und binden die Membervariable an das Scope-Objekt an.

HINWEIS: Die ng-controller-Direktive ist ein Schlรผsselwort, das in definiert ist AngularJS (Schritt 2) und dient dazu, Controller in Ihrer Anwendung zu definieren. In unserer Anwendung haben wir das Schlรผsselwort `ng-controller` verwendet, um einen Controller namens โ€žHelloWorldCtrlโ€œ zu definieren. Die eigentliche Logik fรผr den Controller wird in (Schritt 5) erstellt.

Wenn der Code erfolgreich ausgefรผhrt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausfรผhren.

Ausgang:

Die Nachricht โ€žHallo Weltโ€œ wird angezeigt.

Browserfenster mit dem Titel Guru99 rendert die รœberschrift โ€žHello Worldโ€œ aus der AngularJS-Scope-Variable.

So laden Sie AngularJS: CDN oder lokale Datei

Das obige Beispiel funktioniert, weil eine Zeile das Framework in die Seite einbindet, bevor der Browser das Ende des Body-Bereichs erreicht. AngularJS wird als einzelnes Paket ausgeliefert. JavaEine Skriptdatei ist erforderlich, daher benรถtigt das erste Programm weder einen Build-Schritt noch einen Paketmanager. Eine einfache HTML-Datei, die in einem Browser geรถffnet wird, genรผgt.

Es gibt zwei Mรถglichkeiten, diese Datei zu importieren.

  1. Verweisen Sie auf eine CDN-Kopie. Das Beispiel verweist auf code.angularjs.org und pinnt Version 1.6.9. Dieser Host unterstรผtzt weiterhin 1.x-Builds, die hรถchste Version ist 1.8.2, wรคhrend Google Gehostete Bibliotheken listen AngularJS nicht mehr auf.
  2. Laden Sie eine lokale Kopie herunter. Speichern Sie die Datei neben der HTML-Seite und verweisen Sie das Skript-Tag darauf. Eine lokale Kopie sorgt dafรผr, dass das Beispiel auch offline funktioniert, was wichtig ist, wenn ein Proxy das CDN blockiert.
<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

Arbeiten jederzeit weiterbearbeiten kรถnnen. Jede Prรคsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen, angular.js wรคhrend des Lernens und angular.min.js Im Produktivbetrieb: Der nicht minimierte Build erzeugt einen lesbaren Stacktrace. traces, wohingegen die minimierten Build-Berichte umbenannte Variablen enthalten.

Sobald die Datei geladen ist, ng-app startet das Framework. AngularJS sucht nach diesem Attribut, sobald das Dokument geladen ist, behandelt das Element, das es enthรคlt, als Kompilierungswurzel und startet das im Wert angegebene Modul. Daraus ergeben sich drei Konsequenzen:

  • Nur der erste ng-app Eine Seite wird automatisch initialisiert. Eine zweite wird ignoriert, es sei denn angular.bootstrap wird manuell aufgerufen.
  • Der Wert muss ein Modul bezeichnen, das bei registriert ist. winklig.modulAndernfalls meldet die Konsole [$injector:modulerr].
  • Erteilung ng-app auf die html Das Element, wie im Beispiel gezeigt, bringt das gesamte Dokument unter AngularJS; ein schmalerer Container funktioniert aber auch.

ร„HNLICHE ARTIKEL

Wie {{ }} Ausdrรผcke und ng-model-Bindung funktionieren

Die doppelten Klammern um message Der h1-Tag enthรคlt keinen Platzhalter, der nur einmal beim Laden des Containers befรผllt wird. AngularJS kompiliert diesen Textknoten in einen Watcher fรผr den umgebenden Bereich. kann, also die gerenderte Ausgabe tracks $scope.message solange die Seite existiert.

Der Zyklus verlรคuft in drei Schritten.

  1. Der Controller schreibt einen Wert auf $scope.
  2. Ein Auswertungsdurchlauf vergleicht jeden beobachteten Ausdruck mit seinem vorherigen Ergebnis.
  3. Jeder Ausdruck, dessen Wert sich geรคndert hat, wird an Ort und Stelle neu gerendert.

Ein interpolierter Ausdruck ist daher unidirektional, vom Gรผltigkeitsbereich zur Ansicht. Eine bidirektionale Bindung ist erforderlich. ng-Modell, hat das Richtlinien Fรผr Formularsteuerelemente konzipiert. Hinzufรผgen <input ng-model="message"> Neben der รœberschrift geben Sie etwas in das Feld ein, und die รœberschrift รคndert sich bei jedem Tastendruck, da ng-model den Feldwert in dieselbe Bereichseigenschaft zurรผckschreibt, die der Ausdruck รผberwacht.

Ausdrรผcke sind bewusst eingeschrรคnkt. Sie lesen Bereichseigenschaften, rufen Bereichsmethoden auf und tolerieren undefinierte Werte stillschweigend, kรถnnen aber keine Variablen deklarieren, Kontrollflussanweisungen verwenden oder auf globale Objekte wie zugreifen. window.

So beheben Sie eine leere Seite oder einen nicht gerenderten Inhalt {{ }}

Ein erstes AngularJS-Programm schlรคgt auf eine von zwei sichtbaren Arten fehl: Die Seite bleibt leer, oder der Text wird nicht korrekt angezeigt. {{message}} erscheint dort, wo โ€žHello Worldโ€œ stehen sollte. Beides bedeutet, dass das Framework das Markup nicht รผbernommen hat. Fรผhren Sie die folgenden Prรผfungen der Reihe nach durch, wรคhrend die Browserkonsole geรถffnet ist.

  1. Prรผfen Sie, ob die Bibliothek geladen ist. ร–ffnen Sie das Netzwerk-Panel und suchen Sie nach dem/der/das angular.js Anfrage. Bei einem 404-Fehler oder einem nicht erreichbaren CDN bleiben die Klammern auf dem Bildschirm unverรคndert.
  2. รœberprรผfen Sie den Skriptpfad. Ein relativer Pfad verweist auf den Ordner, der die HTML-Datei enthรคlt, daher kann eine Kopie in einem js Unterordner benรถtigt js/angular.min.js.
  3. รœberprรผfen Sie ng-app. Ein fehlendes oder falsch geschriebenes Attribut bewirkt nichts beim Bootstrapping. Das Attribut wird mit Bindestrich geschrieben als ng-app im Markup, obwohl die Direktive in CamelCase geschrieben ist JavaSkript.
  4. Lesen Sie die Fehlermeldung in der Konsole. [$injector:modulerr] Das bedeutet, dass das von ng-app benannte Modul nie registriert wurde. [ng:areq] bedeutet dies in der Regel, dass der Controllername im Markup nicht mit dem รผbergebenen Namen รผbereinstimmt. .controller().
  5. Suchen Sie nach einer zweiten ng-app. Nur das erste Element wird per Bootstrapping initialisiert, sodass ein versehentlich auf einem inneren Element verbliebener Code diesen Teil der Seite stillschweigend deaktiviert.

Zwei weitere Ursachen sind fรผr den GroรŸteil der รผbrigen Meldungen verantwortlich.

  • Das Dateiprotokoll. Dieses Beispiel mit einer einzelnen Datei funktioniert einwandfrei, wenn es direkt von der Festplatte geรถffnet wird. Alle รผber XHR abgerufenen Vorlagen werden jedoch durch die Browser-Ursprungsregeln blockiert. Stellen Sie den Ordner รผber HTTP bereit, sobald die Vorlagen vorhanden sind.
  • Ein kurzer Blick auf die Zahnspange. Wenn Markup gerendert wird, bevor das Framework es kompiliert, ist der Rohausdruck kurzzeitig sichtbar. Hinzufรผgen ng-cloak zum Element oder tauschen Sie den Ausdruck aus ng-bind="message", das seine eigene Auszeichnung niemals anzeigt.

Wenn keiner dieser Punkte zutrifft, reduzieren Sie die Seite auf das obige Beispiel und fรผgen Sie Ihren eigenen Code Zeile fรผr Zeile wieder hinzu.

Hรคufig gestellte Fragen

Alle vier oben genannten Varianten funktionieren, und dieses Beispiel verwendet sie. WebstormDa es sich bei dem Programm um eine einzelne statische HTML-Datei handelt, genรผgt ein einfacher Texteditor. Eine IDE bietet lediglich zusรคtzliche Funktionen wie Direktivenvervollstรคndigung, Live-Neuladen und integriertes Debugging.

$scope ist das Bindungsobjekt, das zwischen einem Controller und dessen Ansicht. Durch Schreiben von $scope.message innerhalb von HelloWorldCtrl wird diese Eigenschaft fรผr den Ausdruck sichtbar, der auf dem h1-Element platziert ist.

Beide Dateien enthalten dasselbe Framework. angular.js ist nicht minimiert, daher verweisen Fehler auf den lesbaren Quellcode. angular.min.js ist fรผr den Produktiveinsatz komprimiert und benรถtigt eine explizite Abhรคngigkeitsannotation, da die Minimierung die Parameternamen รคndert, die AngularJS sonst prรผft.

AngularJS ist das hier gezeigte Framework der Version 1.x, das auf Direktiven, $scope und einfachen Funktionen basiert. JavaSkript. Angular, also Version 2 und hรถher, ist ein separates Skript. TypeScript Das Framework basiert auf Komponenten und wird aktiv weiterentwickelt.

Hauptsรคchlich zur Wartung bestehender 1.x-Anwendungen, die weiterhin weit verbreitet sind. Das Vokabular der Bindung, Direktiven und Abhรคngigkeitsspritze Transfers sind mรถglich, der Support endete jedoch im Januar 2022, daher mรผssen neue Projekte in das moderne Angular-Framework integriert werden.

Ja. Registrieren Sie jedes Element mit `.controller()` im selben Modul und ordnen Sie sie mithilfe von `ng-controller` verschiedenen Elementen zu. Jedes Element erhรคlt seinen eigenen Kindbereich, sodass gleichnamige Eigenschaften unabhรคngig bleiben.

Moderne Assistenten lesen eine 1.x-Quellcodebasis und erstellen eine Liste von Direktiven, Filtern und Diensten mit Vorschlรคgen fรผr entsprechende Komponenten und Dienste. Diese Liste ist nรผtzlich fรผr die Skalierung.ping die Arbeit, obwohl jede Karteping Erfordert noch eine manuelle รœberprรผfung.

GitHub-Copilot vervollstรคndigt Controller-Standardvorlagen, $scope-Zuweisungen und ng-submit Handler aus einem kurzen Kommentar, aber das Training ist auf modernes Angular ausgerichtet, daher รผberprรผfen Sie, ob die Vorschlรคge tatsรคchlich die Syntax 1.x verwenden.

Fassen Sie diesen Beitrag mit folgenden Worten zusammen: