• 17. Juni 2016

Mit Guards ins Routing des Angular-2-Routers eingreifen

Mit Guards können sich Angular-2-Anwendungen über Routenwechsel des neuen, seit Juni 2016 zur Verfügung stehenden Angular-2-Routers (Version 3) informieren lassen. Dabei handelt es sich lediglich um Services, welche die Lifecycle-Hooks des "BETA-Routers" ablösen. Ihre über Interfaces vorgegebenen Methoden ruft der Router beim Deaktivieren einer Komponente bzw. beim Aktivieren einer neuen Komponente auf. Der zurückgelieferte Wert bestimmt, ob der Router den angeforderten Routenwechsel tatsächlich durchführen darf. Hierzu kommen true, false oder ein Observable zum Einsatz. Letzteres erlaubt das Hinauszögern der Entscheidung, um zum Beispiel eine Web API zu konsultieren oder Rücksprache mit dem Benutzer zu halten. [Mehr]

  • 10. Juni 2016

Writing custom form controls for Angular 2 [EN]

If you want your components to work with declarative (template-driven) and imperative forms, you have to implement the interface ControlValueAccessor. The methods defined by this interface permit Angular 2 to read and set the state of the control in question. [Mehr]

  • 10. Juni 2016

Eigene Formular-Steuerelemente für Angular 2 schreiben

Sollen eigene Angular 2-Komponenten mit deklarativen (template-driven) und imperativen Formularen zusammenspielen, ist das Interface ControlValueAccessor zu implementieren. Die von diesem Interface definierten Methoden erlauben ein Abgleichen der Komponente mit dem Objektgraphen, über den Angular 2 ein Formular beschreibt. [Mehr]

  • 7. Mai 2016

Redux für OO-Entwickler kurz und bündig erklärt (Deutsche Version)

Das Muster hinter Redux hilft bei der Strukturierung komplexer GUIs, indem es den gesamten Anwendungszustand in einem zentralen Zustandsbaum (Single Immutable State Tree). Aufgrund seiner funktionalen Natur wirkt es für Entwickler aus der objektorientierten Welt häufig ein wenig mystisch. Allerdings lässt sich Redux unter Nutzung bekannter Muster eigentlich sehr einfach erklären. Hier unternehme ich mal einen Versuch dazu. [Mehr]

  • 7. Mai 2016

Redux for object oriented developers succinctly explained (English version)

The pattern behind Redux helps in structuring complex GUIs by putting the entire application state into a central data structure, the so called Single Immutable State Tree. Due to its functional nature it is often a little mystical for developers from the object-oriented world. However, Redux can be actually very easily explained using well-known (object oriented) patterns. Here, I'm taking an attempt at this. [Mehr]

  • 23. April 2016

Undo und Redo mit redux, @ngrx/store und Angular 2

Das Muster hinter Redux, welches @ngrx/store für Angular 2 implementiert, erleichtert einige Aufgaben bei der Verwaltung komplexer UIs. Unter anderem vereinfacht es Undo/Redo-Szenarien drastisch. Dieser Beitrag geht darauf anhand meines Beispiels zum Verwalten von Flugbuchungen ein.Zum Bereitstellen der gewünschten Funktionalität erhält der Zustand zwei Stacks: Der undoStack beinhaltet alle vorherigen Zustände, zu denen der Entwickler via Undo zurückkehren kann. Der Stack redoStack erhält hingegen alle rückgängig gemachten Zustände, die die Anwendung bei einem Redo wieder herstellen kann. [Mehr]

  • 19. Januar 2016

Multi-Field-Validatoren mit Angular 2

Zum Validieren von Eingaben mit Angular 2 weist der Entwickler Validatoren zu den einzelnen Controls zu. Gilt es jedoch mehrere Controls zu berücksichtigen, kann er diese auch bei ControlGroups registrieren. In diesem Fall hat der Validator Zugriff auf sämtliche Controls dieser Gruppe. [Mehr]

  • 11. Januar 2016

Parser und Formatter in Angular 2

AngularJS 1.x erlaubt mit seinem Parser-Konzept das Verarbeiten von Benutzereingaben, bevor ng-model sie über die Datenbindung ans Model zurückschreibt. Analog dazu können Formatter gebundene Daten aus dem Model formatieren, bevor sie in einem Eingabefeld aufscheinen. In Angular 2 (Beta 0) gibt es solch ein Konzept nicht - zumindest nicht auf den ersten Blick. Allerdings findet man hier das Konzept der ValueAccessors ... [Mehr]

  • 19. September 2015

EcmaScript-6-Module in TypeScript 1.5 nutzen

In der Vergangenheit musste jede geladene Seite explizit auf sämtliche direkt oder indirekt benötigte Skript-Dateien verweisen. Da das nicht nur lästig, sondern auch Fehleranfällig ist, haben einige Teams zur Automatisierung dieser Aufgabe auf Build-Prozesse zurückgriffen. Diese sind u. a. in der Lage, Verweise auf JavaScript-Dateien automatisiert in die einzelnen Seiten einzufügen.EcmaScript 6 bietet hierfür mit seinem Modul-System eine bessere Lösung. Es sieht vor, dass jede Datei ein eigenes Modul mit einem eigenen Namensraum repräsentiert. Somit sind die Zeiten vorbei, in denen Deklarationen allzu leicht den globalen Namensraum „verschmutzt“ haben. Auch die Notwendigkeit für sich selbst ausführende anonyme Funktionen wird somit umgangen. Dies führt letztendlich zu weniger Code und somit auch zu mehr Übersichtlichkeit. Ab TypeScript 1.5 kann man dieses neue Sprach-Feature nutzen. Durch eine Kompilierung in handelsübliches EcmaScript 5 lässt sich der damit entwickelte Code in jedem Browser ausführen. [Mehr]

  • 9. April 2015

Validierungsframework mit Dekoratoren und Annotationen in TypeScript 1.5

TypeScript 1.5 führt neben der Modul-Grammatik von EcmaScript-6 auch das Konzept der Dekoratoren ein. Dabei handelt es sich um Funktionen, mit denen andere Sprachkonstrukte annotiert werden können. Zu diesen Konstrukten zählen Funktionen, Klassen aber auch Eigenschaften. JavaScript ruft die Dekorator-Funktionen beim Start eines Skripts auf und übergibt an diese die annotierten Konstrukte. Der Dekorator hat dann die Möglichkeit, diese Konstrukte zu erweitern oder durch andere Konstrukte zu ersetzen. Einen Überblick zu diesem Sprachkonstrukt, das auch in Angular 2 zum Einsatz kommen wird, findet man unter [1] und [2]. Dieser Beitrag demonstriert anhand der aktuell vorliegenden Alpha-Version von TypeScript den Einsatz von Dekoratoren am Beispiel eines einfachen Validierungsframeworks. Die Idee ist es, für Klassen sowie deren Eigenschaften mittels Annotationen Validierungsregeln festzulegen. Das nachfolgende Beispiel zeigt eine solche Klasse ... [Mehr]

Weitere Schulungen

Angular Schulung: Strukturierte Einführung

Lernen Sie in dieser interaktiven Schulung anhand einer Beispielanwendung den Einsatz von Angular für Ihre erfolgreichen Projekte kennen. Sie durchdringen die Hintergründe und bauen von der ersten Minute an auf Best Practices auf.

Details

Advanced Angular: Enterprise-Anwendungen und Architektur

In dieser Schulung erfahren Sie alles für die Entwicklung großer Anwendungen mit Angular: Mono-Repos, Micro-Apps, State Management, Performance und mehr

Details

Angular: Strukturierte Einführung

Seit der Ankündigung von Angular (2+) fragen sich Entwicklungs-Teams, welche Migrationspfade für AngularJS-1.x-Anwendungen vorliegen werden. Das im Lieferumfang von Angular enthaltene ngUpgrade bietet eine Antwort darauf. Es erlaubt einen Parallelbetrieb von AngularJS 1.x und Angular (2+) und stellt somit die Grundlage für eine schrittweise Migration dar.

Details

Progressive Web-Apps mit Angular

Progressive Web Apps bieten den Komfort nativer Anwendungen, indem sie auf moderne Browser APIs, wie Service Worker, setzen. Sie sind installierbar sowie offlinefähig und nutzen Hintergrundprozesse für Datensynchronisation und Push-Notifications. Diese Schulung zeigt anhand eines durchgehenden Beispiels was sich genau hinter diesem neuen Konzept verbirgt, wie solche Anwendungen mit Angular entwickelt werden und wie Sie in Ihren Projekten von den dahinterstehenden Ideen profitieren.

Details

Reaktive Architekturen mit Angular und Redux

Dieses interaktive Seminar vermittelt, wie Sie reaktive Anwendungen mit Angular entwickeln können.

Details

TypeScript

TypeScript gibt Ihnen alle Möglichkeiten der neuen JavaScript-Standards und zusätzlich ein statisches Typsystem, das dabei hilft, Fehler möglichst früh zu erkennen. Außerdem ist TypeScript die Grundlage für Angular. In diesem interaktiven Seminar lernen Sie diese mächtige Sprache anhand einer Fallstudie kennen.

Details