Angular-Entwicklung mit JavaScript, Vue.js & Ionic – Kurs

Moderne Webanwendungen laufen heute überwiegend als Single-Page-Anwendungen, die sich flüssig anfühlen und ohne ständige Seiten-Neuladung auskommen. Dieser Kurs führt in Angular als eines der etabliertesten Frameworks für diesen Anwendungstyp ein und ergänzt es um vier eigenständige Zusatzqualifikationen: die Programmiersprache JavaScript als technisches Fundament, die Grundlagen von HTML und CSS für die Seitenstrukturierung, eine Einführung in das Framework Vue.js als Alternativansatz sowie die mobile App-Entwicklung mit Ionic und Capacitor. Nach Abschluss können Teilnehmende Single-Page-Anwendungen mit Angular konzipieren, umsetzen und auf Wunsch auch als mobile App veröffentlichen.

Modul 1 — Grundlagen von Angular: Dieses Modul bildet das Kernstück der Weiterbildung und vermittelt die zentralen Bausteine, aus denen jede Angular-Anwendung besteht.

• Komponenten als Grundbausteine von Single-Page-Anwendungen
• Services und Dependency Injection im Angular-Ökosystem
• Routing und Navigation mit Fokus auf mehrseitige Anwendungsstrukturen
• Input Properties und Data Binding zwischen Eltern- und Kind-Komponenten
• Custom Events mit Output Properties umsetzen
• Template-Syntax und strukturelle Direktiven

Modul 2 — JavaScript für App-Entwicklung: Da Angular auf JavaScript beziehungsweise TypeScript aufbaut, vermittelt dieses eigenständige Modul die sprachlichen Grundlagen, die für die App-Entwicklung notwendig sind.

• Einführung in JavaScript im Kontext von Single-Page-Anwendungen
• Variablen, Syntax und grundlegende Datentypen
• Funktionen erstellen und aufrufen
• Document Object Model (DOM) und dessen Manipulation
• Ereignisse und Event-Handling in interaktiven Oberflächen
• Asynchrones JavaScript: Grundlagen von AJAX und der Fetch-API

Modul 3 — Vue.js Einführung und Praktiken: Als eigenständiges Zusatzmodul wird mit Vue.js ein zweites, populäres Frontend-Framework vorgestellt, das einen alternativen Architekturansatz zu Angular zeigt.

• Einrichtung eines Vue-Projekts für Single-Page-Anwendungen
• Iterationen über Listen mit der v-for-Direktive
• Bedingtes Rendering von Oberflächenelementen
• Grundfunktionen und Komponentenstruktur in Vue
• Nutzung der Computed-Eigenschaft für abgeleitete Zustände
• Arbeiten mit den Neuerungen von Vue 3

Modul 4 — HTML & CSS für Entwickler: Dieses Modul liefert das strukturelle und gestalterische Fundament, auf dem jede Angular- oder Vue-Anwendung visuell aufbaut.

• Grundlegender Aufbau von HTML-Dokumenten
• Sichtbarer Bereich (Viewport) eines HTML-Dokuments
• HTML-Elemente zur Seitenstrukturierung gezielt einsetzen
• CSS-Selektoren und ihre Spezifität
• Vererbung und Kaskade in CSS
• Das CSS-Box-Modell und dessen Auswirkung auf das Layout

Modul 5 — Mobile Entwicklung mit Ionic und Capacitor: Das abschließende Modul überträgt die zuvor erlernten Angular-Kenntnisse auf die Entwicklung mobiler Apps und schließt damit den Bogen von der Web- zur App-Entwicklung.

• Einführung in Ionic und Capacitor als Grundlage mobiler Apps
• Erstellung einer ersten App mit Ionic und Capacitor
• Navigation innerhalb einer mobilen App umsetzen
• Angular-Grundlagen im Kontext von Ionic und Capacitor anwenden
• UI-Komponenten von Ionic für native Bedienkonzepte nutzen
• App erstellen, testen und für die Veröffentlichung vorbereiten

Praxis-Block — Projektarbeit über alle Bausteine hinweg

• Eigenständige Angular-Komponente mit Input- und Output-Properties entwickeln
• Routing-Konfiguration für eine mehrseitige Single-Page-Anwendung aufsetzen
• Formular mit clientseitiger Validierung in Angular implementieren
• HTTP-Request an eine Beispiel-Schnittstelle anbinden und Antwortdaten darstellen
• Kleines JavaScript-Modul zur DOM-Manipulation ohne Framework schreiben
• Event-Handler für Nutzerinteraktionen in einer Testseite umsetzen
• Vue-3-Komponente mit v-for-Liste und bedingtem Rendering aufbauen
• Computed-Eigenschaft zur Ableitung eines abhängigen Anzeigewerts in Vue nutzen
• Responsives Layout mit CSS-Box-Modell und Selektoren für eine Beispielseite gestalten
• Bestehende Angular-Anwendung mit Ionic in eine App-Struktur überführen
• Navigation zwischen zwei App-Screens mit Ionic-Komponenten einrichten
• App über Capacitor für eine Testumgebung bereitstellen und Funktionsumfang prüfen

Die Projektarbeit führt die fünf Bausteine schrittweise zusammen: Aus der in Angular entwickelten Komponente entsteht über die Ionic-Integration eine lauffähige App-Struktur, während das Vue-Modul parallel als Vergleichsbeispiel für einen alternativen State-Ansatz dient. So lässt sich am eigenen Projekt nachvollziehen, an welchen Stellen sich Web- und App-Entwicklung technisch überschneiden und wo sie sich unterscheiden.

Der Kurs richtet sich an Personen, die eine Tätigkeit in der Web- und App-Entwicklung mit Angular, JavaScript, Vue.js, HTML und CSS sowie Ionic und Capacitor angehen oder ihre bestehenden Fachkenntnisse in diesem Bereich gezielt erweitern möchten. Durch die Kombination mehrerer Frameworks eignet er sich sowohl für den Einstieg als auch für die berufliche Neuorientierung.

• Berufseinsteiger mit Interesse an Frontend- und App-Entwicklung
• IT-Fachkräfte, die bislang mit anderen Frameworks gearbeitet haben und Angular ergänzen möchten
• Personen, die neben Angular auch Vue.js als Vergleichsframework kennenlernen wollen
• Quereinsteiger, die von der klassischen Webentwicklung in die mobile App-Entwicklung wechseln möchten
• Fachkräfte, die HTML- und CSS-Grundlagen parallel zur Framework-Ausbildung auffrischen wollen

Der Unterricht findet überwiegend im Combined-Learning-Format statt, teils ergänzt durch virtuelle Klassenzimmer-Einheiten, und wird meist in Vollzeit, teils auch in Teilzeit angeboten. Jedes der fünf Module verbindet konzeptionelle Erklärungen mit unmittelbaren Programmierübungen, sodass Angular-, Vue- und Ionic-Konzepte direkt am eigenen Code nachvollzogen werden. Praktische Übungen und eine abschließende Projektarbeit verknüpfen die einzelnen Bausteine zu einer vollständigen, veröffentlichungsfähigen Anwendung.

Die Weiterbildung ist als Kombination von fünf inhaltlich eigenständigen Modulen konzipiert. Die Gesamtdauer richtet sich nach dem gewählten Teilnahmemodus; im überwiegend praktizierten Vollzeitformat lässt sich der Stoff kompakter durchlaufen als in der teils angebotenen Teilzeitvariante.

Nach Abschluss erhalten Teilnehmende ein trägerinternes Zertifikat für die Qualifikation „Angular mit Zusatzqualifikation JavaScript, HTML & CSS" bzw. eine entsprechende Teilnahmebescheinigung. Eine externe Herstellerzertifizierung ist für dieses Bündel nicht vorgesehen; der Nachweis erfolgt über den erfolgreichen Abschluss aller fünf Module inklusive der praktischen Projektarbeit.

Angular gehört seit Jahren zu den am häufigsten in Stellenanzeigen genannten Frontend-Frameworks, insbesondere in größeren Unternehmen mit komplexen Anwendungslandschaften. Wer zusätzlich die JavaScript-Grundlagen, HTML/CSS-Fundamente sowie ein zweites Framework wie Vue.js beherrscht, kann sich flexibel auf unterschiedliche Team- und Projektumgebungen einstellen, statt an ein einziges Framework gebunden zu sein. Der Sprung von der klassischen Webentwicklung zur mobilen App-Entwicklung mit Ionic und Capacitor eröffnet zusätzliche berufliche Möglichkeiten, ohne dass eine komplett neue Sprache erlernt werden muss: Die in Angular erworbenen Komponentenkonzepte lassen sich direkt auf die App-Entwicklung übertragen. Diese Kombination aus Web- und App-Kompetenz auf gemeinsamer Codebasis ist für viele Unternehmen ein wichtiges Effizienzargument bei der Personalauswahl. Da der Kurs bei den Grundlagen von HTML, CSS und JavaScript ansetzt und erst darauf aufbauend zu Angular, Vue.js und der mobilen Entwicklung übergeht, entsteht ein durchgängiges Verständnis dafür, wie moderne Webapplikationen von der Struktur bis zur Auslieferung als App zusammenhängen.