Monat: Januar 2017

Selektoren

Ein Selektor sollte immer unique sein. Tags wie z.B. „<other>“ sollten nicht genutzt werden, da es sehr allgemein ist und in der Zukunft ggf. ein Standard-Tag von Angular, HTML oder anderen Dritt-Party-Packages werden könnte. Da dies zu verschiedenen Problemen führen würden, bietet es sich an einen Prefix für die Anwendung festzulegen und diesen überall voranzustellen: <myApp-other> (oder kürzer: <ma-other>)

Neue Komponente anlegen

Zum Anlegen neuer Komponenten empfiehlt es sich auf die angular cli zurückzugreifen.
Mit dem Befehl

ng generate component <NAME>

wird die Komponente in einem neuen Ordner angelegt, inkl. aller notwendiger Dateien (.ts, .html, .css und .spec.ts).

Zusätzlich wird die Komponente automatisch im Modul (app.module.ts) importiert und damit automatisch anderen Komponenten zur Verfügung gestellt.

Die Befehle (generate, component, …) können auch abgekürzt werden:
generate => g
component => c

Wer keinen extra Unterordner und sowohl das CSS als auch das Template inline erstellen möchte, kann auf folgenden Befehl zurück greifen:

ng g c —flat —inline-style —inline-template

—flat => kein Unterodner
—inline-style (Abkürzung: -is) => inline CSS
—inline-template (Abkürzung: -it) => inline Template

Dynamisches HTML(-Elemente) und Stringinterpolation

Wer mit dynamischen HTML-Elementen und Stringinterpolation arbeitet wird früher oder später auf das Problem stoßen, dass Element-Attribute (z.B. „attr.data-target“) nicht mit normaler Stringinterpolation arbeiten können.

Szenario: Per Klick auf einen Link soll ein PopUp aktiv werden (Quelle: bootsnipp.com)

<!-- zu klickender Link -->
          <div class="row">
              <div class="col-md-12">
                  <a href="#_{{ index }}" class="play" title="Play video" data-toggle="modal" [attr.data-target]="'#playerpopup_' + index"></a>
              </div>
          </div>

<!-- PopUp  -->
      <div id="popup_{{ index }}" class="modal fade in" role="dialog">
          Foo
      </div>

Gut zur erkennen:
Im Link wird das Attribut „data-target“ explizit mit

[attr.data-target]="'#playerpopup_' + index"

angesprochen.

Die Id des PopUps wiederum wird normal via Stringinterpolation gesetzt:

id="videoplayerpopup_{{ index }}"

„index“ ist dabei lediglich ein Counter, der via ngFor in die Komponente hineingereicht wird.

Einbinden der Youtube-/Dailymotion-iFrame-API

Zum Einbinden der Youtube- und/oder Dailymotion-iFrame-API gibt es schöne Dokumentation (hier und hier). Die Herausforderung bei der Einbindung dieser APIs in Angular 2 ist, dass immer erst die eigentlichen APIs (im DOM) geladen werden müssen und erst im Anschluss darauf basierend die entsprechenden Objekte der Video-Player erstellt und initialisiert werden können.

Wie das gemacht wird kann direkt in den entsprechenden Repos auf GitHub eingesehen werden:

(Der Code darf gerne weiterverwendet oder erweitert und genutzt werden)

Laden von umgebungsabhängigen Konfigurationsdateien

Wer vor dem eigentlichen Laden der Angular-Anwendung Werte basierend auf der aktuellen Umgebung („development“, „production“, …) laden möchte, kann das u.a. mit der in diesem Git-Beitrag zur Verfügung gestellten Config-Klasse relativ einfach tun.
Laden von umgebungsabhängigen Konfigurationsdateien weiterlesen