Happy Angular - Kompaktes Angular Wissen zum Mitnehmen

WebStorm ist meine Lieblings-Entwicklungsumgebung für Angular. In dieser Podcastfolge möchte ich dir ein paar Tipps geben: Verwende Tastenkombinationen! Verwende LiveTemplates! Verwende Marcos!

In dieser Episode erfährst du, welchen Nutzen Caching hat und welche Arte von Caching gibt. Und was davon in Angular relevant ist und praktisch einsetzbar ist.

Meine Erfahrung ist, dass viele Softwareentwickler nicht gerne ihre Arbeit schätzen. Schätzen ist jedoch wichtig für das Projektmanagement, um die Planung und dem Kunden ein Angebot zu machen. Die Schätzung ist die Ausgangslage für die Sprint-Planung. Und die früheste Fertigstellung spielt eine entscheidende Rolle für den Kunden oder Fachbereich. In dieser Folge schauen wir uns die häufigsten Fehler rund um Schätzen an.

Eine häufige Frage, die mir gestellt wird ist: Was ist der Unterschied zwischen Observable und BehaviorSubject? Bei der Beantwortung dieser Frage ist es hilfreich, sich zu fragen, was ist der Unterschied zwischen ein Observable und eine Subject? Antworten bekommst du in dieser Happy Angular Podcast Episode.

Wie teste ich effektive, ob meine Angular Anwendung auf verschiedene Geräte optimal dargestellt wird? Wie verhält sich die Anwendung bei verschiedenen Zoom Levels und bei geänderten Standard-Schriftgrößen? Diese Fragen klären wir in dieser Happy Angular Podcast Folge.

Eine sehr häufige Frage, die mir gestellt wird ist: Wieso habe ich so viele Dateien in meinem Angular-Projekt. Es können gut und gerne über 20.000 Dateien sein. Die meisten der Dateien befinden sich in node_modules-Ordner. Ist das normal? Diese Frage beantworte ich dir in dieser Episode.

In CSS gibt es verschiedenste Einheiten. Du lernst in dieser Episode den Unterschied zwischen relativen und absoluten Einheiten. Und du bekommst eine klare Empfehlung, welche Einheiten du in deinem Projekt nutzen solltest.

Die häufigste Frage in Angular lautet: Was ist der Unterschied zwischen Promis und Observable? In dieser Folge beantworte ich dir diese Frage und gegeben dir Praxis erprobte Strategien an die Hand.

Die zweit häufigste Frage in Angular lautet: Ich bekomme den Fehler „Can't bind to 'ngModel' since it isn't a known property of 'input'“ und was jetzt? In dieser Folge beantworte ich dir diese Frage und gegeben dir Praxis erprobte Strategien an die Hand.

Die dritt häufigste Frage in Angular lautet: Was ist der Unterschied zwischen dem Constructor und ngOnInit? In dieser Folge beantworte ich dir diese Frage und gegeben dir Praxis erprobte Strategien an die Hand.

Für eine hohe Code-Qualität und eine stabilere Anwendung helfen Tests und Reviews. In dieser Folge lernst du, wie automatische Reviews die Qualität steigern sowie die Produktivität von dir oder deines Teams erhöhen.

Die viert häufigste Frage in Angular lautet: Wie kann ich HTML Code in meiner Angular Anwendung verwenden und dabei Bindings nutzen? In dieser Folge beantworte ich dir diese Frage und gegeben dir Praxis erprobte Strategien an die Hand.

An Tests spalten sich die Geister von Entwickler: Die einen halten Tests für unverzichtbar und anderen als lästig. In dieser Folge lernst du die Vorteile aber auch die Nachteile von Tests. Und warum Tests für dich ganz persönlich sinnvoll sind. Und wann du die Finger von Tests fernhalten sollst.

Die fünft häufigste Frage in Angular lautet: Wie und wann beende ich eine Subscription in Angular? In dieser Folge beantworte ich dir diese Frage und gegeben dir Praxis erprobte Strategien an die Hand.

Was sind die Unterschiede? Welche Vor- und Nachteile hat eine CSS- Library gegenüber einer Komponenten Bibliothek? In dieser Episode bekommst du einen klaren Pfad, wie du die Entscheidung für bzw. gegen eine Bibliothek triffst.

Wie kannst du Drag & Drop in deiner Angular Anwendung einsetzen? Welche Use Cases gibt es? Und was muss ich noch berücksichtigen? Das ist das Thema dieser Podcast-Folge.

In dieser Folge schauen wir uns an, wie wir in TypeScript Imports von Interfaces und ähnliche Interfaces für CRUD-Operationen vermeiden. Außerdem lästige Warnungen und Fehlermeldung ignorieren – „Ich weiß schon, was ich da tue“.

Redux hilft uns Dateninkonsistenz in unser Angular Anwendung zu vermeiden. In dieser Folge werfen wir einen Blick auf die Redux Libaries für Angular. Außerdem schauen wir uns an, wie wir Daten asynchron in den Redux Store laden können.

Mich haben zwei Hörer mit Fragen anschrieben. Da die Antworten auch für weitere Hörer spannend sind, gibt es diesmal eine Q&A Folge.

Navigation kann bei aufwändigeren Operationen oder schlechter Internetverbindung länger dauern. Wie können wir dem Benutzer mitteilen: „Ja, wir tuen schon etwas“? Wie können wir eine Ladeanimationen darstellen? In dieser Episode schauen wir uns deshalb die Events des Angular Routers an und wie wir diese Events nutzen, um eine Animation beim Laden zu erstellen.

Neben Daten sind Dateien ein häufiger Bestandteil einer Anwendung. In dieser Folge schauen wir die Möglichkeiten an, wie wir einen Dateiupload in Angular realisieren können. Wir stellen dabei die Fragen, die du dir stellen sollst, wenn du ein File-Upload umsetzten sollst.

Zahlen und Währungsfelder sind ein wichtiger Bestandteil jeder Business Anwendung. Viele Anforderungen deckt der Standard mit Input-Tag (type=number) ab. Wir schauen uns alle Features des Standards an und zeigen die Grenzen auf sowie die Überwindung dieser Barrieren.

Nach den Mircoservices sind Mirco-Frontends das aktuelle Hype-Thema. Wir beleuchten in dieser Folge die notwendige Entwicklung von Monolith zum Mirco-Frontends. Dabei werden auf die Chancen und Risiken eingegangen. Die Podcast Folge ist durch meinen Vortrag auf DOAG Konferenz inspiriert: WebComponents – Wiederverwendbarkeit über Frameworkgrenzen hinaus

Praktische Hilfestellung für einen besseren Programmcode. Der Titel der Episode ist an das Buch „Weniger schlecht programmieren“ von Kathrin Passig und Johannes Jander inspiriert. Wir gehen auf die perfekte Namensgebung, Regeln für gute Methode und SOLID Prinzipen ein.

Was sind die 6 größten Kostenfaktoren eines Projekts? Was kann jeder einzelne machen, um diese Faktoren zu minimieren? Wir gehen außerdem darauf ein, welche Aufgabe ein Frontend-Entwickler hat. Und wie sich die Digitalisierung auf den Frontend-Entwickler auswirkt.

Lange Listen führen in Browser zu Performance Probleme und überfordern den Nutzer. Neben dem Pagination und Infinite Scrolling erlaubt uns das virtuelle Scrolling beliebig große Datenmengen performant in Webseite zu platzieren. In dieser Folge schauen wir uns das Feature von Angular CDK (ab Version 7) an: Das virtuelle Scrolling. Neben den Einstellungen betrachten wir Vorteile und Nachteile. Als alternative Strategien werden Pagination und Infinite Scrolling aufgeführt.

Externe Daten sind ein wichtiger Bestandteil jeder Angular Anwendung. Die Kommunikation zu einer Schnittstelle erlaubt uns das HttpClientModule von Angular. Ein REST-Aufruf ist in einer Komponente, Service und Resolver möglich. Wir schauen uns in dieser Happy Angular Podcastfolge die verschiedenen Varianten an. Außerdem machen wir einen Ausflug zu RxJS Observerables.

Durch responsive Webseiten, Hochauflösende Displays und unterschiedliche Internet-Geschwindigkeiten steigen die Anforderungen das perfekte Bild zu laden. Früher bestanden hier nur wenige Optionen. Wir schauen uns an, welche Technologien heute bereitstehen hier das Benutzererlebnis zu steigern.

Du kannst deine Angular Anwendungen auf verschiedene Wege strukturieren. Für dich sind 5 Wege dein Projekt zu ordnen. Jede Architektur hat seine Vor- und Nachteile. Wir gehen außerdem darauf ein, wie so der Angular Monolith ein Mythos ist.

Mit nur einen Tipp kannst du deine Wahrscheinlichkeit für ein Bewerbungsgespräch steigern. Ich habe selbst die Erfahrung gemacht und konnte damit meine "Rate" von 20% auf 90% steigern. Außerdem wie präsentiere ich mich so auf Xing, dass mich mehr Leute finden.

Viel, hilft viel? Medikamente können hilfreich sein, keine Frage. Aber nehme ich blind jede Pille? Wohl kaum! Aber bei Liberias greifen wir gerne beherzt zu und beachten kaum die verbundenen Risiken und Nebenwirkungen. Diese Folge bring Licht ins Dunkele.

Der Einstieg in Angular ist leicht – jedoch gibt es viele verschiedene Varianten, die an das gleiche Ziel führen. Das ist auch bei den Schleifen nicht anderes. Wir schauen uns in dieser Podcastepisode verschiedene Varianten von Schleifen an.

Um Daten vor der Darstellung an den Benutzer zu formatieren, nutzen wir in Angular Pipes. Pipes erlauben es, die Daten im Template zu transformieren, ohne die Ausgangsdatensatz zu verändern. Ein typisches Beispiel für die Nutzung von Pipes ist die Ausgabe eines Datums. Das interne Objekt-Property oder Variable haben den Datentyp Date und der Benutzer erwartet Tag/Monat/Jahr. Ggfs. beinhaltet das Datum auch die Uhrzeit, die für eine andere Stelle relevant ist. Wir sehen dabei, dass die Formatierung für den Anwender kann ein verlustbehaftetes Verfahren sein.

Ein Service in Angular ist eine TypeScript Klasse mit einer bestimmten Aufgabe. Der Gegenstand eines Service kann die Bereitstellung von Daten, die Kommunikation zwischen Komponenten und anderen Objekten sowie die Wiederverwendbarkeit von Funktionen sein.

Zustandsänderungen sind komplex: Wann muss eine Änderung durchgeführt werden? Warum muss eine Anpassung gemacht werden? Wie sollen die Daten modifiziert werden? Neue bzw. Zusätzliche Anforderungen erschweren saubere Zustandsänderungen – sind aber typisch und häufig. Redux sorgt eine Vorhersagbarkeit für die Zustandsveränderung und das ist das Thema dieser Podcast Folge.

In dieser Happy Angular Podcast Folge schauen wir uns Direktiven an. Eine Direktive sind Befehle, die das Aussehen des Templates anpassen. Angewendet kann eine Direktive auf ein HTML Element oder einer Komponente. In Angular gibt es drei verschiedene Arten von Direktiven: Attribute Direktive, strukturelle Direktive und eine Komponente. Neben den Standard-Angular Direktiven können wir auch eigene Direktiven schreiben.

Der Unterschied zwischen HTML Attribute und DOM Property ist das Thema dieser Happy Angular Podcast Folge. Dabei lernen wie wir gezielt die HTML Attribute bzw. DOM Property setzen.

Bindings erlauben die Kommunikation zwischen HTML Datei und TypeScript Klasse. In dieser Folge des Happy Angular Podcasts schauen wir uns String Interpolation, Property Binding, Event Binding, Two-Way Binding und drei weitere Bindings an. Du erhältst drei wertvolle Tipps, wie Fehler mit Bindings vermeidest und einfacher mit leeren Werten wie null und undefined umgehen kannst.

Als ersten Grundbaustein in Angular schauen wir uns heute die Komponente an. Die Komponente ist ein elementarer Baustein und definiert den Inhalt deiner Anwendung. Jede Komponente besteht aus zwei Bestandteile: Template und Logik. Das Template beantwortet mit einer HTML Datei die Frage, wie einen Komponente aussehen soll. Das Verhalten und der Inhalt wird durch eine TypeScript Klasse definiert (Logik). Es gibt grundsätzlich zwei Arten, wie eine Komponente verwendet werden kann: Wiederverwendbar und spezifisch. In einer wiederverwendbaren Komponente wird das Aussehen und Verhalten festgelegt und der Inhalt von außen mit Hilfe von Inputs gesetzt. In einer spezifischen Komponente wird darüber hinaus auch der Inhalt definiert.

Wir schaffen uns einen Überblick über das Angular Framework und auch über die nächsten Episoden: Die Komponente ist ein elementarer Baustein einer Angular Anwendung und definiert den Inhalt deiner Anwendung. Eine Direktive sind Befehle, die das Aussehen des Templates anpassen und kann auf ein HTML-Element oder Komponente angewendet werden. Für die Bereitstellung von wiederverwendbaren Methode oder zur Datenhaltung werden Services in Angular verwendet. Der Angular Router ermöglicht die Seitennavigation ohne Server-Request. Durch Module ist es möglich, die Angular Anwendung in Sinnabschnitte zu gliedern. In Angular gibt es zwei Wege, wie Formulare aufgebaut werden können: Template-Driven-Forms und Reactive Forms. Durch Pipes können wir Rohdaten von der Ausgabe formatieren, ohne die Rohdaten anzupassen.

In dieser Podcast-Episode lernst du die Angular CLI als Werkzeug für die Codegenerierung und als Build-Tool kennen. Wir betrachten außerdem NodeJS und die Verwaltung der Abhängigkeiten mit NPM. Du bekommst klaren Einstieg, welche Software du benötigst, um mit der Angular Entwicklung loszulegen. Außerdem werden wir dabei auch gleich deine erste Angular Anwendung erstellen und das alles in ein paar Minuten. Hör dir gleich diese Folge des Happy Angular Podcast an.

Warum gibt es diesen Podcast? In diesem Podcast bekommst du kompaktes Wissen über Angular. Die Episoden sind kurzgehalten, damit du diese auf dem Weg zu Arbeit hören kannst. Wir reden über Konzepte und du bekommst den Programmcode in den Shownotes. Der Podcast ist ideal für dich, wenn du Entwickler bist oder sein möchtest. Wir beginnen mit den Grundlagen und werden dann auch fortgeschrittener Themen uns anschauen. Welche Themen wird es geben? Jede Woche behandeln wir spannende Themen rund um Angular, TypeScript, RxJS / Observables und Redux. Wer veröffentlich diesen Podcast? Ich bin Sebastian Dorn – leidenschaftlicher Angular Entwickler und Trainer. Das Wissen zu Angular gebe ich in Schulungen und in Kundenprojekten weiter. Du findest mich auf Konferenzen und hier im Happy Angular Podcast.