startet Karma für die Unit-Tests und erzeugt auch einen Bericht für die Code-Abdeckung
ng e2e
startet Protractor für die End-to-End-Tests
ng generate
erzeugt Komponenten, Services, Angular-Module und mehr
DATENBINDUNGEN
Name
Code
Interpolation
<div>{{Eigenschaft}}</div>
Eigenschaftbindung
<div [id]=“Eigenschaft”>...</div>
Attributbindung
<label [attr.for]=“Eigenschaft”>...</label>
Ereignisbindung
<button (click)="Methode()">...</button>
Ereignisbindung mit Ereignisobjekt
<button (click)="Methode($event)">...</button>
Beidseitige Bindung
<input [(ngModel)]=“Eigenschaft”/>
HÄUFIG VERWENDETE ANGULAR-DIREKTIVEN
Name
Code
NgForOf
<div *ngFor="let element of list">...</div>
NgIf
<div *ngIf=“Eigenschaft”>...</div>
NgClass
<div [ngClass]="{’css-klasse’: Eigenschaft}">
NgSwitch
<div [ngSwitch]=“Eigenschaft”>
NgSwitchCase
<div *ngSwitchCase="’Wert1’">...</div>
NgSwitchDefault
<div *ngSwitchDefault>...</div>
</div>
HÄUFIG VERWENDETE LIFECYCLE-HOOKS
Name
Beschreibung
constructor
wird bei der Instanziierung der Komponente aufgerufen
wird benutzt, um Abhängigkeiten zu definieren
ngOnChanges
wird bei Änderungen von Input-Eigenschaften aufgerufen
ngOnInit
wird bei der Initialisierung der Komponente aufgerufen
ngOnDestroy
wird bei der Zerstörung der Komponente aufgerufen
HÄUFIG VERWENDETE ANGULAR-MODULE
Name
Beschreibung
BrowserModule
wird in allen Angular-Webanwendungen gebraucht
verbindet Angular mit dem Browser
CommonModule
wird in allen Angular-Projekten gebraucht
stellt Direktiven, wie zum Beispiel NgIf, und Pipes zur Verfügung
HttpClientModule
wird für die Kommunikation mit einem Server gebraucht
FormsModule
stellt Direktiven für Template-gesteuerte Formulare zur Verfügung
ReactiveFormsModule
stellt Direktiven für Modell-gesteuerte Formulare zur Verfügung
HÄUFIG VERWENDETE DECORATORS
Code
Beschreibung
@NgModule(...)
definiert ein Angular-Modul
class MyModule {...}
@Component(...)
definiert eine Angular-Komponente
class MyComponent {...}
@Injectable()
definiert Metadaten für den Service
class MyService {...}
@Input() prop;
definiert eine Input-Eigenschaft für eine Komponente
@Output() prop =new EventEmitter();
definiert eine Output-Eigenschaft für eine Komponente
Angular für Dummies
Bibliografische Information der Deutschen Nationalbibliothek
Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.
Wiley, the Wiley logo, Für Dummies, the Dummies Man logo, and related trademarks and trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries. Used by permission.
Wiley, die Bezeichnung »Für Dummies«, das Dummies-Mann-Logo und darauf bezogene Gestaltungen sind Marken oder eingetragene Marken von John Wiley & Sons, Inc., USA, Deutschland und in anderen Ländern.
Das vorliegende Werk wurde sorgfältig erarbeitet. Dennoch übernehmen Autoren und Verlag für die Richtigkeit von Angaben, Hinweisen und Ratschlägen sowie eventuelle Druckfehler keine Haftung.
Nikolas Poniros ist Berater und Trainer für Webtechnologien in Darmstadt. Er arbeitet meistens im Frontend mit Angular und hin und wieder im Backend mit Node.js. In seiner Freizeit beschäftigt er sich mit neuen (Web-)Technologien.
Einleitung
Als Erstes möchte ich Ihnen kurz erläutern um, was es in diesem Buch geht. Wie der Titel verrät, geht es um Angular. Allerdings werden Sie durch das Lesen des Buches nicht zum Angular-Experten. Ich möchte Ihnen Best Practices vermitteln und Ihnen den schnellen Einstieg in Angular ermöglichen. Aus diesem Grund werde ich oft nicht jedes Detail erwähnen und auch nicht immer alle möglichen Lösungswege für ein konkretes Problem erklären. Oft erläutere ich die wichtigsten Aspekte von Angular anhand einer Beispielanwendung, die Schritt für Schritt entwickelt wird. Nachdem Sie das Buch gelesen haben, werden Sie in der Lage sein, selbstständig kleinere Angular-Anwendungen zu implementieren. Sie sollten aber auch Ihre eingeweihten Kollegen verstehen können, wenn diese über Angular reden.
Konventionen in diesem Buch
Texte im Listings-Format nutze ich in den folgenden Fällen:
Code-Beispiele oder Kommandos, die Sie in der Konsole angeben können
Wenn ich im Text Code-Teile referenziere
Für Datei- und Verzeichnisnamen
Für URLs
In einigen Listings werden Sie Auslassungspunkte (…) sehen. Diese bedeuten, dass ich dort Code-Zeilen weggelassen habe, damit das Beispiel kürzer wird und Sie sich auf das Wesentliche konzentrieren können.
Fette Schrift nutze ich, um wichtige Teile des Textes hervorzuheben.
Kursive Schrift nutze ich, wenn ich neu eingeführte Begriffe erkläre und wenn ich einen anderen Teil des Buches referenziere.
Was Sie nicht lesen müssen
Meiner Meinung nach lohnt es sich durchaus, das gesamte Buch zu lesen. Vor allem dann, wenn Sie aktiv die Beispielanwendungen implementieren möchten. Die Texte in Kästen enthalten Hintergrund- beziehungsweise weiterführende Informationen, die Sie nicht unbedingt lesen müssen. Sie können auch einzelne Kapitel überspringen, wenn Ihnen die Themen dort schon bekannt sind.
Törichte Annahmen über die Leser
Ich gehe davon aus, dass Sie Interesse an Angular haben. Sie brauchen das Framework vermutlich für Ihre Arbeit oder Sie haben einfach Lust, etwas Neues zu lernen. Ich nehme auch an, dass Sie schon Erfahrung mit JavaScript oder TypeScript haben und Sie sich mit der Syntax der Sprache wohlfühlen. Darüber hinaus kennen Sie sich mit der Syntax von HTML und CSS aus. Vielleicht haben Sie schon Ihre ersten Schritte mit Angular gemacht und möchten jetzt mehr über das Framework erfahren.
Wie dieses Buch aufgebaut ist
Das Buch ist in sechs Teile unterteilt. Jeder Teil ist wiederum in Kapitel und jedes Kapitel in Abschnitte und teilweise in Unterabschnitte unterteilt. Sie müssen nicht alles der Reihe nach lesen – vor allem, wenn Sie sich schon ein bisschen mit Angular auskennen. Wenn Sie allerdings ein blutiger Anfänger sind, was Angular betrifft, kann ich Ihnen nur empfehlen, die Kapitel wirklich der Reihe nach zu lesen.
Im letzten Abschnitt der meisten Kapitel geht es um die Beispielanwendung. Dort entwickeln Sie diese jeweils weiter. Sie können auch nur diese Abschnitte lesen und, falls Sie dort etwas nicht verstehen, die entsprechende Stellen im Kapitel nachlesen.
Teil I: Die ersten Schritte
In diesem Teil bekommen Sie einen Überblick über die Werkzeuge, die Sie für die Entwicklung von Angular-Anwendungen brauchen. Des Weiteren lernen Sie die wichtigsten Bausteine einer Angular-Anwendung kennen und wie Sie die Ansicht einer Anwendung modular aufbauen.
Teil II: Mit dem Nutzer interagieren
In diesem Teil lernen Sie, wie Sie dem Benutzer Daten anzeigen und wie Sie auf Ereignisse, wie zum Beispiel Klicks, reagieren. Zusätzlich sehen Sie, wie Sie mittels Formularen Daten vom Benutzer bekommen und wie Sie seine Eingabe validieren.
Teil III: Mit dem Server kommunizieren
In diesem Teil lernen Sie, wie Ihre Anwendung Daten an einen Server schicken und von einem Server bekommen kann. Darüber hinaus erfahren Sie, wie Sie mit Verbindungs- und Serverfehlern umgehen können.
Teil IV: Routing
In diesem Teil geht es um Client-seitiges Routing und das Implementieren Ihrer Anwendungen mithilfe des Angular-Routers. Neben den Grundlagen, die Sie für jede Anwendung brauchen, sehen Sie auch einige speziellere Features des Angular-Routers.
Teil V: Die Anwendung testen
In diesem Teil erfahren Sie, was Unit- und End-to-End-Tests sind. Sie lernen auch, wie Sie mithilfe von Werkzeugen wie Jasmine, Karma und Protractor Tests für Ihre Angular-Anwendungen schreiben und ausführen.
Teil VI: Der Top-Ten-Teil
Im letzten Teil des Buches spreche ich nicht mehr über Angular-Grundlagen, sondern über weiterführende Themen. Sie erfahren, wo Sie mehr Informationen über Angular finden und wo Sie bei Problemen Hilfe bekommen. Zusätzlich sehen Sie Bibliotheken, die Ihnen das Schreiben von Angular-Anwendungen erleichtern.
Symbole, die in diesem Buch verwendet werden
Ich verwende vier verschiedene Symbole, um wichtige Informationen hervorzuheben:
Dieses Symbol gibt Ihnen Tipps, wo Sie etwas entweder innerhalb des Buches oder im Beispiel-Code, der das Buch begleitet, finden. Darüber hinaus nutze ich das Symbol, um Sie auf Themen hinzuweisen, die Sie gegebenenfalls ebenfalls interessieren könnten, auf die ich aber im Buch aus Platzgründen nicht weiter eingehen kann.
Wann immer Sie dieses Symbol sehen, sollten Sie besonders aufmerksam lesen. Es signalisiert Dinge, die Sie immer wieder brauchen werden und die Sie nicht vergessen sollten. Es kann zum Beispiel auf Best Practices hinweisen oder auf Kommandos, die Sie bei der Entwicklung brauchen.
Dieses Symbol verweist auf Webseiten mit zusätzlichen Informationen über das aktuelle Thema sowie auf Dateien, die Sie von der Webseite dieses Buches herunterladen können.
Dieses Symbol warnt Sie von Situationen, die Sie vermeiden sollten. Es warnt Sie zum Beispiel von gängigen Fehlern oder »Worst Practices« im Umgang mit Angular.
Wie es weitergeht
Falls Sie sich mit TypeScript nicht auskennen, empfehle ich Ihnen, sich als Erstes den Anhang A anzuschauen. Dort beschreibe ich verschiedene TypeScript-Konstrukte, die Ihnen helfen, die Code-Beispiele in diesem Buch zu verstehen.
Am besten laden Sie schon jetzt den Code für das Buch herunter. Diesen finden Sie auf http://www.wiley-vch.de/ISBN9783527714513. In der zip-Datei finden sich ein Verzeichnis mit Namen angular-fuer-dummies. Dort drin finden Sie folgende drei Verzeichnisse:
beispiele: Beinhaltet Beispiel-Code für verschiedene Kapitel des Buches. Falls es für ein Kapitel Beispiele gibt, erwähne ich das im entsprechenden Abschnitt. Sie können die Beispiele nutzen um zu experimentieren und als Stütze bei der Entwicklung der Beispielanwendung. Die Beispiele sind, genauso wie die Beispielanwendung, Angular-CLI-Projekte. Was Angular CLI ist und wie Sie damit arbeiten, erfahren Sie im Kapitel 1.
server: Beinhaltet den Code für den API-Server, den Sie ab Kapitel 7 für die Beispielanwendung brauchen.
beispielanwendung: Beinhaltet den Code für die Beispielanwendung. Dort finden Sie für jedes Kapitel einen Lösungsvorschlag. Die Lösungsvorschläge sind den Kapiteln entsprechend durchnummeriert.
Der Inhalt des Buches und der Beispiel-Code basieren auf Version 7 von Angular. Falls Sie eine andere Version von Angular oder von Angular CLI verwenden, müssen Sie gegebenenfalls die aufgerufenen Kommandos oder den Beispiel-Code anpassen. Durch die Schnelllebigkeit des Internets kann es sein, dass sich manche Seiten nicht mehr unter den angegeben URLs finden lassen. Falls eine URL Sie nicht auf die gewünschte Seite bringt, können Sie versuchen, mithilfe einer Suchmaschine die richtige Seite zu finden.
Und jetzt, da die Formalitäten geklärt sind, kann es endlich losgehen. Ich wünsche Ihnen eine schöne und interessante Reise in die Welt von Angular!
Teil I
Die ersten Schritte
IN DIESEM TEIL …
Benötigte Werkzeuge
Wichtige Bausteine von Angular
Angular-Anwendungen sind modular
Sie starten die Implementierung unserer Beispielanwendung
Dieses Symbol gibt Ihnen Tipps, wo Sie etwas entweder innerhalb des Buches oder im Beispiel-Code, der das Buch begleitet, finden. Darüber hinaus nutze ich das Symbol, um Sie auf Themen hinzuweisen, die Sie gegebenenfalls ebenfalls interessieren könnten, auf die ich aber im Buch aus Platzgründen nicht weiter eingehen kann.
Wann immer Sie dieses Symbol sehen, sollten Sie besonders aufmerksam lesen. Es signalisiert Dinge, die Sie immer wieder brauchen werden und die Sie nicht vergessen sollten. Es kann zum Beispiel auf Best Practices hinweisen oder auf Kommandos, die Sie bei der Entwicklung brauchen.
Dieses Symbol verweist auf Webseiten mit zusätzlichen Informationen über das aktuelle Thema sowie auf Dateien, die Sie von der Webseite dieses Buches herunterladen können.
Dieses Symbol warnt Sie von Situationen, die Sie vermeiden sollten. Es warnt Sie zum Beispiel von gängigen Fehlern oder »Worst Practices« im Umgang mit Angular.