Erstellen Der Benutzeroberfläche Der Angular-app Mit Eduvision

Published Oct 09, 20
3 min read

Angular-buch → Entwickeln Sie Moderne Apps Für Web

Einstieg in Angular: Das sind die wichtigsten Toolst3n.de Vue vs. Angular: Die All-in-One Plattform und der Open Source Baukastenhosteurope.de




Das Angular Framework führt nun dazu noch den Begriff der Components ein. Unter Komponenten versteht man Elemente, welche einen eigenen Sub-Dom-Tree aufbauen. Hierbei können wir optional entschieden, ob wir hierfür einen echten Shadow-DOM aufbauen wollen. Wenn Ihr eure AngularJS 1 Anwendung heute schon näher an die Component Architektur anlehnen wollt und so für eine Migration näher an Angular Code zu sein, solltet Ihr euch meinen Artikel über den AngularJS Component-Helper ansehen.

fügen Elemente hinzu oder entfernen sie, z.B. ngIf, ngSwitch und ngFor Attribut-Direktiven - verändern nur das Aussehen oder Verhalten von DOM-Elementen, z.B. ngStyle und ngClass Das Herzstück einer Angular-Anwendung. Eine Komponente verknüpft ein Template mit einer JavaScript-Klasse über ein eigenes Element. import Component from '@angular/core'; @Component( selector: 'pizza-root', template: ` Inhalt der Komponente ` ) export class AppComponent // Logic here Die Eigenschaft selector stellt den zur Komponente gehörenden HTML-Tag als CSS-Selektorregel dar.

Wie schon erklärt sollten strukturelle Direktiven immer dann verwendet werden, wenn der DOM verändert wird, sprich Elemente hinzugefügt oder entfernt werden sollen. Ein Beispiel dafür ist die ngIf-Direktive. anzeigen verstecken Wir sind Ihr Pizza-Dienstleister! Die Variable isVisible wird als Boolean-Wert interpretiert ( angular framework ).

Angular-buch → Entwickeln Sie Moderne Apps Für Web

Wie wir bereits gelernt haben, gibt es Event- und Property-Bindings in Angular. Ihre Anwendung kann durch die Verwendung von Klammern - () und [] - gesteuert werden. Im Falle einer strukturellen Direktive nutzen wir hierbei das *-Symbol. Das Asterisk-Zeichen stellt die Kurzschreibweise einer strukturellen Direktive dar. Sie stellt auch automatisch das Data-Binding her.

Das template-Tag gibt an, dass nachfolgend ein Angular-Template folgt, welches über die Bedingung entfernt oder hinzugefügt wird. Intern wandelt Angular jedoch immer die Kurzschreibweise in die ausführliche um! Wie der Name schon sagt, werden diese Direktiven als Attribut an ein DOM-Element geschrieben und können dessen Aussehen und/oder Verhalten verändern. Als einfaches Beispiel setzen wir die Schriftfarbe eines Elementes via einer Attribut-Direktive.

Unser Beispiel würde jedoch mit ngStyle, wie folgt aussehen. Wir sind Ihr Pizza-Dienstleister! Als kleines Beispiel schreiben wir nun für das Ändern der Schriftfarbe eine eigene Direktive. import Directive, ElementRef, Renderer from '@angular/core'; @Directive( selector: '[redFont]' ) export class RedFontDirective constructor(el: ElementRef, renderer: Renderer) // el - angular lernen.nativeElement.style.color = 'red'; renderer.setElementStyle(el.nativeElement, 'color', 'red'); Code zur Definition einer eigenen Direktive Eine Direktive wird über den Decorator @Directive definiert.

Typescript Lernen: So Programmiert Man Typescript

Erstellen von auf Angular basierten Single-Page-Apps mit Microsoft Graph -  Microsoft Graph   Microsoft Docsdocs.microsoft.com SVG-Komponenten mit Angulartrion.de


Im Unterscheid zur @Component wird der Selektor in [] geschrieben, wodurch ein Attribut-Name definiert wird. Im Beispiel werden zwei wichtige Bestandteile für die Arbeit mit Direktiven der Angular-Bibliothek genutzt. Beachte: Lege wiederverwendbare Bestandteile in *shared*-Ordner ab. Über eine *index.ts* kannst du alle im Ordner enthaltene Funktionalitäten gebündelt anderen Anwendungsteilen freigeben.

ElementRef - erlaubt Zugriff auf das verbundene DOM-Element Renderer - Framework zum performanten Ändern von DOM-Elementen Es ist natürlich möglich das DOM-Element direkt selbst zu ändern. Das kann jedoch in vielen Situationen auf Kosten der Anwendungs-Performance passieren. Der Renderer ermöglicht beispielsweise das Rendern an Web-Worker auszulagern. Damit eine Direktive oder Komponente überhaupt in einem Teil unser Anwendung genutzt werden kann, muss diese dem entsprechenden Modul, indem sie benutzt werden soll, bekannt gemacht werden.

ANGULAR 7 einfach lernen Teil #1 - Einleitung in die Reihe 👍 [TUTORIAL] -  YouTubeyoutube.com Cool Web Apps Trainingtoedter.com


Somit kann eine klare Abgrenzung geschaffen werden, welche Direktive wo benutzt werden kann und auch Naming-Kollisionen vermieden oder geschickt als Konfiguration genutzt werden. import RedFontDirective from './shared/red-font.directive'; @NgModule( declarations: [ AppComponent, RedFontDirective ], // ... ) export class AppModule Code für die Verwendung von Direktiven in einem Modul Am Ende packen wir die Direktive - mit Hilfe des festgelegten Attributsnamen - an einen DOM-Knoten mit Text.

Navigation

Home