Angular.js für Azubis

von Patrick Bédat, 9. März 2014

Angular zu erlernen ist aufgrund der steilen Lernkurve auch für erfahrene Entwickler keine einfache Aufgabe.
Für Auszubildende ist der Umgang mit angular gleich doppelt schwierig: Steile Lernkurve gepaart mit absoluter Freiheit funktioniert zwar,
führt bei Code Reviews aber zu hoher Frustration.

So ergeht es auch gerade unserem Auszubildenen Michael. Nicht nur, dass er sich im ersten Lehrjahr befindet, nein auch Patterns, Paradigmen und Datenstrukturen sind ihm völlig Fremd. Deshalb verstreut er auch nur zu recht die Geschäftslogik munter zwischen Controllern und allen anderen Komponenten.

Ich habe selbst immer wieder erlebt, welche Wunder die Lektüre von Quellcode anderer Entwickler wirken kann und möchte mit dieser gebloggten Coding-Session meinem Azubi und hoffentlich auch anderen Einsteigern eine kleine Hilfestellung bieten, angular.js Apps richtig zu strukturieren.

Ausgangssituation

Michael soll ein Projekt in angular.js umsetzen. Wir lassen ihn dabei zunächst so viel Geschäftslogik, wie möglich, auf dem Client umsetzen, damit er sich nicht um weitere Technologien Gedanken machen muss. Ein Framework ermöglicht es ihm Datensätze in CRUD Manier zu speichern, zu lesen und zu löschen.

Momentan sieht das grobe Datenmodell der Anwendung so aus:

UML

Michael sollte dafür sorgen, dass die Testfälle eines Projekts als Tests einem Test-Cycle zugeordnet werden können:

screen1

Die Testfälle zur Linken können über einen Pfeil-Button als Test dem aktuellen Test-Cycle zugeordnet werden. Diese Tests können ebenfalls über einen Pfeilbutton wieder wieder aus dem Test-Cycle entfernt werden.

Template

Werfen wir zunächst mal einen Blick auf das Template:


— Was soll ich groß dazu sagen? Nichts besonderes dabei – nur standard Direktiven und keine Zauberei.

Controller

Bei Initialisierung wird zunächst mit dem GetCycle Service ein Test-Cycle abgerufen. Anhand der Tests im Test-Cycle werden die verfügbaren Testfälle dem $scope zugeordnet. —

Der Controller vermittelt zwischen dem Template und dem Model mit Hilfe folgender Schnittstelle:

  • AssignTestcase
    Weist dem Cycle den aktuell selektierten Testfall zu
  • Event: cycle:test:added
    Wird ein Test dem Cycle hinzugefügt, wird dieser Event ausgelöst.  Der Controller entfernt daraufhin den selektierten Testfall aus der Liste der zur Verfügung stehenden Testfälle
  • Event: cycle:test:remove
    Wird ein Test wieder aus dem Cycle entfernt wird dieser Event ausgelöst. Der Controller fügt dann den Testcase, der dem Test zugordnet ist, wieder der Liste der zur Verfügung stehenden Testfälle hinzu.
  • Save
    Speichert die Änderungen am Cycle ab

Models

Die Models sorgen dafür, dass wir unsere Daten mit Respekt behandeln. Sie bieten koordinierte Zugriffe auf unsere Testfälle, Tests, Cylces und sorgen z.B. für die korrekte Erstellung von Tests. Häufig verwenden Models den $rootScope dazu um Ereignisse abzusetzen, auf die Controller wiederum reagieren können.

SelectableCollection


— Mit dieser Collection kann jeweils immer ein Item (z.B. Tests oder Testfälle) selektiert werden dann entfernt werden. Nachdem ein Item entfernt wurde, wird das nächste in der Liste selektiert. Beim hinzufügen und entfernen setzt diese Collection außerdem Events in den $rootScope ab.

CycleModel

Dieses Model nutzt auch die SelectableCollection, um die Tests zu verwalten. Mit dem Model können auch Tests erstellt werden. Diese werden hier vereinfacht durch das zuordnen eines Testfalls erzeugt. —

Services

In den Services befindet sich Geschäftslogik, die sich weniger mit Datenstrukturen und Zuständen beschäftigt. Da wird beispielsweise mit anderen APIs oder dem Backend kommuniziert, es werden Daten transformiert oder Models instanziert.

GetCycle

Dieser Service ruft den gewünschten Cylce, alle Tests und Testfälle aus dem Backend ab. Danach wird der Cycle mit den zugeordneten Tests ausgestattet und jedem Test wird sein referenzierter Testfall zugeordnet.

Diese komische Konstruktion mit dem „_“. Das gehört zu einem meiner absoluten Lieblings-Frameworks: Underscore


 GetTestcasesAvailableToCycle

Die Testfälle, die dem Cycle bereits zugeordnet wurden, sollen nicht für den Cycle zur Verfügung stehen: —

GetTestcasesByProject

Wie der Name schon sagt:



 

Zusammenfassung

Ich hoffe ich konnte mit dieser kleiner Coding-Session ein paar Aha-Effekte bei euch generieren. Den gesamten ausführbaren (z.B. cd build/ && xsp) Code findet ihr übrigends hier:

https://github.com/pbedat/xAmine.explained

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *