AngularJS-Einführungs-Tutorial zum Aufbau einer Lernumgebung_AngularJS

Eine gute Möglichkeit, AngularJS zu erlernen, besteht darin, dieses Schritt-für-Schritt-Tutorial durchzuarbeiten, das Sie durch die Erstellung einer vollständigen AngularJS-Webanwendung führt. Bei der Web-App handelt es sich um eine Verzeichnisliste mit Android-Gerätebeständen. Sie können die Liste filtern, um die Geräte anzuzeigen, die Sie interessieren, und dann die Gerätedetails anzeigen.

Dieses Tutorial zeigt Ihnen, wie AngularJS Webanwendungen intelligenter und flexibler machen kann, ohne dass verschiedene Erweiterungen oder Plug-Ins erforderlich sind. Wenn Sie diesem Tutorial folgen, werden Sie:

1. Lesen Sie das Beispiel, um zu erfahren, wie Sie die clientseitigen Datenbindungs- und Abhängigkeitsinjektionsfunktionen von AngularJS verwenden, um dynamische Datenansichten zu erstellen, die sofort auf Benutzervorgänge reagieren können.
2. Erfahren Sie, wie Sie mit AngularJS Daten-Listener ohne DOM-Manipulation erstellen.
3. Lernen Sie eine bessere und einfachere Möglichkeit zum Testen Ihrer Webanwendungen.
4. Erfahren Sie, wie Sie AngularJS verwenden, um allgemeine Webaufgaben zu erstellen, z. B. um Daten einfacher in Ihre Anwendung zu integrieren.

Und das alles kann in jedem Browser erreicht werden, keine Browserkonfiguration erforderlich!

Wenn Sie dieses Tutorial abgeschlossen haben, werden Sie Folgendes lernen:

1. Erstellen Sie eine dynamische Anwendung, die in jedem Browser funktioniert.
2. Verstehen Sie die Unterschiede zwischen AngularJS und anderen JavaScript-Frameworks.
3. Verstehen Sie, wie AngularJS die Datenbindung implementiert.
4. Verwenden Sie die Seed-Projekte von AngularJS, um schnell Ihre eigenen Projekte zu erstellen.
5. Erstellen Sie Tests und führen Sie sie aus.
6. Erfahren Sie mehr über AngularJS-Identitätsressourcen (API).

Dieses Tutorial führt Sie durch einen einfachen Anwendungserstellungsprozess, einschließlich des Schreibens und Ausführens von Komponententests sowie des kontinuierlichen Testens der Anwendung. Jeder Schritt des Tutorials bietet Ihnen Vorschläge, um mehr über AngularJS und die von Ihnen erstellten Webanwendungen zu erfahren. Sie können dieses Tutorial schnell in kurzer Zeit durcharbeiten oder viel Zeit damit verbringen, sich damit zu beschäftigen. Eine kurze Einführung in AngularJS finden Sie in der Dokumentation „Erste Schritte“.

Eine Lernumgebung aufbauen

Ganz gleich, ob Sie sich in einer Mac-, Linux- oder Windows-Umgebung befinden, Sie können diesem Tutorial folgen, um das Programmieren zu erlernen. Sie können das Versionskontrollsystem Git zur Quellcodeverwaltung verwenden, um die Quellcodedateien dieses Tutorialprojekts abzurufen, oder das komprimierte Bildarchivpaket der Quellcodedateien dieses Tutorialprojekts direkt aus dem Internet herunterladen.

1. Sie müssen Node.js und Testacular installieren. Bitte besuchen Sie die offizielle Website von Node.js, um die neueste Version herunterzuladen und zu installieren. Fügen Sie dann den Pfad des ausführbaren Knotens zur Systemumgebungsvariablen PATH hinzu. Führen Sie nach Abschluss den Befehl aus. Führen Sie den Befehl in der Zeile aus, um zu überprüfen, ob die Installation erfolgreich war:

Code kopieren Der Code lautet wie folgt:

Knotenversion

Dann installieren Sie das Testacular-Unit-Testprogramm. Führen Sie bitte den folgenden Befehl aus:

Code kopieren Der Code lautet wie folgt:

npm install -g testacular

2. Installieren Sie das Git-Tool und kopieren Sie dann mit dem folgenden Befehl die Quellcodedatei dieses Tutorialprojekts von Github:

Code kopieren Der Code lautet wie folgt:

Git-Klon git://github.com/angular/angular-phonecat.git

Sie können das komprimierte Bildarchivpaket des Quellcodes dieses Tutorialprojekts auch direkt aus dem Internet herunterladen . Dieser Befehl erstellt einen neuen Ordner „angular-phonecat“ in Ihrem aktuellen Ordner.

3. Als letztes müssen Sie sicherstellen, dass auf Ihrem Computer ein Webbrowser und ein Texteditor installiert sind.

4. Geben Sie das Tutorial-Quellcode-Dateipaket angle-phonecat ein, führen Sie das Server-Hintergrundprogramm aus und beginnen Sie mit dem Erlernen von AngularJS!

Code kopieren Der Code lautet wie folgt:

cd angle-phonecat
node scripts/web-server.js