Buy now

Einführung in Angular Basics für Einsteiger

Angular Basics
Heiko von CodeFellows GmbH
3. Juli 2024

Willkommen bei unserer Einführung in die Angular-Grundlagen! Hier geben wir einen umfassenden Einblick in Angular. Es geht um die Teile, aus denen eine Angular-App besteht. Wir legen den Fokus auf Angular-Version 2 und darüber. Das liegt daran, dass Angular Versionen semantisch verwaltet werden.

Die Grundlagen von Angular zu lernen ist wichtig, um in die Webentwicklung einzusteigen. Unsere Kurse bauen auf den Anfängeraufgaben der Angular-Workshops von Workshops.DE auf. Sie verbinden Theorie und Praxis perfekt. Es ist toll, dass die Teilnehmer selbst programmieren können. Es gibt auch Video-Hilfen, Unterstützung und Lösungen. Diese sind im Angular Tutorial der Lifetime Classroom kostenlos verfügbar.

Wichtige Punkte

  • Einführung in die Welt von Angular als Framework
  • Grundbestandteile einer Angular-Anwendung
  • Keine explizite Versionsnummer aufgrund semantischer Versionierung
  • Kombination von Theorie und Praxis in unseren Schulungen
  • Unterstützung durch Videos, Hilfestellungen und Musterlösungen

1

Was ist Angular?

Angular war früher als AngularJS bekannt. Es ist ein fortschrittliches JavaScript-Framework von Google2. Angular wird seit 2009 als Open-Source-Projekt entwickelt3. Es hilft Entwicklern dabei, qualitativ hochwertige Webanwendungen zu erstellen2. Der Code wird durch TypeScript verbessert. Dadurch entstehen strukturierte Anwendungen3.

Definition

Angular ist eine Plattform zum Entwickeln von Single-Page-Anwendungen (SPA)4. Es hat alles, was man braucht, von Modulen bis zu Templates4. Mit dem Two-Way-Data-Binding bleiben die UI-Elemente immer aktuell2. Das Ziel von Angular ist es, die Webentwicklung für große Anwendungen einfacher zu machen.

Geschichte von Angular

2009 kam AngularJS raus und legte den Fokus auf Struktur2. Es war ideal für große Firmen wegen seiner Architektur und Komponenten3. Nach Version 2 heißt es nur noch Angular. Die neueste Version, Angular 11, kam im November 2020 raus2. Google sorgt dafür, dass Angular immer besser wird3.

Vorteile von Angular

Angular ist super für Firmen und große Projekte3. Es gibt einheitliche Bauteile wie Komponenten und Dienste2. Über 30 Leute arbeiten an Angular. So gibt es alle sechs Monate neue Versionen3. Durch Modularität werden Anwendungen effizienter und leichter zu warten. Angular funktioniert auf verschiedenen Plattformen2. Mehr als 1600 Google-Projekte nutzen Angular. Das zeigt, wie nützlich und beliebt es ist4.

Unterschiede zu React und Vue

Um die beste Wahl für Projekte zu treffen, ist der Vergleich von Angular, React und Vue wichtig. Jede Technologie hat ihre eigenen Vorteile und Besonderheiten.

Angular vs. React

Google unterstützt Angular. Es ist ideal für große Unternehmensanwendungen und betont Struktur und Testbarkeit. React, genutzt von Meta, bietet Flexibilität durch seinen virtuellen DOM. Im StackOverflow Survey 2022 mögen 40,14% der Entwickler React. Angular bevorzugen 22,96%5. Bei Profis ist React mit 44,31% vorne, Angular nutzen 23,06%6. Beide bieten unterschiedliche Wege, Entwicklungsbedürfnisse zu erfüllen.

Angular vs React

Angular nutzt TypeScript, das 30% der Entwickler bevorzugen5. Viele sehen React als einfacher zu lernen, dank einer großen Community7. Angulars Bundle-Größe ist mit 111 KB größer als die von React mit 32 KB6. Diese Unterschiede sind bei der Wahl und Anwendung bedeutsam, vor allem in Bezug auf Größe und Leistung.

Angular vs. Vue

VueJS liegt zwischen Angulars Struktur und Reacts Flexibilität. Es hat eine kleine Bundle-Größe von 23 KB, was Geschwindigkeit unterstützt6. Anfänger mögen Vue wegen der einfachen Lernkurve5. Es eignet sich besonders für kleinere, performante Projekte6.

Bei Angular vs Vue ist die SEO-Leistung ein wichtiger Aspekt. Vue-Projekte können langsam laden, was SEO beeinträchtigt5. Firmen wie GitLab und Nintendo verwenden Vue, was dessen Stärke zeigt6. Vue und React haben mehr Community-Unterstützung als Angular, was GitHub-Stars zeigen: Angular hat 80K, React 183K und Vue 193K7.

Angular, React und Vue haben jeweils eigene Stärken und Schwächen. Die Entscheidung sollte nach den spezifischen Bedürfnissen des Projekts getroffen werden.

Installation von Angular

Am Anfang müssen wir ein paar Dinge klären, bevor wir Angular installieren. Die Angular Installation erleichtert uns das Programmieren und den Gebrauch der Angular CLI.

Siehe auch  Wir erklären Dark Mode Design & seine Vorteile

Voraussetzungen für die Installation

Um Angular zu installieren, brauchen wir zuerst NodeJS. Es hilft uns, Programme wie die Angular CLI auszuführen8. Außerdem sollten wir für kleine Projekte 8GB RAM haben. Für größere Projekte sind 16GB oder mehr besser9.

Schritte zur Installation

Zuerst laden wir NodeJS von seiner Webseite herunter und installieren es. Danach checken wir die Installation mit node -v und npm -v9. Um die Angular-CLI überall nutzen zu können, tippen wir npm install -g @angular/cli ein. Die Version kontrollieren wir mit ng version9.

Optional ist auch die Installation von TypeScript global möglich. Nutze dafür npm install -g typescript. Mit tsc -v prüfen wir dann die Version9.

Erste Anwendung starten

Wir erstellen eine neue Angular App mit ng new projekt-name. Dieser Schritt baut die App-Struktur auf9. Nach dem Erstellen führen wir die App lokal mit ng serve aus. Dann rufen wir sie im Browser unter http://localhost:4200/ auf9.

Die Angular-CLI hat auch starke Befehle, um Komponenten und Dienste zu erstellen. Beispiele sind ng generate component komponenten-name und ng generate service service-name9.

Komponenten in Angular

In der Angular Webentwicklung sind Komponenten sehr wichtig. Sie enthalten ein HTML-Template, eine TypeScript-Klasse und CSS-Stile10. Diese Teile werden in den meisten Angular Anwendungen genutzt10.

Komponenten sind das Herz von Angular. Sie bieten vorgefertigte UI-Bausteine zum Wiederverwenden11. TypeScript hilft dabei, die Logik zu schreiben. Es wurde von Microsoft erstellt, unterstützt optionales statisches Typing und ist für große Projekte gedacht10.

TypeScript verwandelt den Code in JavaScript. Dann kann der Browser den Code verstehen10.

Komponentenbibliotheken in Angular machen die Entwicklung besser. Sie helfen, schneller zu arbeiten und die Qualität zu steigern11. Beliebte Bibliotheken sind Angular Material und NG-Bootstrap. Auch Clarity und Kendo UI sind sehr bekannt11. Diese Bibliotheken haben viele UI-Elemente, um schöne Seiten zu machen.

Die Verwaltung von Komponenten ist auch wichtig. Angular nutzt dazu Lifecycle-Hooks10. Zum Beispiel ngOnChanges() und ngOnInit(). Diese machen die Arbeit mit der App einfacher10.

Komponenten sollten ähnlich benannt werden12. Das macht sie leichter nutzbar. Das Prinzip der Einzelverantwortlichkeit hilft dabei, sie einfach zu halten12.

Die richtige Bibliothek zu finden, kann schwer sein11. Doch jede Bibliothek verbessert die Zusammenarbeit. Und sie sorgen für ein gutes Nutzererlebnis11.

Expressions und Schleifen

In dieser Sektion geht es um Angular Expressions und Schleifen. Diese sind wichtig für die Angular Grundlagen. Sie helfen, dynamische Daten in Templates einzubinden. Mit ihrer Hilfe können Entwickler wiederholende HTML-Elemente durch Daten erstellen.

Grundlagen der Expressions

Angular Expressions benutzen eine Syntax, die JavaScript ähnelt. Sie ermöglichen es, dynamische Daten in Templates einzubetten. Darin können mathematische Operationen und Logik enthalten sein.

Nach den JavaScript-Syntaxregeln muss die Syntax genau sein. So werden Fehler vermieden. Diese Fehler könnten sonst die Anwendung stoppen13. JavaScript-Programme machen viele Anweisungen. Manche Anweisungen, wie Schleifen, ändern den Fluss der Ausführung13.

Beim Deklarieren von Variablen in JavaScript geht es um das Erstellen von Variablen. Diese Variablen speichern Werte13. Ausdrücke in JavaScript sind entscheidend. Sie bilden mathematische Operationen und kombinieren Werte mit Operatoren wie Plus und Minus13.

Angular Expressions

In Angular vereinfacht die @for-Syntax das Durchlaufen von Templates. Dies bietetEntwicklern eine einfachere Schleifenmechanik14.

Verwendung von Schleifen

Schleifen sind wichtig in der Programmierung. Sie lassen Entwickler Befehle wiederholen, bis eine Bedingung erreicht ist. Die for-Schleife in JavaScript ist ein gutes Beispiel dafür13.

Angular 17 brachte die @for-Syntax, die keinen Import von ngFor aus @angular/common mehr braucht14. Sie gilt als bessere Wahl im Vergleich zu @if. Denn sie ist kürzer und bietet mehr Leistung14.

Der Track-Parameter hilft, die Performance zu optimieren. Er zeigt Angular, wie Elemente einzigartig identifiziert werden können14. So kann die @for-Syntax Funktionen beinhalten. Diese Funktionen kontrollieren die Iteration in Angular-Templates besser14.

Siehe auch  Top Adobe XD Tipps für besseres Design

In der Literatur zu Angular Basics gibt es mehr als 140 Iterationen und Themen15. Sie decken viele Bereiche wie TypeScript und HTTP ab15.

Das @empty-Schlüsselwort zeigt Inhalte, wenn eine Sammlung leer ist. Das ist benutzerfreundlich14. Es hilft, die Anwendung besser zu machen.

Event- & Property-Binding

Angular kennt vier Arten von Datenbindungen16. Das bekannteste ist Angular Event Binding. Es erlaubt Infos von der Ansicht zur Komponente zu fließen, durch Ereignisse16.

Ein Grundfeature ist Angular Property Binding. Es aktualisiert Komponentenwerte und verbindet sie mit dem View-Template16. Property-Binding gibt Werte an DOM Properties weiter, auf Einweg-Basis16.

String-Interpolation ist stark. Sie bringt String-Werte in HTML. Benutzt Template-Expressions, um Werte zu binden16.

Sehr wichtig ist Two-Way Data Binding. Es kombiniert ([()]) für Property und Event Binding in Angular17. Die $event-Variable nimmt Daten auf und aktualisiert fontSizePx17.

„Angular hat viele Datenbindungsmöglichkeiten. Sie helfen Anfängern und Profis, tolles zu entwickeln.“

Ein interessanter Punkt ist die Effizienz von Angular Event Binding. Angular prüft, ob ein Event bekannt ist. Das macht das Binding genau und flexibel18.

Kombinationen von Tasten wie shift, alt und Control zeigen Entwicklerpräferenzen18.

Zusammen bieten diese Methoden in Angular die Basis, um interaktive Apps zu schaffen.

Services und Dependency-Injection

Services und Dependency Injection sind sehr wichtig im Angular Framework. Sie helfen Entwicklern, sauberen und leicht wartbaren Code zu erstellen. Sie ermöglichen eine klare Trennung der Verantwortlichkeiten.

Was sind Services?

Angular Services sind besondere Objekte, die in Anwendungen Code organisieren und teilen19. Sie sind sehr wichtig für die Datenverwaltung20. Services machen unsere Anwendungen effizienter und modularer20.

Ein Beispiel für einen Service ist der DataService, der fest codierte Daten speichert20. Services trennen spezifische Funktionen von der Benutzeroberfläche21. Durch diese Trennung ist die Wartung einfacher, da Änderungen zentral gemacht werden21. Mehr Infos gibt es in diesem Angular Tutorial.

Wie funktioniert Dependency Injection?

Dependency Injection macht die Integration von Services in Komponenten einfacher19. Es folgt dem Konzept der Inversion of Control19. DI macht Softwareentwicklung flexibler und einfacher zu testen21. In Angular nutzen wir die hierarchische Struktur für DI19.

Um Klassen injizierbar zu machen, brauchen wir den @Injectable()-Decorator19. Wichtig ist hier, dass die Klasse alle benötigten Abhängigkeiten erhält. Mit providedIn: ‘root’ im @Injectable()-Decorator wird der Service überall verfügbar19.

Ein Anfängerfreundliches Tutorial für DI findet man hier: Angular Tutorial für Anfänger. Es ist gut geeignet, um in die Thematik einzusteigen. Für eine korrekte Nutzung empfehlen wir Node Version 11.0 und NPM Version 6.7 zu verwenden. Nicht vergessen, die Angular-Version mit „ng version“ zu überprüfen20.

Anbindung einer REST-API

Das Einbinden einer REST-API in Angular hilft, Daten von anderen Quellen zu bekommen. Es ist wichtig für moderne Webseiten. Hier zeigen wir, was Entwickler brauchen, um eine REST-API mit Angular zu nutzen.

Was ist eine REST-API?

Eine REST-API ist eine Schnittstelle für das Austauschen von Daten zwischen Client und Server. Sie hilft, Daten zu bekommen oder zu ändern. So sind moderne Web-Apps möglich. Sie nutzt JSON, was sie sehr flexibel macht.

Beispiel einer REST-API-Anbindung

Um eine REST-API zu nutzen, fangen wir mit dem HttpClientModule an. Etwa 20% der Lehrbeispiele zeigen das22. Dann machen wir einen Angular Service. Er holt Daten vom REST-API-Server. Das sieht man oft in Anleitungen.

Es ist gut, Datenzugriffe Services zu überlassen und nicht direkt in Komponenten zu machen. Oft wird dabei @Injectable() genutzt. So trennen wir Logik von der Darstellung und der Code bleibt übersichtlich.

  1. Service Erstellung: Wir können leicht einen Service machen22.
  2. GET Anfragen: Wir zeigen, wie man eine GET-Methode im Service macht. Das Verhältnis von Beispiel zu Erklärung ist 1:122.
Siehe auch  Webdesign Trends 2024: Unsere Top-Einblicke

Die User Class hat fünf Felder. Wir haben zwei API-Aufrufe, um Nutzer zu laden und hinzuzufügen2223. Das hilft beim Anbinden an die REST-API in Angular.

Angular NestJS Spring Boot
Angular Service Dependency Injection Repository Interface
HttpClientModule CLI Unterstützung JPA Entity Class
Bootstrap Styling Ähnliche Architektur CRUD Funktionalität

Am Ende, um das Design zu verbessern, haben wir Teile über Bootstrap und Material Design2223. Sie machen die Benutzeroberfläche von Angular REST-API Apps besser.

Angular CLI nutzen

Die Angular CLI verändert, wie wir Angular-Apps bauen. Sie erstellt die Grundstruktur und setzt wichtige Tools ein24. Mit `npm install -g @angular/cli` wird sie einfach installiert24. Sie hilft allen Entwicklern, schneller und besser zu arbeiten24.

Visual Studio Code ist top für Angular, wegen TypeScript und speziellen Erweiterungen24. Man kann aber auch WebStorm nutzen. Das kostet, hat aber eine Testphase25. Die CLI hilft auch, HTML-Codes zu vervollständigen und Fehler zu finden24.

Zum Starten einer neuen App benutzen wir `ng new. Hier wählen wir Namen, Routing und das Stylesheet25. Mit `ng serve` wird die App lokal gezeigt, unter localhost:420025. `ng build` macht dann alles fertig für die Veröffentlichung24.

FAQ

Was ist Angular?

Angular ist ein beliebtes JavaScript-Web-Framework von Google. Es eignet sich super für Single-Page-Webanwendungen. Es wird weltweit in vielen Projekten verwendet.

Was sind die Vorteile von Angular?

Angular hilft, Apps klar zu strukturieren. Es unterstützt das Test-Driven Development und bietet viele Werkzeuge. Eine große Community unterstützt Angular. So eignet es sich auch für große Software-Projekte.

Wie unterscheidet sich Angular von React?

Angular ist ein umfangreiches Framework mit festgelegten Strukturen. Es eignet sich gut für große Projekte. React ist einfacher und flexibler in der Anwendung.

Wie unterscheidet sich Angular von Vue?

Vue liegt zwischen Angular und React. Es hat ein einfaches Design und eine klare Struktur.

Was sind die Voraussetzungen für die Installation von Angular?

Bevor man Angular installiert, muss NodeJS auf dem Computer sein. NodeJS hat wichtige Werkzeuge, die man braucht.

Wie installiere ich Angular?

Für die Installation nutzt man npm und das CLI-Werkzeug „ng“. Dadurch kann man schnell eine neue Anwendung bauen und sie ausführen.

Was sind Angular Komponente?

Komponenten sind wichtig in jeder Angular-App. Sie haben Code und Styling. Sie sagen der App, wie sie aussehen und funktionieren soll.

Was sind Angular Expressions?

Ein Expression stellt Daten in der Website dar. Es kann HTML-Elemente basierend auf Daten wiederholen.

Was ist Event- und Property-Binding in Angular?

Mit Event-Binding kann man auf Benutzeraktionen reagieren. Property-Binding ändert Eigenschaften in der Webseite basierend auf App-Daten.

Was sind Services in Angular?

Services sind spezielle Codes in Angular. Sie erledigen bestimmte Aufgaben für die ganze App.

Wie funktioniert Dependency Injection in Angular?

Dependency Injection hilft, den Code sauber zu halten. Eine Klasse bekommt ihre Abhängigkeiten, ohne sie selbst zu machen.

Wie binde ich eine REST-API in Angular ein?

Um Daten von außen zu bekommen, nutzt man REST-APIs in Angular. Das geht mit speziellen Angular Services.

Was ist die Angular CLI und wie wird sie genutzt?

Die Angular CLI hilft bei der Entwicklung. Sie baut Projekte und bereitet alles für die Veröffentlichung vor. Entwickler können damit ihre Projekte leichter managen.

Quellenverweise

  1. https://www.studysmarter.de/schule/informatik/webentwicklung/angular/
  2. https://angular.de/artikel/was-ist-angular/
  3. https://platri.de/tech-wiki/was-ist-angular/
  4. https://www.simplilearn.com/tutorials/angular-tutorial/what-is-angular
  5. https://www.browserstack.com/guide/angular-vs-react-vs-vue
  6. https://www.dotnetpro.de/frontend/user-interface/react-angular-vuejs-gegenueberstellung-frontend-frameworks-2910346.html
  7. https://www.techillon.com/angular-react-und-vue-im-vergleich/
  8. https://angular.de/artikel/angular-tutorial-deutsch/
  9. https://www.knowledgehut.com/blog/web-development/install-angular-on-windows
  10. https://www.knowledgehut.com/tutorials/angular/angular-basics
  11. https://kinsta.com/de/blog/angular-komponentenbibliotheken/
  12. https://www.telerik.com/blogs/angular-basics-best-practices-creating-new-components
  13. https://molily.de/js/syntax.html
  14. https://blog.angular-university.io/angular-for/
  15. https://dokumen.pub/angular-grundlagen-fortgeschrittene-themen-und-best-practices-inklusive-nativescript-und-ngrx-3-akt-u-erw-auflage-9783864907791-3864907799.html
  16. https://www.telerik.com/blogs/understanding-angular-property-binding-and-interpolation
  17. https://angular.dev/guide/templates/two-way-binding
  18. https://angular.dev/guide/templates/event-binding
  19. https://medium.com/@krishsurya1249/angular-services-and-dependency-injection-07a71f1f5e72
  20. https://www.telerik.com/blogs/angular-basics-how-to-use-services-angular
  21. https://medium.com/@brandon93.w/angular-beginners-guide-2-services-and-dependency-injection-9072308cc2ff
  22. https://mercyjemosop.medium.com/rest-api-with-angular-e7c2ceaaace1
  23. https://www.baeldung.com/spring-boot-angular-web
  24. https://www.angulararchitects.io/aktuelles/angular-tutorial-teil-1-werkzeuge-und-erste-schritte/
  25. https://blog.it-frankfurt.com/posts/1-angular-tutorial-getting-started/