Angular Basics - Was ist Angular?

Willkommen zur Angular-Tutorial-Serie! In dieser Serie lernst du Angular von Grund auf - eines der beliebtesten Frameworks für moderne Webanwendungen.

📋 In diesem Artikel lernst du:

• Was Angular ist und warum es so beliebt ist
• Der Unterschied zwischen Angular und AngularJS
• Die Architektur von Angular Anwendungen
• Wann du Angular verwenden solltest
• Was du vor dem Start wissen musst

Was ist Angular?

Angular ist ein Open-Source TypeScript-Framework von Google zum Erstellen moderner Single-Page Applications (SPAs).

Stell dir vor:

• HTML/CSS/JS = Haus aus Ziegeln (alles manuell bauen)
• Angular = Fertighaus-Bausatz (vorgefertigte Komponenten, Struktur, Werkzeuge)

Wichtige Fakten:

• 🚀 Entwickelt von Google (seit 2016)
• 💪 TypeScript-basiert (typsicher, besser für große Projekte)
• 📦 Alles dabei (Routing, Forms, HTTP, Testing - "Batteries included")
• 🎯 Enterprise-ready (Große Firmen nutzen Angular)
• 🔄 SPA Framework (Single Page Application)

Angular vs. AngularJS - Der Unterschied

Wichtig zu wissen:

Merke: Wenn jemand "Angular" sagt, meint er normalerweise Angular 2+. AngularJS ist veraltet!

Was ist eine Single Page Application (SPA)?

Traditionelle Webseite:

Seite 1 → Server → Neue Seite laden
Seite 2 → Server → Neue Seite laden
Seite 3 → Server → Neue Seite laden

Single Page Application (Angular):

Erste Seite → Server → Einmal geladen
Danach: Alle Änderungen passieren im Browser!
Keine neuen Seiten mehr laden ✨

Vorteile:

• ⚡ Schneller (keine Seitenwechsel)
• 🎨 Flüssigere Benutzererfahrung
• 📱 Fühlt sich an wie eine App

Beispiele:

• Gmail
• Facebook
• Twitter
• Netflix

Angular Architektur - Die Bausteine

Eine Angular-App besteht aus mehreren Bausteinen:

1. Module (NgModule)

Das Konzept: Module sind wie Container die zusammengehörige Teile bündeln.

@NgModule({
  declarations: [AppComponent],  // Komponenten
  imports: [BrowserModule],      // Andere Module
  providers: [],                 // Services
  bootstrap: [AppComponent]      // Start-Komponente
})
export class AppModule { }

Denke an Module wie:

• Ein Auto-Modul (Motor, Räder, Lenkung)
• Ein Küchen-Modul (Herd, Spüle, Kühlschrank)

2. Components (Komponenten)

Das Herzstück von Angular!

Komponenten sind wiederverwendbare Bausteine deiner UI:

@Component({
  selector: 'app-button',           // HTML-Tag
  template: '<button>Click me</button>',  // HTML
  styles: ['button { color: blue; }']     // CSS
})
export class ButtonComponent { }

Komponenten = Lego-Steine 🧱

• Jede Komponente hat HTML, CSS, TypeScript
• Komponenten können verschachtelt werden
• Wiederverwendbar in der ganzen App

3. Templates

Das HTML deiner Komponente:

<div>
  <h1>{{ title }}</h1>
  <button (click)="handleClick()">Click me</button>
  <p *ngIf="showText">Dieser Text erscheint dynamisch!</p>
</div>

Angular-spezifische Syntax:

• {{ }} - Interpolation (Werte anzeigen)
• () - Event Binding (Click, etc.)
• [] - Property Binding (Eigenschaften setzen)
• *ngIf, *ngFor - Directives

4. Services

Wiederverwendbare Logik:

@Injectable({
  providedIn: 'root'
})
export class UserService {
  getUsers() {
    // API-Call oder Business Logic
  }
}

Services sind wie:

• Eine Werkzeugkiste (wiederverwendbare Funktionen)
• Ein Postbote (holt Daten von APIs)
• Ein Manager (verwaltet den App-Zustand)

5. Dependency Injection (DI)

Angular liefert dir automatisch was du brauchst:

export class UserListComponent {
  constructor(private userService: UserService) {
    // Angular gibt dir automatisch den UserService!
  }
}

Denke an DI wie:

• Ein Restaurant (du bestellst, die Küche liefert)
• Angular ist der Kellner, der dir alles bringt

Warum Angular lernen?

✅ Vorteile:

1. Alles in einem Paket

   • Routing ✅
   • Forms ✅
   • HTTP ✅
   • Testing ✅
   • Keine zusätzlichen Libraries nötig

2. TypeScript

   • Typsicherheit = weniger Bugs
   • Bessere IDE-Unterstützung
   • Autocomplete everywhere!

3. Enterprise-ready

   • Klare Struktur
   • Best Practices eingebaut
   • Skalierbar für große Teams

4. Google backing

   • Langfristige Unterstützung
   • Regelmäßige Updates
   • Große Community

5. Two-Way Data Binding

   • Daten synchronisieren automatisch
   • Weniger Boilerplate-Code

❌ Nachteile (ehrlich sein!):

1. Steilere Lernkurve

   • Mehr Konzepte als React/Vue
   • TypeScript muss gelernt werden

2. Größere Bundle Size

   • Angular Apps sind größer
   • Mehr Code zum Laden

3. Verbosity

   • Mehr Boilerplate als andere Frameworks
   • Mehr Dateien pro Feature

Wann solltest du Angular nutzen?

✅ Angular ist perfekt für:

• Enterprise-Anwendungen (große, komplexe Projekte)
• Teams (klare Struktur hilft bei Zusammenarbeit)
• Langfristige Projekte (Wartbarkeit wichtig)
• CRM, Admin-Panels, Dashboards
• Wenn du TypeScript magst

❌ Angular ist vielleicht übertrieben für:

• Kleine Landing Pages (zu viel Overhead)
• Einfache Blogs (statische Site Generators besser)
• Prototypen (React/Vue schneller zum Testen)

Was du VOR Angular wissen solltest

Must-Have:

• ✅ HTML & CSS (solid)
• ✅ JavaScript Grundlagen (Variablen, Funktionen, Arrays, Objects)
• ✅ ES6+ (Arrow Functions, Classes, Modules, Promises)

Nice-to-Have:

• 🟡 TypeScript Basics (lernst du parallel)
• 🟡 npm/Node.js (für Installation)
• 🟡 Git (für Versionskontrolle)

Keine Sorge: Du musst kein TypeScript-Experte sein! Du lernst es während des Angular-Lernens.

Angular Ökosystem

Was gehört zu Angular?

Core Tools:

1. Angular CLI 🛠️

   • Command Line Tool
   • Erstellt Projekte, Komponenten, etc.
   • ng new, ng serve, ng build

2. RxJS 🌊

   • Reactive Programming Library
   • Für asynchrone Datenströme
   • Wird in Angular viel genutzt

3. TypeScript 📘

   • Superset von JavaScript
   • Fügt Typen hinzu
   • Kompiliert zu JavaScript

Beliebte Zusatz-Libraries:

• Angular Material - UI Component Library
• NgRx - State Management (wie Redux)
• Angular Universal - Server-Side Rendering

Quiz

Nächste Schritte

Bereit für den nächsten Schritt? 🚀

Im nächsten Artikel:

• Angular CLI installieren
• Dein erstes Angular-Projekt erstellen
• Die Projektstruktur verstehen
• Den Development Server starten

➡️ Weiter zu: Angular Setup & Installation

Viel Erfolg auf deiner Angular-Reise! 💪