Sie sind hier
E-Book

Angular für Dummies

AutorNikolas Poniros
VerlagWiley-VCH
Erscheinungsjahr2019
Seitenanzahl350 Seiten
ISBN9783527813117
FormatePUB
KopierschutzDRM
GerätePC/MAC/eReader/Tablet
Preis23,99 EUR

Kaufen Sie hier:

Horizontale Tabs

Leseprobe

Kapitel 1

Die Werkzeuge


IN DIESEM KAPITEL

  • Werkzeuge kennenlernen
  • Entwickeln mit Angular und TypeScript
  • Angular CLI
  • Die Entwicklungsumgebung einrichten

Wer mit Angular und TypeScript eine Webanwendung entwickeln möchte, braucht als Erstes eine Entwicklungsumgebung. Dieses Kapitels will Ihnen helfen, solch eine Entwicklungsumgebung aufzusetzen. Ich zeige Ihnen die verschiedenen Werkzeuge, die Sie dazu brauchen, und was diese tun. Am Ende des Kapitels lernen Sie die Beispielanwendung kennen.

Die Entwicklungsumgebung


Vor gar nicht so langer Zeit reichten noch ein Texteditor, ein Browser und ein Webserver aus, um zumindest eine kleinere Webanwendung schreiben zu können. Wenn Sie aber mit Angular und TypeScript arbeiten wollen, benötigen Sie auch für die kleinste Webanwendung wesentlich mehr Werkzeuge: Sie brauchen eine Entwicklungsumgebung, die unter anderem die folgenden Programme beziehungsweise Werkzeuge beinhaltet:

  • Node.js
  • npm
  • den TypeScript-Compiler
  • einen Texteditor
  • einen Webserver
  • einen Browser

Dazu kommen oft noch weitere Werkzeuge für das Testen der Webanwendung, das Formatieren und Minimieren des Codes und natürlich für die Überprüfung des Codes auf Fehler.

Leider reicht es nicht aus, die Werkzeuge zu installieren. Diese müssen auch konfiguriert werden. Um den Entwicklern eine bisschen Arbeit abzunehmen, hat das Angular-Team Angular CLI entwickelt. Mithilfe dieses Werkzeugs können Sie mit wenig Aufwand ein neues Angular-Projekt starten. Mehr über Angular CLI erfahren Sie im Abschnitt Das Hauptwerkzeug: Angular CLI.

Node.js und npm


Node.js ist eine Laufzeitumgebung für JavaScript. Damit können Sie Kommandozeilenwerkzeuge, Webserver und vieles mehr entwickeln und ausführen. Werkzeuge wie Gulp, Grunt, Karma, ESLint, JSHint kennen Sie vielleicht schon. Eines haben sie alle gemeinsam: Sie wurden in JavaScript geschrieben und werden mit Node.js ausgeführt. Der TypeScript-Compiler und Angular CLI sind da keine Ausnahmen. Aus diesem Grund brauchen Sie Node.js für die Entwicklung einer Angular-Anwendung.

Npm ist ein weiteres wichtiges Element im Werkzeugkasten jedes Webentwicklers. Es wird benutzt, um Pakete zu verwalten. Diese Pakete, auch als npm-Pakete bekannt, können JavaScript, CSS, HTML und mehr beinhalten. Sie definieren npm-Pakete als Abhängigkeiten Ihres Projekts. Beispielsweise hängt ein Angular-Projekt, unter anderem, vom @angular/core-npm-Paket und vom typescript-npm-Paket ab.

In einer Konfigurationsdatei definieren Sie die Abhängigkeiten Ihres Projekts, die Sie im Nachgang dann mit npm installieren. Die Konfigurationsdatei heißt package.json. Alle npm-Pakete, die Sie dort definieren, können nur innerhalb des Projekts verwendet werden. Diese werden deshalb lokale npm-Pakete genannt. Lokale npm-Pakete befinden sich im Verzeichnis node_modules innerhalb Ihres Projektverzeichnisses.

Im Listing 1.1 sehen Sie einen Ausschnitt aus einer package.json-Datei. Neben dem Namen (name-Eigenschaft) und der Version (version-Eigenschaft) sehen Sie dort noch die Eigenschaften dependencies, devDependencies und scripts. Die Ersten beiden sind Objekte, die die Namen und Versionen von Abhängigkeiten beinhalten. Im dependencies-Objekt stehen alle Abhängigkeiten, die Ihre Anwendung zum Laufen braucht. Im devDependencies-Objekt stehen Abhängigkeiten, die nur bei der Entwicklung, aber nicht mehr zur Laufzeit gebraucht werden. Im scripts-Objekt stehen Skripte, die Sie über npm ausführen können. Beispielsweise sind start der Name des Skripts und ng serve das Kommando, das ausgeführt wird (siehe den Abschnitt Das ng-serve-Kommando).

Listing 1.1: Ausschnitt aus einer package.json-Datei. Diese wurde von Angular CLI generiert.

Allgemein führen Sie npm-Skripte mit npm run Skriptname aus. Es gibt einige Skripte, wie zum Beispiel start und test, die Sie auch ohne run ausführen können. Welche Skripte das genau sind, können Sie auf der Webseite von npm unter https://docs.npmjs.com/files/package.json nachlesen. Mit dem Kommando npm run sehen Sie alle Skripte, die in der package.json-Datei des Projekts definiert sind.

In der package.json-Datei haben der Zirkumflex (^) und die Tilde () vor einer Versionsnummer eine spezielle Bedeutung: Die Tilde fixiert die ersten beiden Zahlen der Version und nimmt für die dritte einfach die neuste. Der Zirkumflex fixiert die erste Zahl, für die anderen zwei wird die neuste Version genommen. Betrachten wir als Beispiel eine Abhängigkeit abc, von der die Versionen 6.0.0, 6.0.1 und 6.1.0 existieren. Wenn in der package.json 6.0.0 steht, wird für die Abhängigkeit die Version 6.0.0 installiert. Wenn dort ∼6.0.0 steht, wird die Version 6.0.1 installiert. Wenn dort ^6.0.0 steht, dann wird die Version 6.1.0 installiert.

Neuere npm-Versionen erzeugen zusätzlich zum node_modules-Verzeichnis auch eine Datei namens package-lock.json. Dort stehen alle npm-Pakete, die sich im node_modules-Verzeichnis befinden, mit ihrer jeweiligen Version. Falls Sie ein Werkzeug für die Versionierung Ihres Codes verwenden, wie zum Beispiel git, sollten Sie diese Datei auch hinzufügen. Sie stellt sicher, dass nachträgliche Installationen die exakt gleichen Versionen von den Abhängigkeiten besitzen.

Npm erlaubt auch die Installation von globalen npm-Paketen. Diese Pakete können dann in jedem Projekt verwendet werden. Meistens installieren Sie Kommandozeilenwerkzeuge, wie zum Beispiel Angular CLI, global.

Wie Sie Node.js und npm installieren, erfahren Sie im Abschnitt Beispielanwendung: Umgebung einrichten.

Mehr über die package.json erfahren Sie auf der Webseite von npm unter https://docs.npmjs.com/files/package.json. Mehr über die package-lock.json erfahren Sie auf https://docs.npmjs.com/files/package-lock.json. Auf der npm-Webseite finden Sie auch weitere Informationen über das Werkzeug und seine Features. Falls Sie noch nie mit npm gearbeitet haben, empfehle ich Ihnen, zumindest den Getting Started-Teil zu lesen. In der Regel haben Versionen in der package.json drei Zahlen, die mit Punkten getrennt werden. Hinter diesen Versionsbezeichnungen steckt eine Versionierungsprozess namens Semantic Versioning. Auch Angular folgt diesem Prozess. Mehr darüber erfahren Sie auf https://semver.org/lang/de/.

Texteditoren


Theoretisch können Sie bei der Entwicklung jeden beliebigen Texteditor nutzen. Allerdings sind nicht alle Texteditoren gleich gut für die Entwicklung von Angular-Anwendungen geeignet. Sie sollten einen Texteditor auswählen, der mindestens Syntax-Highlighting und Code-Vervollständigung für TypeScript unterstützt. Auch die Unterstützung von Code-Refactoring ist etwas, worauf Sie bei der Wahl eines Texteditors achten sollten. Gerade letzteres wird Ihnen, vor allem bei größeren Projekten, sehr helfen.

Ich nutze zwar hier den Term »Texteditor«, ich meine damit aber auch integrierte Entwicklungsumgebungen (IDEs). Ich unterscheide nicht explizit zwischen den beiden Ausdrücken, da die meisten modernen Texteditoren sich mithilfe von Plugins zu integrierten Entwicklungsumgebungen umfunktionieren lassen.

In der Tabelle 1.1 sehen Sie vier Texteditoren, die gut für die Entwicklung von Angular-Anwendungen geeignet sind. Alle vier funktionieren unter Windows, Linux und MacOS. Allerdings bieten die vier Editoren unterschiedliche Grade der TypeScript- beziehungsweise Angular-Unterstützung an. Falls Sie genügend Zeit haben, empfehle ich Ihnen, alle vier Texteditoren zu testen und denjenigen auswählen, der am besten zu Ihnen passt. Falls Sie die Zeit nicht haben, empfehle ich Ihnen Visual Studio Code, wozu Sie mindestens das Angular-Language-Service-Plugin installieren sollten.

Atom

Sublime Text

Visual Studio...

Blick ins Buch

Weitere E-Books zum Thema: Internet - Intranet - Webdesign - Security

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Internet für Psychologen

E-Book Internet für Psychologen
Format: PDF

Das Internet kurz zu erklären und gleichzeitig einen aktuellen Überblick über psychologische Themen und Forschungsschwerpunkte zu geben, ist wohl ein hoffnungsloses Unterfangen. Zu…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

Texten für das Web

E-Book Texten für das Web
Erfolgreich werben, erfolgreich verkaufen Format: PDF

Dieses Buch bietet das nötige Handwerkszeug, um die Qualität der eigenen Web-Texte zu verbessern bzw. eingekaufte Texte sicherer beurteilen zu können. Es liefert klare Kriterien für die Textanalyse,…

TCP/IP-Praxis

E-Book TCP/IP-Praxis
Dienste, Sicherheit, Troubleshooting Format: PDF

Netzwerke modernen Standards verlangen weniger nach Rezepten für Neu - Design als vielmehr nach Wegen, Maßnahmen zur Integration in eine bestehende Infrastruktur aufzuzeigen. Diesem Aspekt trägt TCP/…

E-Learning

E-Book E-Learning
Einsatzkonzepte und Geschäftsmodelle Format: PDF

Der vorliegende Band ist dem Lernen und Lehren auf der Basis moderner Informations- und Kommunikationstechnologien gewidmet. Das Buch fasst die wichtigsten Ansätze zur Einführung, Umsetzung und…

E-Learning

E-Book E-Learning
Einsatzkonzepte und Geschäftsmodelle Format: PDF

Der vorliegende Band ist dem Lernen und Lehren auf der Basis moderner Informations- und Kommunikationstechnologien gewidmet. Das Buch fasst die wichtigsten Ansätze zur Einführung, Umsetzung und…

Weitere Zeitschriften

Menschen. Inklusiv leben

Menschen. Inklusiv leben

MENSCHEN. das magazin informiert über Themen, die das Zusammenleben von Menschen in der Gesellschaft bestimmen -und dies konsequent aus Perspektive der Betroffenen. Die Menschen, um die es geht, ...

Archiv und Wirtschaft

Archiv und Wirtschaft

"Archiv und Wirtschaft" ist die viermal jährlich erscheinende Verbandszeitschrift der Vereinigung der Wirtschaftsarchivarinnen und Wirtschaftsarchivare e. V. (VdW), in der seit 1967 rund 2.500 ...

BMW Magazin

BMW Magazin

Unter dem Motto „DRIVEN" steht das BMW Magazin für Antrieb, Leidenschaft und Energie − und die Haltung, im Leben niemals stehen zu bleiben.Das Kundenmagazin der BMW AG inszeniert die neuesten ...

Burgen und Schlösser

Burgen und Schlösser

aktuelle Berichte zum Thema Burgen, Schlösser, Wehrbauten, Forschungsergebnisse zur Bau- und Kunstgeschichte, Denkmalpflege und Denkmalschutz Seit ihrer Gründung 1899 gibt die Deutsche ...

Computerwoche

Computerwoche

Die COMPUTERWOCHE berichtet schnell und detailliert über alle Belange der Informations- und Kommunikationstechnik in Unternehmen – über Trends, neue Technologien, Produkte und Märkte. IT-Manager ...

crescendo

crescendo

Die Zeitschrift für Blas- und Spielleutemusik in NRW - Informationen aus dem Volksmusikerbund NRW - Berichte aus 23 Kreisverbänden mit über 1000 Blasorchestern, Spielmanns- und Fanfarenzügen - ...

FileMaker Magazin

FileMaker Magazin

Das unabhängige Magazin für Anwender und Entwickler, die mit dem Datenbankprogramm Claris FileMaker Pro arbeiten. In jeder Ausgabe finden Sie von kompletten Lösungsschritten bis zu ...