Beginnen Sie mit Angular: Das InfoWorld-Tutorial

Angular, der Nachfolger von AngularJS, ist eine Entwicklungsplattform zum Erstellen von Mobil- und Desktopanwendungen mit TypeScript und / oder JavaScript und anderen Sprachen. Angular ist beliebt für die Erstellung von Websites mit hohem Volumen und unterstützt Web-, Mobile-Web-, native Mobile- und native Desktop-Anwendungen.

Das Angular-Kernentwicklungsteam ist zwischen Google-Mitarbeitern und einer robusten Community aufgeteilt. es wird nicht so schnell verschwinden. Zusätzlich zu ihren eigenen umfangreichen Funktionen verfügt die Angular-Plattform über ein starkes externes Ökosystem: Mehrere bekannte IDEs unterstützen Angular, sie verfügt über vier Datenbibliotheken, ein halbes Dutzend nützlicher Tools und über ein Dutzend Sätze von UI-Komponenten sowie Dutzende davon Winkelbücher und Kurse. Als AngularJS 2015 mit einem Bossie Award ausgezeichnet wurde, erklärte ich, dass es sich um ein JavaScript-AJAX-Framework für Modellansichten (MVW) handelt, das HTML mit Markup für dynamische Ansichten und bidirektionale Datenbindung erweitert. Angular eignet sich besonders zum Entwickeln von einseitigen Webanwendungen und zum Verknüpfen von HTML-Formularen mit Modellen und JavaScript-Controllern. Der neue Angular ist eher in TypeScript als in JavaScript geschrieben, was viele Vorteile hat, wie ich noch erläutern werde.

Das seltsam klingende Muster „Modellansicht-was auch immer“ ist ein Versuch, die Muster Modellansicht-Controller (MVC), Modellansicht-Ansichtsmodell (MVVM) und Modellansicht-Präsentator (MVP) unter einem zusammenzufassen Spitzname. Die Unterschiede zwischen diesen drei eng verwandten Mustern sind die Art von Dingen, über die Programmierer gerne heftig streiten. Die Angular-Entwickler entschieden sich, die Diskussion zu beenden.

Grundsätzlich synchronisiert Angular Daten von Ihrer Benutzeroberfläche (Ansichten in AngularJS und Vorlagen in Angular 2 und höher) automatisch mit Ihren JavaScript-Objekten (Modell) durch bidirektionale Datenbindung. Um Ihre Anwendung besser zu strukturieren und das Testen zu vereinfachen, bringt Angular dem Browser das Einfügen von Abhängigkeiten und das Umkehren der Steuerung bei. Das neue Angular (Version 2 und höher) ersetzt Ansichten und Controller durch Komponenten und übernimmt Standardkonventionen, die das Verständnis erleichtern und es Entwicklern ermöglichen, sich auf die Entwicklung von ECMAScript 6-Modulen und -Klassen zu konzentrieren. Mit anderen Worten, Angular 2 ist eine vollständige Neufassung von AngularJS, die versucht, dieselben Ideen besser umzusetzen. Angular View-Vorlagen mit einer relativ einfachen Syntax werden in JavaScript kompiliert, das für moderne JavaScript-Engines gut optimiert ist.Der neue Komponentenrouter in Angular 2 kann Code-Splitting (verzögertes Laden) durchführen, um die Menge an Code zu reduzieren, die zum Rendern einer Ansicht geliefert wird.

Download 's Erste Schritte mit Angular Laden Sie dieses Angular-Tutorial im praktischen PDF-Format herunter

Warum Angular? Und wann ist es keine gute Wahl?

Die Auswahl eines JavaScript-Frameworks für eine Web-App ist ein Prozess, der Religionskriege unter Entwicklern auslöst. Ich bin nicht hier, um Angular zu verbreiten, aber ich möchte, dass Sie die Vor- und Nachteile kennen. Idealerweise sollten Sie das für Ihre App geeignete Framework auswählen und dabei die Fähigkeiten in Ihrem Unternehmen und die Frameworks berücksichtigen, die Sie in anderen Anwendungen verwenden. Im Allgemeinen verfügt Angular über gute Werkzeuge und eignet sich für wirklich große Projekte mit hohem Verkehrsaufkommen. Angular wurde als komplettes Rewrite von AngularJS von Grund auf für den Einsatz auf Mobilgeräten und für hohe Leistung entwickelt. Wie sein Vorgänger ist die Datenbindung einfach und gut.

Angular verwendet ein Webkomponentenmuster, jedoch keine Webkomponenten an sich. Es ist nicht Polymer, das echte Webkomponenten erstellt, obwohl Sie Polymer-Webkomponenten in Angular-Anwendungen verwenden können, wenn Sie dies wünschen. Angular verwendet die Inversion von Kontrollmustern (IoC) und Abhängigkeitsinjektionsmustern (DI) und behebt einige Probleme bei der AngularJS-Implementierung dieser Muster.

Angular verwendet Direktiven und Komponenten, die Logik mit HTML-Markup mischen. Eine Denkschule sagt, dass das Mischen von Logik mit Präsentation eine Hauptsünde ist. Eine andere Denkrichtung besagt, dass es einfacher ist, alles zu entwickeln und zu verstehen, wenn alles an einem Ort deklariert ist. Das ist ein Thema, das Sie selbst entscheiden müssen, da ich mich für verschiedene Projekte auf verschiedenen Seiten der Frage befunden habe.

Angular hat einige Dokumentationsprobleme, häufige Abwärtskompatibilitätsprobleme und viele Konzepte, die ein neuer Entwickler lernen kann. Auf der anderen Seite verfügt Angular über ein riesiges Ökosystem, das die Lücken in der Angular-Dokumentation mit Web-Tutorials, Videos und Büchern von Drittanbietern füllt.

Über TypeScript

Angular ist in TypeScript implementiert, einer Obermenge von JavaScript vom Typ Ente, die in JavaScript transpiliert wird. Im Allgemeinen sind TypeScript-Anwendungen im Produktionsmaßstab einfacher zu warten als JavaScript. Der einfache Prozess zum Ermitteln, ob Ihre Typen zur Kompilierungszeit korrekt sind, eliminiert eine große Klasse häufiger JavaScript-Fehler. Wenn Sie die Typen kennen, können Editoren, Tools und IDEs bei der Code-Vervollständigung, dem Refactoring und der Code-Überprüfung hilfreicher sein.

Ich bin zufällig ein großer Fan von TypeScript. Ich finde es viel produktiver, an einem großen TypeScript-Projekt zu arbeiten, als an einem großen JavaScript-Projekt. Mit JavaScript weiß ich wirklich nie, ob Fehler im Code lauern, die darauf warten, mich zu beißen, egal wie oft ich JSHint ausführe. Mit TypeScript fühle ich mich viel sicherer, zumindest wenn ich die optionalen Typen, Klassen, Module und Schnittstellen hinzugefügt habe.

Erste Schritte: Installieren Sie Angular-, TypeScript- und Visual Studio-Code

Nachdem dies gesagt ist, installieren wir die Software und legen los.

Installieren Sie Node.js und NPM

Bevor Sie etwas anderes tun, müssen Sie Node.js und NPM, den Node-Paketmanager, installieren, da diese einem Großteil der Installation und des Tools von Angular zugrunde liegen. Um herauszufinden, ob und welche Versionen installiert sind, rufen Sie eine Konsolen- oder Terminal-Eingabeaufforderung auf und geben Sie die folgenden zwei Befehle ein:

$ node -v $ npm -v

Auf meinem Computer ist die gemeldete Node.js-Version v6.9.5 und die NPM-Version 3.10.10. Dies sind derzeit die aktuellen Versionen für Langzeitunterstützung, wie ich anhand von //nodejs.org/ erkennen kann. Wenn Ihre Versionen aktuell sind, können Sie mit dem nächsten Abschnitt fortfahren. Wenn einer der Befehle nicht gefunden wird oder eine der Versionen veraltet ist, sollten Sie die aktuellen Versionen installieren. Meine Versionen sind aktuell, da ich Node kürzlich neu installiert habe, wie im folgenden Screenshot gezeigt. Um sowohl Node.js als auch NPM zu installieren, müssen Sie zu nodejs.org navigieren, die grüne LTS-Taste drücken und den Anweisungen folgen.

Überprüfen Sie nach Abschluss der Installation die Versionen erneut, um sicherzustellen, dass sie wirklich aktualisiert wurden. Ich weiß, dass das Wiederholen des Checks paranoid klingt, aber ein guter Programmierer benötigt eine gesunde Dosis Paranoia, um Fehler zu vermeiden, und abgebrochene Installationen sind keine Seltenheit.

1. Installieren Sie Angular

Es gibt zwei Möglichkeiten, Angular zu installieren und zu verwenden. Ich werde Ihnen aus mehreren Gründen zuerst die CLI-Methode (Command Line Interface) zeigen. Das erste ist, dass es besser zu meiner Arbeitsweise passt. Das zweite ist, dass die CLI eine vollständigere Starteranwendung generiert als der QuickStart-Startwert. Der dritte Grund ist, dass der Bereinigungsschritt in den QuickStart-Seed-Anweisungen möglicherweise Chaos anrichtet, wenn er zur falschen Zeit oder im falschen Verzeichnis verwendet wird.

Navigieren Sie zu //angular.io/ und klicken Sie auf eine der drei Schaltflächen Erste Schritte. Sie gehen alle zum selben Ort, dem Angular QuickStart.

Bitte lesen Sie diese Seite durch und probieren Sie das QuickStart-Beispiel auf Plunker über den Link nach dem ersten Codeblock aus. Wenn Sie der Meinung sind, dass Sie der @ComponentDekorationsfunktion und dem Bindungsausdruck {{name}}für die Winkelinterpolation folgen können , klicken Sie links auf den Link CLI QuickStart. Machen Sie sich nicht zu viele Gedanken darüber, wie die Dekorationsfunktion und die Interpolationsbindung implementiert werden: Wir werden darauf zurückkommen.

1a. Installieren und testen Sie Angular-CL

Wir werden den Anweisungen zum Einrichten der CLI-Entwicklungsumgebung folgen. Der erste Schritt besteht darin, Angular und seine CLI global zu installieren mit npm:

$ npm install -g @ angle / cli

Wenn Sie die Installation sorgfältig beobachten, werden eine Reihe von Voraussetzungen und Tools angezeigt, die vor Angular und seiner CLI installiert wurden. Wenn es Warnungen gibt, machen Sie sich keine Sorgen. Wenn es Fehler gibt, müssen Sie diese möglicherweise beheben. Ich habe selbst nur Warnungen gesehen. Es ist sicher, die Angular CLI jederzeit neu zu installieren.

Der nächste Schritt besteht darin, ein neues Projekt mit der Angular CLI zu erstellen. Ich habe meine in einem Verzeichnis namens Work unter meinem Home-User-Ordner abgelegt.

$ cd work $ ng neue my-app

Wie in der Anleitung angegeben, dauert das Generieren der neuen Angular-App einige Minuten. Dies ist eine gute Zeit, um eine schöne Tasse Tee oder Kaffee zu kochen.

Auf dem Screenshot sehen Sie, dass ich meine TypeScript-Version ( tsc -v) nach der Angular CLI-Installation noch einmal überprüft habe . Ja, es war ein bisschen paranoid. Und ja, das ist auch eine gute Idee für Sie. Wenn Sie TypeScript noch nicht installiert haben, kümmern wir uns jetzt darum:

$ npm install –g Typoskript

Wir sind fast da. Wechseln Sie als Nächstes in das neue Verzeichnis und stellen Sie die Anwendung bereit.

$ cd my-app $ ng dienen

Wie der Server Ihnen mitteilt, überwacht er Port 4200. Öffnen Sie also eine Browser-Registerkarte für // localhost: 4200, und Sie sehen das Bild links.

Der Kontostand der CLI QuickStart-Seite weist Sie an, die title-Eigenschaft und deren CSS zu ändern. Sie können dies mit jedem Programmiereditor ( kein Textverarbeitungsprogramm!) Tun, den Sie gerade installiert haben, oder warten, bis Sie Visual Studio Code später installieren. Das Browserfenster wird beim Speichern automatisch aktualisiert, da der Server den Code überwacht und bei Änderungen aktualisiert.

Wenn Sie mit dem Server fertig sind, drücken Sie im Terminalfenster Strg-C, um den Vorgang abzubrechen.

1b. Installieren Sie den Angular QuickStart-Startwert

Führen Sie diesen Schritt nur aus, wenn Sie Schritt 1a übersprungen haben. Wenn Sie beide Schritte ausführen, wird diese Installation einen Teil der CLI-Installation blockieren, und Sie müssen dies wiederholen, wenn Sie sie erneut verwenden möchten. Die Anweisungen zum Installieren des QuickStart-Seeds bieten zwei Optionen zum Starten des Prozesses: Herunterladen und Entpacken des Seeds oder alternativ Klonen des Seeds wie folgt:

$ git clone //github.com/angular/quickstart.git quickstart

Unabhängig davon, welche Option Sie zum Abrufen des Codes auswählen, sind die nächsten Schritte dieselben:

$ cd Schnellstart

(oder wie auch immer Sie den Ordner genannt haben)

$ npm installieren

$ npm starten

Der npm installSchritt macht im Wesentlichen dasselbe wie der $ npm install -g @angular/cliSchritt in der CLI-Version der Installation, außer dass TypeScript installiert wird und die Angular-CLI nicht installiert wird, da dies nicht in der Abhängigkeitsliste von enthalten ist package.json. Wenn die Angular-CLI bereits installiert ist, wird sie von diesem Skript deinstalliert .

Der npm startSchritt führt dieses Skript aus:

"start": "gleichzeitig" npm run build: watch "" npm run serve "

Um dies zu erweitern, lauten die Build: Watch- und Serve-Skripte wie folgt:

"build: watch": "tsc -p src / -w"

und

"serve": "lite-server -c = bs-config.json"

Habe ich schon erwähnt, dass dies tscder TypeScript-Compiler ist? Die -pOption legt das zu kompilierende Projektverzeichnis fest und die -wOption sagt, dass Eingabedateien überwacht werden sollen.

Der npm startSchritt (gleichzeitiges Ausführen der beiden Skripts) führt im Wesentlichen dasselbe aus wie der ng serveSchritt in der CLI-Version der Installation, außer dass wahrscheinlich ein anderer Port ausgewählt wird und die Seite, die in Ihrem Standard bereitgestellt wird, automatisch geladen wird Browser, und die Seite sieht aus wie das Bild links.

Wenn Sie mit Ihrer Angular QuickStart-App fertig sind, drücken Sie einfach Strg + C oder schließen Sie das Terminalfenster, um den Vorgang abzubrechen. Sie können es erneut starten, indem Sie zum Verzeichnis zurückkehren und es ausführen ng serve.

Der nächste (optionale) Schritt in den QuikStart-Seed-Anweisungen macht mich nervös: Er fordert Sie auf, die nicht wesentlichen Dateien unter rm -rfMacOS oder delWindows zu löschen . Wenn Sie sich dazu entschließen, überprüfen Sie mindestens, ob Sie sich im richtigen Verzeichnis befinden, bevor Sie das Skript starten, das Sie von der Dokumentationssite kopiert haben. Bitte versuchen Sie es nicht, nachdem Sie begonnen haben, Dateien zum Projekt hinzuzufügen.

Unabhängig davon, ob Sie die CLI- oder QuickStart-Seed-Anweisungen befolgt haben, besteht Ihr nächster Schritt darin, den Quellcode eines Angular-Projekts zu untersuchen. Installieren wir zu diesem Zweck einen Angular-fähigen Editor.

2. Installieren Sie Visual Studio Code

Auf der Seite Angular-Ressourcen werden drei IDEs empfohlen: IntelliJ IDEA, Visual Studio Code und WebStorm. Ich verwende alle drei, aber für die Zwecke dieser Übung ist Visual Studio Code die beste Wahl, da es kostenlos und Open Source ist. Navigieren Sie zur Visual Studio Code-Startseite, laden Sie die aktuelle stabile Version für Ihre Plattform herunter und installieren Sie das Paket.

Führen Sie Visual Studio Code nach der Installation aus und öffnen Sie das Verzeichnis, in dem sich Ihr Basisprojekt befindet. Auf meinem Mac befindet sich das von der CLI generierte Projekt in ~/work/my-appund der Startwert in ~/work/quickstartmaster. Ihr Speicherort hängt davon ab, ob Sie die CLI-Installation oder die Seed-Installation durchgeführt haben und welche Entscheidungen Sie bezüglich der Zielverzeichnisse getroffen haben. Der Quellbaum sollte ungefähr so ​​aussehen:

Visual Studio Code unterstützt TypeScript sofort, sodass nichts anderes installiert werden muss. Wenn Sie später andere Sprachen installieren möchten, können Sie dies einfach im Erweiterungsfenster tun. Dies wird einfach durch Klicken auf das untere Symbol oben links angezeigt. Geben Sie den Namen der gewünschten Sprache oder des gewünschten Tools in das Suchfeld oben im Bereich "Erweiterungen" ein. Sie können zum Datei-Explorer zurückkehren, indem Sie oben links auf das obere Symbol klicken.