spezifiziert. Mögliche Akzeptanzkriterien für diese Story könnten lauten:
Die Liste zeigt alle Bücher an, die innerhalb der letzten 30 Tage publiziert wurden.
Die Liste ist nach Datum sortiert.
Wenn keine neuen Bücher vorhanden sind, erscheint ein Hinweistext.
Die agile Gemeinde hat übrigens zu technischen User-Storys eine eher ablehnende Haltung. Es gilt als schlechter Stil, technische Belange in den Vordergrund zu stellen.2 Stattdessen zeichnen fachliche Aspekte und damit neue Features eine gute User-Story aus. Dieses Buch behandelt allerdings ein Software-Framework, daher bitten wir alle agilen Experten um Nachsicht, falls die Storys auch technische Aspekte abdecken.
Skizzen
Für unsere Anwendung existieren bereits Skizzen, auf die wir zurückgreifen können. Zunächst widmen wir uns der Listenansicht. Hier werden nur die Basisdaten wie Titel, Untertitel und Coverbild dargestellt.
Abb. 5–3 Skizze der Listenansicht
Klicken wir auf einen Listeneintrag, gelangen wir zur Detailansicht. Hier erweitern wir die Ansicht um eine Beschreibung und eine Bildergalerie. Außerdem ist eine Bewertung in Sternen sichtbar.
Abb. 5–4 Skizze der Detailansicht
In einem Administrationsbereich können neue Bücher in die Liste eingefügt werden. Existierende Buchdatensätze können ergänzt, aktualisiert und korrigiert werden. Dafür stellen wir ein Formular zur Verfügung. Für die Coverbilder wollen wir auf extern gehostete Bilder zurückgreifen.
Abb. 5–5 Skizze des Eingabeformulars
Die Idee des Projekts ist nun bekannt, und wir können als Nächstes die Grundstruktur für die Angular-Anwendung anlegen.
5.2Projekt mit Angular CLI initialisieren
Wir wollen die Angular CLI verwenden, um die Grundstruktur des Projekts anzulegen. Das erspart uns den Aufwand, alle Dateien und Ordner von Hand anzulegen.
Wir verwenden den Befehl ng new, um ein Projekt zu initialisieren. Die Angular CLI fragt uns anschließend als Erstes, ob wir ein Routingmodul anlegen wollen. Da wir dieses Modul im späteren Verlauf benötigen, beantworten wir die Frage mit Ja (
$ ng new book-monkey --prefix=bm
? Would you like to add Angular routing? (y/N) y
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
SCSS [ http://sass-lang.com ]
Sass [ http://sass-lang.com ]
Less [ http://lesscss.org ]
Stylus [ http://stylus-lang.com ]
Listing 5–1 Ein neues Projekt für den BookMonkey anlegen
Präfix festlegen
Der Parameter --prefix=bm sorgt dafür, dass für unser Projekt das Präfix bm eingetragen wird. Was es genau damit auf sich hat, werden wir im weiteren Verlauf klären.
NPM: Warnungen und Hinweise zu Sicherheitslücken
Die Angular CLI legt zunächst die Projektdateien an und installiert anschließend die NPM-Pakete. Wenn bei der Installation der Pakete Warnungen erscheinen, so kann das vielfältige Ursachen haben. In den meisten Fällen beeinträchtigt das aber nicht die Entwicklung der Angular-Anwendung. Folgende Warnungen begegnen uns besonders häufig:
SKIPPING OPTIONAL DEPENDENCY: Eine irrelevante Abhängigkeit wurde übersprungen. Die Warnung kann ignoriert werden.
found X vulnerabilities: In einer der Abhängigkeiten wurde eine Sicherheitsschwachstelle entdeckt. Eine Sicherheitswarnung kann vom Anwender nicht immer korrigiert werden, da womöglich bei einer neueren Version das Tooling in der Konstellation nicht mehr funktioniert. Das Problem ist aber selten tatsächlich schwerwiegend, da mit dem Tooling von Angular ein kompiliertes Bundle erzeugt wird und nur dieses Bundle später ausgeliefert wird. Das Bundle selbst wird von der Sicherheitslücke nicht betroffen sein. Weitere Informationen finden Sie im Kapitel zum Deployment ab Seite 539.
Lassen Sie sich also von den Warnungen nicht verunsichern. Das ganze Tooling rund um Angular hat eine große Liste an Abhängigkeiten, sodass es immer wieder zu Warnungen kommen kann.
Als Nächstes navigieren wir in den neu angelegten Ordner book-monkey.
$ cd book-monkey
Listing 5–2 In das Projekt navigieren
Dort schauen wir uns an, was die Angular CLI für uns generiert hat:
Die Angular CLI legt sofort ein neues Git-Repository an3 und erstellt alle notwendigen Konfigurationen, sodass wir direkt mit der Entwicklung einer Anwendung und zugehöriger Tests beginnen könnten. Ein paar der Konfigurationsdateien wollen wir jedoch ein bisschen näher betrachten.
Datei nicht gefunden?
Durch die stetige Weiterentwicklung der Angular CLI kann es bei neueren Versionen dazu kommen, dass die Konfigurationsdateien für neu angelegte Projekte ggf. Namensunterschiede aufweisen oder in ein Unterverzeichnis verschoben werden. Sollten Sie also eine geringfügig andere Struktur vorfinden als die hier beschriebene, schauen Sie am besten in die Datei angular.json. Dort finden Sie die Pfade zu den entsprechenden Konfigurationsdateien.
angular.json
Die zentrale Angular-Konfigurationsdatei Hilfe durch Editor-Extensions
