Angular Js – Direktiven / Direktive Scope

AngularJs wird als Framework im Frontend-Bereich immer populärer. Durch die Wiederverwendbarkeit von Modulen mithilfe von Direktiven und deren definierten Geltungsbereichen ( Scope ) ist es möglich, neue Komponenten Schritt für Schritt in Projekte einbauen zu können.

 

Dieses Baustein-Prinzip macht paralleles Arbeiten im Team nicht nur einfach, es vermeidet zudem auch das Schreiben von repetitivem HTML, da es den Code eher „beschreibt“ als ihn auszuschreiben. Darüber hinaus ist es leicht testbar.

 

Direktiven können HTML-Templates, DOM-Logik oder Funktionalität sein, die sich direkt in der jeweiligen Direktive beschreiben bzw. auf ausgelagerte Templates (templateUrl) verlinken lassen.

DOM Manipulationen werden einfach in der Link Option hinterlegt und stören damit keine anderen Bereiche in der Applikation. Funktionalitäten lassen sich durch die Controller Option hinzufügen.

Durch Direktiven ist es also sehr einfach, abgeschlossene Module mit Funktionalität zu erstellen. Mit diesen interaktiven Komponenten lassen sich neue Elemente – Attribute oder Klassen – via Direktiven in das DOM ( Document Object Model ) einbetten. Mittels Auslagerung von wiederverwendbaren Templates und Interaktivität ist es möglich, große Applikationen lesbar zu halten.

 

AngularJs behandelt Interaktivität / Eingriffe ins DOM als native Komponenten von HTML. Durch die Link Option lassen sich DOM Manipulationen und Funktionalität direkt an die Direktive linken, wohingegen JQuery als eine weitere nicht so leicht zuzuordnende Ebene über der Applikation liegt.

 

Aufbau von Direktiven

 

Direktiven können bei ihrer Erstellung mit der Option restrict auf Elemente, Attribute oder Klassen beschränkt werden

restrict: ‚AE‘ ( Element, Attribute ) ist dabei default, kann jedoch spezifiziert werden.

 

A – Attribute

 

Durch transclude bleiben Child-Elemente für die Direktive benutzbar. Mit der Hilfe von ng-transclude kann die Direktive bestimmen wo die Child-Elemente dargestellt werden.

 

 

 

Dies würde hier das <p> Tag nicht nur nicht ersetzen, sondern auch den {{ name }} Property des example Controllers darstellen. Transclude ist also nur bei recht einfachen Darstellungen von Strings zu empfehlen.

 

E – Element

 

 

C – Class

 

 

Scope

In Angular erben Direktiven im selben Geltungsbereich die Logik und Funktionalität des Controller-Scopes by default. Um diese Scope-Hierarchie zu unterbrechen, bietet AngularJS die Möglichkeit innerhalb der Direktiven scopes zu definieren.

 

Best Practice:

Die scope Option ermöglicht es, gekapselte Geltungsbereiche in Komponenten zu erstellen um diese innerhalb der App wiederverwenden zu können.

 

Die scope Option:

HTML

 

Controller

 

Direktive

 

 

Es ist also möglich, Properties vom Parent-Scope in den Direktiven zu benutzen,

damit diese wiederverwendbar bleiben, da man sich nicht darauf verlassen kann, dass der Parent Scope unverändert bleibt. Zu diesem Zwecke erlaubt es Angular aliase dafür Properties zu erstellen.

 

Erklärung des oberen Code-Beispiels:

Der Controller ‚exampleCtrl‘ enthält das Property $scope.data, das sich ganz einfach durch ein selbst definiertes Attribut innerhalb des <my-directive scopeinfo=“data“></my- directive> Direktiven-Elements einfügen lässt. Somit wird das scopeinfo=’parentproperty‘ in den Direktiven Scope übergeben.
Jon Snow | Aptly

YOU KNOW NOTHING JON SNOW

In Direktiven lassen sich zur Kommunikation mit der Außenwelt 3 verschiedene Optionen für den Scope einstellen.

Diese können mit @ , = , & definiert werden und funktionieren wie folgt:

‚ @ ‚     Local Scope Property – wird verwendet, um String Values von außen in die Direktive zu übergeben. Das @ gibt der Direktive die Information, dass es sich um einen String handelt, der sich automatisch updated, wenn sich der Wert im Parent-Scope ändern sollte.

Auf der anderen Seite der „Mauer“ ist {{ name }} jetzt mit {{ ontheotherside }} zu erreichen.

Und das sieht dann so aus:

 

 

Die Texteingabe in das Input-Field verändert hier den Property-value des Parent-Scope nicht da dieser nur reflektiert wird.

 

‚ = ‚     Local Scope Property – diese Option wird verwendet, um den Direktiven-Scope mit dem Parent-Scope synchroniseren zu lassen. Durch dieses Two-way-Binding ist es     möglich, Properties von außen via Child-Scope zu überschreiben und vice versa.

 

 

‚ & ‚     Local Scope Property – diese Option erlaubt das Verwenden von externen Funktionen     innerhalb des Child-Scopes wie folgendes Beispiel mit ng-click=“func()“.

Die Direktive kann also bei Änderungen auf die Funktionslogik vom Parent-Scope zugreifen.

 

Die Direktive ruft die im Parent-Scope definierte Funktion auf, die in diesem Beispiel einen Alert darstellt.

Fazit:

AngularJs bietet einfach zu benutzende, bereits vorhandene oder eigens erstellte Komponenten an. Diese erleichtert nach Einarbeitung einiges an Schreibarbeit durch den Einsatz von Direktiven, Formvalidierung und Filtern. Es bleibt interessant, was uns im Hinblick auf die Weiterentwicklungen bei Angular 2.0 noch erwartet.

The following two tabs change content below.

Oliver Flatow

Oliver ist als angehender Fachinformatiker für Anwendungsentwicklung der Aptly GmbH im technischen Bereich für die Front-End-Umsetzung der Projekte zuständig.

Neueste Artikel von Oliver Flatow (alle ansehen)

Schreibe einen Kommentar

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