Angular für GitHub Pages mit JavaScript – Kurs

Diese Weiterbildung vermittelt die Entwicklung von Frontend-Webanwendungen mit dem Framework Angular, speziell mit Blick auf die Veröffentlichung über GitHub Pages. Ergänzend werden die JavaScript-Grundlagen aufgebaut, die für professionelle Angular-Entwicklung notwendig sind, sowie ein Einblick in die plattformübergreifende Entwicklung mit Flutter und fortgeschrittene Techniken mit React vermittelt. Am Ende steht die Fähigkeit, komponentenbasierte, interaktive Webanwendungen selbstständig zu konzipieren und umzusetzen.

Die Weiterbildung gliedert sich in vier Themenblöcke, die von den JavaScript-Grundlagen über die Angular-Entwicklung bis zu ergänzenden Einblicken in weitere Frontend-Technologien führen. Angular für GitHub Pages: Im Zentrum steht der Aufbau komponentenbasierter Webanwendungen mit Angular, die sich für die Veröffentlichung über GitHub Pages eignen.

• Aufbau und Struktur von Komponenten in Angular
• Arbeiten mit dynamischen Templates
• Einsatz von Services und Dependency Injection
• Nutzung von Input Properties und Data Binding
• Entwicklung eigener Custom Events mit Output Properties
• Konfiguration von Routing und Navigation innerhalb der Anwendung
• Aufbau von Reactive Forms mit Validierungslogik

Grundlagen von JavaScript und TypeScript: Dieser Block legt das sprachliche Fundament, auf dem die Angular-Entwicklung aufbaut.

• Einbinden und Laden von JavaScript in Webseiten
• Variablen, Syntax und grundlegende Datentypen
• Erstellen und Aufrufen eigener Funktionen
• Ablaufsteuerung mit if-else und switch
• Schleifenkonstrukte wie for und while
• Arbeiten mit Arrays und deren Methoden
• DOM-Grundlagen, Ereignisse und Event-Handling
• Grundzüge der Typensicherheit in JavaScript und TypeScript

Mobile Entwicklung mit Flutter: Ergänzend wird ein Einblick in die plattformübergreifende App-Entwicklung vermittelt.

• Einrichtung der Flutter-Entwicklungsumgebung
• Aufbau von Widgets und einfachem UI-Design
• Einsatz von State Management mit Provider
• Routing und Navigation in mobilen Anwendungen
• Formulare und deren Validierung
• Anbindung von HTTP-Requests und APIs
• Datenpersistenz mit SQLite
• Grundlagen von Testing und Debugging

Erweiterte Techniken mit React: Der letzte Block stellt React als weiteres verbreitetes Frontend-Framework vor und arbeitet die konzeptionellen Unterschiede zu Angular heraus.

• Einrichtung der React-Entwicklungsumgebung
• Aufbau von Komponenten und Umgang mit Fehlermeldungen
• Arbeiten in einer React-Testumgebung
• Entwicklung von Formularen in React
• Anbindung von APIs an React-Komponenten
• Zustandsverwaltung mit Redux
• Routing in React-Anwendungen

Über alle Blöcke hinweg entstehen praktische Übungsanwendungen, die zunehmend komplexer werden: von einfachen Angular-Komponenten über interaktive Formulare bis zu kleinen Anwendungen, die sich auf GitHub Pages veröffentlichen lassen. Die Gegenüberstellung von Angular, Flutter und React am Ende der Weiterbildung schärft zudem das Verständnis dafür, welches Framework sich für welchen Anwendungsfall eignet. Als durchgängiger Praxisstrang entsteht parallel zu den vier Blöcken eine kleine Beispielanwendung, an der sich folgende Teilaufgaben bearbeiten lassen.

• Aufbau einer ersten Angular-Komponente mit statischem Inhalt
• Erweiterung der Komponente um dynamische Daten aus einem JavaScript-Objekt
• Einbau eines Formulars mit Reactive-Forms-Validierung für Nutzereingaben
• Konfiguration eines zweiten Ansichtsbereichs über Angular-Routing
• Veröffentlichung eines Zwischenstands der Anwendung über GitHub Pages
• Fehlersuche in einer absichtlich fehlerhaften Beispielkomponente
• Umsetzung derselben kleinen Oberfläche testweise als Flutter-Widget
• Vergleich der Flutter-Umsetzung mit der ursprünglichen Angular-Lösung
• Aufbau einer einfachen React-Komponente mit vergleichbarer Funktion
• Gegenüberstellung von State-Management-Ansätzen in Angular, Flutter und React
• Dokumentation der eigenen Entscheidungen für die gewählte Umsetzung
• Abschließende Präsentation der veröffentlichten GitHub-Pages-Anwendung

Dieser rote Faden sorgt dafür, dass die einzelnen Technologien nicht isoliert bleiben, sondern anhand derselben kleinen Anwendung direkt miteinander verglichen werden können.

Der Kurs richtet sich an Personen, die eine Tätigkeit in der Frontend-Webentwicklung anstreben oder ihre bestehenden Kenntnisse in Angular, JavaScript, Flutter und React gezielt erweitern möchten.

• Berufseinsteigende mit erstem HTML/CSS-Wissen, die in die Frontend-Entwicklung wechseln möchten
• Entwickler:innen, die Angular als zusätzliches Framework erlernen möchten
• Fachkräfte mit Interesse an plattformübergreifender App-Entwicklung
• Personen, die JavaScript-Grundlagen praxisnah auffrischen oder vertiefen möchten

Der Kurs kombiniert theoretische Einführungen mit praxisorientierten Übungen und Projekten, in denen die vorgestellten Frameworks direkt angewendet werden. Der Wechsel zwischen Angular, JavaScript-Grundlagen, Flutter und React ermöglicht es, Gemeinsamkeiten und Unterschiede der Technologien unmittelbar am eigenen Code nachzuvollziehen.

Die Weiterbildung führt in kompakter Form von den JavaScript-Grundlagen bis zu vertieften Angular-Kenntnissen und ergänzenden Einblicken in Flutter und React. Der modulare Aufbau erlaubt eine schrittweise Steigerung der Komplexität der bearbeiteten Anwendungen.

Der Kurs schließt mit einem trägerinternen Zertifikat beziehungsweise einer Teilnahmebescheinigung zu Angular mit Zusatzqualifikation JavaScript sowie Flutter ab. Ein staatlich geregelter Abschluss ist nicht Bestandteil der Weiterbildung.

Angular gehört zu den am weitesten verbreiteten Frameworks für komponentenbasierte Webanwendungen und wird in vielen Unternehmen für größere, wartungsintensive Frontend-Projekte eingesetzt. Wer die zugrundeliegenden JavaScript- und TypeScript-Konzepte versteht, kann sich in Angular-Projekten schneller orientieren als bei einem rein oberflächlichen Frameworkwissen. Der zusätzliche Einblick in Flutter und React erweitert den Blick über Angular hinaus und macht deutlich, wie sich unterschiedliche Frontend-Ansätze in der Praxis unterscheiden. Das ist besonders wertvoll für Berufseinsteigende, die noch nicht wissen, auf welches Framework sich ihre spätere Spezialisierung konzentrieren wird. Die im Kurs entstehenden Übungsanwendungen, die sich über GitHub Pages veröffentlichen lassen, liefern zudem ein konkretes, öffentlich zugängliches Arbeitsergebnis, das sich im Bewerbungsprozess als Referenzprojekt einsetzen lässt – ein Nachweis dafür, dass die erlernten Konzepte nicht nur verstanden, sondern auch in lauffähigem Code umgesetzt wurden. Da dieselbe kleine Anwendung im Kursverlauf mehrfach in unterschiedlichen Frameworks umgesetzt wird, entsteht außerdem ein unmittelbares Gefühl dafür, wie sich Angular, Flutter und React in Struktur, Aufwand und Denkweise tatsächlich unterscheiden – ein Vergleich, der sich aus reiner Dokumentationslektüre kaum in derselben Klarheit ergibt.