AngularDart Part 5 -- template

Willkommen zum nächsten Artikel in der AngularDart Reihe.
In den letzten Teilen dieser kleinen Serie haben wir uns Zug um Zug dem Thema genährt.
Wie immer in diesem Blog aus dem Blickwinkel eines absoluten Anfängers.
Das heisst, wenig als bekannt voraussetzen, und immer davon ausgehen, das das Thema für den Leser ebenso Neuland ist, wie für mich selbst. Auf dem Lernweg braucht es aber immer wieder Erkenntnisse und kleine Erfolge um die Motivation nicht zu verlieren. Wo wir aktuell stehen:

• AngularDart Part 1 -- eine erste Annäherung
• AngularDart Part 2 -- Installation Boilerprojekt
• AngularDart Part 3 -- das Verständnis vertiefen
• AngularDart Part 4 -- erste Schritte
• AngularDart Part 5 -- template -- Du befindest Dich hier !

Komponenten

app_component.dart

Mit diesem Begriff sind wir schon in einem der letzten Artikel zu AngularDart in Berührung gekommen. Jetzt schauen wir uns das noch einmal genauer an. Um das zu tun, arbeiten wir mit unserem eigenen BoilerProjekt.

 Ich werde dieses Projekt jetzt hier nicht noch einmal posten, der Link hier führ aber zu den wichtigsten Files. Oder, noch besser, Part 2 lesen.

Wenn wir das File app_component.dart anschauen, fallen zwei Dinge auf. Erstens das Element @Component(....) und zweitens die Klasse class AppComponent.

Im Begriff AngularDart verbergen sich eigentlich zwei Begriffe. Angular, damit ist das Framework gemeint, und Dart, damit ist die Programmiersprache gemeint. Zu beiden gibt es viele gute Tutorials im Netz und die Dokumentation auf den entsprechenden Entwicklerseiten ist hervorragend.
Ein Wermutstropfen bleibt aber, das es zu AngularDart, eine Variante von Angular, vergleichsweise wenig Tutorials gibt. Aber zurück zum Thema...

@Component(...) und class AppComponent gehören zusammen. Durch eine Konvention in AngularDart ist AppComponent die  root Komponente, die Start Komponente, wenn man so will.

Wenn wir mehr mit AngularDart vertraut sind werden wir eigene Komponenten erstellen, die Struktur aber bleibt: @Component(....) und class MeineTotalCooleComponent gehören zusammen, bilden eine Einheit. In dieser root Komponente haben wir mit styleUrls: [...] einen Verweis auf die html Datei dieser Komponente.

my_Component.dart

Man kann dies so strukturieren, bei großen Projekten muss man es wahrscheinlich auch, aber es geht auch anders.

Wenn wir das File my_Component.dart unseres Boiler Projekts anschauen, sehen wir, das dort der html Code direkt in der @Component(...) aufgeführt ist.

Statt templateUrl verwenden wir "nur" template. Dabei kann unser html Code mehr als eine Zeile in Anspruch nehmen. Mit dreifachen Anführungszeichen, ''', am Anfang und am Schluss markieren wir eine grösseren html Abschnitt in unserem @Component(...template:...) Code:

my_Component.dart

Im Beispiel links haben wir einen Button definiert, ohne weiterführende Programmlogik.

Wenn wir die Änderung vornehmen und den Browser aktualisieren, sehen wir natürlich unseren Button.
Noch immer aber haben wir eine leere Klasse my_Component. Html, ob eingebettet oder in einem externen File, ist ja gut und recht, was aber bringt uns diese Klasse ?

Interpolation

Der Nutzen der Verwendung einer Programmiersprache im Zusammenhang mit html besteht darin, das wir Zugriff auf den html Code erhalten. Dieser Zugriff ermöglicht uns Änderungen, die wir mit reinem html nicht umsetzen könnten.
Wichtiges Element dabei sind die geschweiften Klammern {{..mein Platzhalter...}}. Im Fall von AngularDart je zwei zum öffnen und zwei zum schließen. Hier ein Beispiel:

my_Component.dart

Wir haben im Beispiel rechts ein Textfeld als html Komponente genommen.
Mit value= initialisieren wir dieses Textfeld.

In diesem Beispiel verwenden wir aber eine Zeichenkette, die wir in der Klasse definiert haben.
meineVariable wird anschließend mit {{meineVariable}} in den html Code integriert.

Hier sieht man auch den Vorteil von Angular. Sollten wir diese Variable an verschiedenen Stellen einsetzen, können wir sie an nur einem Ort ändern.
Das Prinzip ist aber vielseitiger. Im aktuellen Beispiel definieren wir mit meineVariable einen Text. Genau so gut könnten wir type="{{meineVariable}}" schreiben und in der Klasse definieren, was für ein Input Element im template generiert wird.

Wir haben also das Element @Component und die dazugehörige Klasse. Wichtig zu wissen ist, das die Klasse "ihre" Komponente kennt, aber nicht mehr!
Ein Versuch zum Beispiel außerhalb der Klasse Code zu schreiben, ist nutzlos bzw führt zu einem Fehler. Hier noch unser letztes Beispiel, wie es im Browser aussieht:

Im nächsten Post werden wir unser my_Component Modul um ein eigenständiges html File ergänzen.
Bis bald !