Angular. Ferdinand Malcher

Angular - Ferdinand Malcher


Скачать книгу
alt="image"/>

      Abb. 5–2 Differenzansicht des BookMonkeys

       Storys

      Jeder Abschnitt verfügt über eine sogenannte User-Story. User-Storys werden in der agilen Softwareentwicklung verwendet, um fachliche Anforderungen kurz und verständlich zu spezifizieren. Es sind möglichst wenige Sätze in natürlicher Sprache, um als Gedankenstütze für eine Anforderung zu dienen. Aufgrund der Kürze ist die beschriebene Anforderung recht vage, nur grob umrissen. Wir werden folgende bekannte Formulierung verwenden:

      Als <Rolle>

      möchte ich <Ziel/Wunsch>,

      um <Nutzen>.

      Ein Beispiel: »Als Bibliothekar möchte ich eine Liste aller neuen Bücher ausdrucken können, um die Geschäftsführung über Neuzugänge zu informieren.«

       Akzeptanzkriterien

      Da man nicht alle Details in einem einzigen Satz erläutern kann, werden die Anforderungen durch Akzeptanzkriterien weiter 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.

image

      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.

image

      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.

image

      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 (image) und drücken anschließend image. Danach werden wir nach dem zu nutzenden Style-Format gefragt. Hier treffen wir die Auswahl CSS und bestätigen die Eingabe mit image.

      $ 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:

image

      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


Скачать книгу