Angular für Anfänger
Hast du beim Erstellen einer Website schon einmal gedacht, dass es doch einfacher gehen muss als nur mit HTML und CSS? Dann solltest du Angular kennenlernen – hier ein kleines Tutorial.
Angular ist ein komponentenbasiertes Framework. Das bedeutet, dass du für jede Unterseite und für wiederverwendbare Elemente eine eigene Komponente erstellst. Jede dieser Komponenten besteht typischerweise aus drei Dateien: HTML (für das Template), CSS oder SCSS (für die Styles) und TypeScript (für die Logik). TypeScript ist eine Programmiersprache, die statische Typisierung und zusätzliche Features bietet, um den Code robuster und wartbarer zu machen. Wenn du bereits JavaScript beherrschst, wirst du feststellen, dass der Einstieg in TypeScript sehr einfach ist.
Installation und Einrichtung
Um Angular zu verwenden, musst du zunächst Node.js und npm installieren. Besuche Node.js, um die neueste Version herunterzuladen und zu installieren. Npm wird automatisch mit Node.js installiert.
Installiere dann die Angular CLI mit folgendem Befehl im Terminal:
npm install -g @angular/cli
Erstelle ein neues Projekt:
ng new mein-angular-projekt
cd mein-angular-projekt
ng serve
Öffne deinen Browser und gehe zu http://localhost:4200, um dein neues Angular-Projekt zu sehen.
Grundlagen der Architektur
Angular-Anwendungen sind in Module organisiert. Das Hauptmodul ist AppModule, das andere Module und Komponenten importiert. Komponenten sind die Bausteine der UI und bestehen aus HTML-, CSS- und TypeScript-Dateien. Services und Dependency Injection helfen, den Code modular und wiederverwendbar zu machen.
Ressourcen
Ein weiterer Vorteil von Angular ist die Unterstützung von Angular Material, einer umfangreichen Komponentenbibliothek, die kostenlos genutzt werden kann. Angular Material bietet dir eine Vielzahl von vorgefertigten, anpassbaren UI-Komponenten, die dir helfen, professionelle und ansprechende Benutzeroberflächen schnell und effizient zu entwickeln
Möchtest du Angular selbst ausprobieren? Dann empfehle ich dir die Tour of Heroes von Angular. Diese Einführung zeigt dir die Grundlagen des Frameworks und führt dich Schritt für Schritt durch den Entwicklungsprozess einer einfachen Anwendung.
Hier seht ihr noch eine Website, die ich mit Angular umgesetzt habe.
(eli)
Mein eigentliches Projekt war eine Website für die Firma Physio & Sport BackUp zu programmieren.
Vorbesprechung
Im Februar traf ich mich mit meinem Kunden, um die Struktur und den Inhalt der neuen Website zu besprechen. Da sie keine konkreten Vorstellungen zum Design hatten, erhielt ich die komplette gestalterische Freiheit. Lediglich die Unternehmensfarben Blau und Gelb sollten beibehalten werden. Gemeinsam entwickelten wir die grundlegenden Inhalte und machten Fotos des Fitnessstudios.
Design mit Figma
Ich entwarf die Website mit Figma. Dafür erstellte ich zwei Layouts und schickte sie zur Auswahl an den Kunden. Nachdem sie sich für ein Design entschieden hatten, gestaltete ich alle Unterseiten entsprechend.
Umsetzung
Bei der technischen Umsetzung war ich zunächst unsicher, welche Technologie ich verwenden sollte. Da ich mit Angular bereits vertraut war und seine Vorteile kannte, entschied ich mich dafür. Meine Angular-Version auf dem Laptop war allerdings veraltet, weshalb ich zunächst ein Update durchführen musste. Dies verlief nicht reibungslos, da ich mehrere Fehler beheben musste. Mit Hilfe von Online-Blogs gelang es mir jedoch nach einigen Versuchen. Das Programmieren selbst verlief dann recht gut. Ich musste mich zwar wieder an Angular gewöhnen, kam danach aber zügig voran.
Veröffentlichung
Glücklicherweise waren bereits ein Webhost und eine Domain vorhanden, sodass die Veröffentlichung der Website reibungslos verlief.
Weitere Schritte
Die Website ist nun online, jedoch gibt es noch einiges zu tun. Einige Bilder fehlen noch, sowie einige Texte. Für das bin ich jedoch auf die Hilfe meines Kunden angewiessen. Da sie noch nicht dazu gekommen sind, reiche ich den Beitrag schon ein, jedoch werde ich dies sobald mir das Material nachgeliefert wird fertig umsetzten.
Da ich Angular verwendet habe, ist es nun sehr einfach, ein kleines Backend mit Datenbank anzuschliessen, um beispielsweise die Öffnungszeiten anzupassen. Auch die Implementierung eines Terminsystems wäre nun gut möglich. Wann und ob diese Erweiterungen umgesetzt werden, ist jedoch noch unklar.
Fazit
Es hat mir Spass gemacht, wieder einmal eine Website mit Angular umzusetzen. Ich finde es der einfachste und übersichtlichste Weg eine Website zu programmieren. Mit dem Resultat bin ich zufrieden, nun warte ich noch auf Feedback von meinem Kunden.