AngularDart Part 3 -- das Verständnis vertiefen

Im ersten Teil dieser Serie haben wir uns dem  Framework AngularDart angenähert, im zweiten Teil die Voraussetzungen in Visual Studio Code geschaffen, um aktiv zu testen.
Moderne Websiten sind ja bekanntlich viel mehr als eine Ansammlung von Html Codes.
Während früher JavaScript, zum Einbau von Funktionalität jenseits von Html genutzt wurde, sind die Ansprüche heute grösser. Ein Angular Framework soll die Entwicklung unterstützen und vereinfachen.
Die wahre Stärke liegt dabei in der Modularität des Framework's. Sie ermöglicht nicht nur eine vereinfachte Fehlersuche, auch eine verbesserte Wiederverwendbarkeit von Code.

Um Missverständnissen vorzubeugen, gleich eine sprachliche Klarstellung. Wir sprechen bei einer Website die mit AngularDart erzeugt wurde, von einer Angular App.
Während es in der Urzeit des Internets sicher weit hergeholt gewesen wäre, eine Website eine App zu nennen, ist das aktuell anders. Die enge Verflechtung zwischen Html und einer Programmiersprache (Javascript, Dart etc.) erzeugt am Schluss eine Website, die durch eine Programmlogik unterstützt wird. Eine App eben.

Module und Komponenten

Eine Angular App besteht aus mindestens einem, oft aber mehreren Modulen. Dabei hat jede Angular App mindestens das root Modul.
Der Begriff Modul verweist laut den Entwicklern auf eine  Dart compilation unit. Eine Dart Library ist zum Beispiel ein Modul.
Der nächste Begriff der in AngularDart wichtig ist: component, also Komponente. Die einfachste Variante eines root Moduls definiert die Komponente:

class AppComponent {}

Hier gleich die erste Konvention: die root Component nennt sich immer AppComponent !
Eine Komponente kontrolliert einen Teil des Bildschirms (View). Innerhalb dieser Komponente wird festgelegt, was genau diese mit dem View macht. Diese Programmlogik wird mit einer Klasse umgesetzt. Die Kommunikation mit dem View erfolgt über Klassenmethoden und Eigenschaften, ganz in der Tradition objektorientierter Programmierung.

Im Teil zwei dieser Serie haben wir ja schon den Boiler Code gesehen, den uns Visual Studio Code für AngularDart zur Verfügung steht. Schauen wir uns einmal die Ordnerstruktur an:

AngularDart Ordnerstruktur

Ordner web: main.dart ist startet unsere Angular App im Browser. index.html enthält unter anderem <my-app></my-app>
In diesem Tag "lebt" unsere App.
Wie üblich enthält die styles.css Datei eine Reihe von Styles die für unsere App gültig sind.
Ordner src: app_component.dart enthält unsere root Komponente (siehe oben). Auch hier dann wieder eine css und ein html File.
Die Ordnerstruktur zeigt den Aufbau einer AngularDart App sehr schön: Der web Ordner ist die oberste Ebene, hier startet die App, hier steht index.html.
Im Verzeichnis lib haben wir alle Files die wir brauchen. Auf der ersten Ebene unsere app_component.dart und in einem separaten Ordner die nächste Komponente der Website und die dazugehörigen Files.
Die html Files an sich sind  die Templates, das heisst eine Mischung aus normalen Html Code und AngularDart spezifischen Anweisungen.



Anhand der Ordner Struktur sieht man auch schon ansatzweise die Modularität von Angular. In einer aufwendigeren App wäre die todo_list eine Komponente unter mehreren. Ein Zugriff auf sie ist so kompakt möglich

Zusammenfassung: Eine AngularDart App setzt sich aus Modulen bzw Komponenten zusammen. Eine Komponente kontrolliert einen Teil des Bildschirms und definiert über Klassen und Programmlogik wie dieser View verwendet wird. Das html File dient als Template für die Ausgabe im Browser.
..to be continued..