Angular lernen: Comprehensive Guide

Angular ist das TypeScript-Framework der Wahl für große, komplexe Web-Anwendungen. Diese Seite führt dich komplett von Anfänger zum Angular-Profi.

Was ist Angular?

Angular ist ein vollständiges Frontend-Framework von Google:

• TypeScript-first: Vollständig in TypeScript geschrieben
• Umfassend: Alles is built-in (Routing, Forms, HTTP, Testing)
• Enterprise-ready: Für große Teams und komplexe Apps
• Opinioniert: Klare Struktur und Best Practices
• Performant: Optimale Change Detection und Rendering
• Well-supported: Google-backed, große Community

Warum Angular lernen?

• ~15–20% der Frontend-Jobs
• Enterprise-Präsenz: Große Banken, Versicherungen, Konzerne
• TypeScript ist Standard: Überallhin transferierbar
• Best Practices eingebaut: RxJS, Testing, Architecture
• Langfristige Karriere: Nicht "hype-getrieben"
• Gehalt: 55.000–75.000 EUR für Angular Entwickler

Wann solltest du Angular wählen?

Angular ist gut für:

• Große, komplexe Anwendungen
• Enterprise-Environments
• Projekte mit TypeScript
• Multi-Person Teams
• Lange-Laufzeit Projekte

React ist besser für:

• Kleinere bis mittlere Apps
• Schnelle Prototypen
• "Best of Breed" Tooling-Flexibilität
• Single Developer Teams

Voraussetzungen

• Gute JavaScript Grundlagen (wichtig!)
• TypeScript Basics: Interfaces, Classes, Decorators
• HTML/CSS Basis
• Browser APIs: DOM, Events, Fetch
• npm und Node.js: Für Development Setup

JavaScript für Anfänger - falls nötig

Schneller TypeScript Überblick:

• Types und Interfaces
• Classes und Decorators
• Generics
• Modules und Exports

Angular Learning Path

Phase 1: TypeScript Vertiefung (1–2 Wochen)

Nicht optional! Angular ohne TypeScript ist möglich, aber nicht empfohlen.

Essenzielle TypeScript Konzepte:

• Types: string, number, boolean, any, void, never
• Interfaces: Contracts für Objekt-Struktur
• Classes: Constructor, Properties, Methods, Visibility
• Decorators: @Component, @Injectable, etc.
• Generics: Generic Types und Functions
• Enums: Typsicher Konstanten-Werte
• Access Modifiers: public, private, protected
• Abstract Classes: Base Classes für Inheritance

Praktische Übungen:

• Type-safe TODO App
• Generic Data Repository
• Interface-based Architecture
• Decorator Patterns

Ressourcen:

• TypeScript Official Handbook
• "Effective TypeScript" (Buch)
• TypeScript Deep Dive (Online-Buch)

Phase 2: Angular Basics & Setup (1–2 Wochen)

Konzepte verstehen:

• Angular CLI: Project Generation und Development
• Component Structure: Template, Class, Styles
• Component Lifecycle: OnInit, OnDestroy, etc.
• Data Binding: Interpolation, Property, Event, Two-way
• Directives: *ngIf, *ngFor, *ngSwitch
• Pipes: Format und Transform Data
• Services: Business Logic Container
• Dependency Injection: Angular DI System

Installation und Setup:

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve

First Components:

• Header Component
• Footer Component
• Navigation Component
• Dashboard Component

Praktische Projekte:

• Simple Todo List App
• Weather Display App
• Product Listing Page

Phase 3: Components Deep Dive (2 Wochen)

Component Architektur:

• Component Class (TypeScript)
• Template (HTML)
• Styles (CSS/SCSS)
• Input/Output Properties (@Input, @Output)
• View Encapsulation
• Change Detection Strategy

Component Communication:

• Parent → Child über @Input
• Child → Parent über @Output (EventEmitter)
• Service-basierte Communication

Template Syntax:

• Data Binding: {{ expression }}, [property], (event), [(ngModel)]
• Directives: *ngIf, *ngFor, *ngSwitch, [ngClass], [ngStyle]
• Template Forms vs. Reactive Forms
• Form Validation
• Error Messages

Praktische Beispiele:

@Component({
  selector: 'app-product',
  template: `
    <h2>{{ product.name }}</h2>
    <p>{{ product.price | currency }}</p>
    <button (click)="onBuy()">Buy</button>
  `,
  styles: [`h2 { color: blue; }`]
})
export class ProductComponent implements OnInit {
  @Input() product: Product;
  @Output() bought = new EventEmitter<Product>();

  ngOnInit() {
    // Initialization
  }

  onBuy() {
    this.bought.emit(this.product);
  }
}

Praktische Projekte:

• Reusable Component Library
• Advanced Todo App mit Parent/Child Components
• Real Estate Listing App mit Filter Components

Phase 4: Services & Dependency Injection (2 Wochen)

Services verstehen:

• Was sind Services?
• Singleton Pattern
• Dependency Injection (DI)
• Provider Configuration
• Factory Functions

HTTP Communication:

• HttpClient Service
• GET, POST, PUT, DELETE Requests
• Error Handling
• Request Interceptors
• Response Interceptors

State Management Basics:

• Component State vs. App State
• Services als State Container
• BehaviorSubject für State
• Observable Patterns

Praktische Implementierung:

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private users$ = new BehaviorSubject<User[]>([]);

  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users').pipe(
      tap(users => this.users$.next(users))
    );
  }

  createUser(user: User): Observable<User> {
    return this.http.post<User>('/api/users', user).pipe(
      tap(newUser => {
        const current = this.users$.value;
        this.users$.next([...current, newUser]);
      })
    );
  }
}

Praktische Projekte:

• REST API Integration
• User Management App
• Multi-level Service Architecture

Phase 5: Forms (Template & Reactive) (2 Wochen)

Template-driven Forms:

• ngModel Two-way Binding
• Form Validation
• Form States (pristine, dirty, touched, valid)
• Error Display
• Submit Handling

Reactive Forms (besser für komplexe Szenarien):

• FormBuilder
• FormGroup, FormControl
• Validators (built-in und custom)
• Dynamic Form Fields
• Form Arrays für mehrere Einträge
• Cross-field Validation

Praktische Implementierung:

export class UserFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
      age: [null, [Validators.required, Validators.min(18)]],
      addresses: this.fb.array([this.createAddress()])
    });
  }

  createAddress(): FormGroup {
    return this.fb.group({
      street: ['', Validators.required],
      city: ['', Validators.required]
    });
  }

  submit() {
    if (this.form.valid) {
      // Submit
    }
  }
}

Praktische Projekte:

• Complex Registration Form
• Dynamic Multi-step Form
• Real Estate Listing Creator
• E-Commerce Checkout

Phase 6: Routing & Navigation (1–2 Wochen)

Routing Konzepte:

• Router Module
• Route Definition
• Router Outlet
• Navigation
• Route Parameters
• Query Parameters
• Lazy Loading
• Route Guards (CanActivate, CanDeactivate, Resolve)

Advanced Routing:

• Child Routes
• Nested Routing
• Auxiliary Routes
• Wildcard Routes

Praktische Implementierung:

const routes: Routes = [
  { path: '', component: DashboardComponent },
  { 
    path: 'users', 
    component: UserListComponent,
    canActivate: [AuthGuard]
  },
  { 
    path: 'user/:id',
    component: UserDetailComponent,
    resolve: { user: UserResolver }
  },
  { 
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    canActivate: [AdminGuard]
  },
  { path: '404', component: NotFoundComponent },
  { path: '**', redirectTo: '404' }
];

Praktische Projekte:

• Complete Multi-page Application
• Authentication Flow mit Guards
• Admin Panel mit Nested Routes
• Lazy Loaded Feature Modules

Phase 7: RxJS & Observables (2–3 Wochen)

RxJS Grundlagen:

• Observables vs. Promises
• Subscriptions
• Operators: map, filter, tap, switchMap, etc.
• Subject vs. Observable
• Hot vs. Cold Observables
• Unsubscribe und Memory Leaks verhindern

Wichtige Operators:

• Transforming: map, flatMap, switchMap, mergeMap
• Filtering: filter, take, takeUntil, debounceTime, distinctUntilChanged
• Combining: merge, combineLatest, forkJoin, concat
• Error Handling: catchError, retry, throwError

Praktische Muster:

// Search mit Debounce und Distinct
searchProducts(term$: Observable<string>): Observable<Product[]> {
  return term$.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(term => this.productService.search(term)),
    catchError(() => of([])),
    takeUntil(this.destroy$)
  );
}

// Kombiniere mehrere Datenquellen
this.dashboard$ = combineLatest([
  this.userService.getUser(),
  this.statsService.getStats(),
  this.notificationService.getNotifications()
]).pipe(
  map(([user, stats, notifications]) => ({ user, stats, notifications }))
);

Praktische Projekte:

• Real-time Search mit Debounce
• Live Statistics Dashboard
• Multi-source Data Aggregation
• Error Handling Patterns

Phase 8: State Management (2–3 Wochen)

Wann brauchst du State Management?

• Mehrere Components teilen State
• Komplexe State-Transformationen
• Zeit-Reisen Debugging (DevTools)
• Persistence

NgRx (Recommended für Angular):

• Actions
• Reducers
• Selectors
• Effects
• Store
• Entity Adapter

Alternative:

• Akita (einfacher als NgRx)
• Signals (Modern Angular Approach)
• Plain Services (für kleine Apps)

NgRx Beispiel:

// Action
export const loadUsers = createAction(
  '[User Page] Load Users'
);

// Reducer
export const userReducer = createReducer(
  initialState,
  on(loadUsers, (state) => ({ ...state, loading: true })),
  on(loadUsersSuccess, (state, { users }) => ({ 
    ...state, 
    users, 
    loading: false 
  }))
);

// Effect
@Injectable()
export class UserEffects {
  loadUsers$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadUsers),
      switchMap(() => 
        this.userService.getUsers().pipe(
          map(users => loadUsersSuccess({ users })),
          catchError(err => of(loadUsersFailure({ error: err })))
        )
      )
    )
  );
}

// Select
users$ = this.store.select(selectAllUsers);

Praktische Projekte:

• E-Commerce App mit Cart Management
• Collaborative Todo App
• Real-time Stock Market App

Phase 9: Testing (1–2 Wochen)

Unit Testing mit Jasmine:

• Test Structure
• Describe, it, beforeEach
• Assertions
• Mocking Services

Component Testing:

• TestBed Setup
• Component Fixture
• Template Testing
• Event Testing

Service Testing:

• HttpClientTestingModule
• Mock Services
• Error Scenarios

E2E Testing mit Cypress:

• Cypress Basics
• Selectors
• Assertions
• User Interactions

Praktische Beispiele:

describe('UserComponent', () => {
  let component: UserComponent;
  let fixture: ComponentFixture<UserComponent>;
  let userService: jasmine.SpyObj<UserService>;

  beforeEach(async () => {
    const spy = jasmine.createSpyObj('UserService', ['getUser']);
    await TestBed.configureTestingModule({
      declarations: [ UserComponent ],
      providers: [ { provide: UserService, useValue: spy } ]
    }).compileComponents();
    
    userService = TestBed.inject(UserService) as jasmine.SpyObj<UserService>;
    fixture = TestBed.createComponent(UserComponent);
    component = fixture.componentInstance;
  });

  it('should display user name', () => {
    const user: User = { id: 1, name: 'John' };
    userService.getUser.and.returnValue(of(user));
    
    fixture.detectChanges();
    
    expect(fixture.nativeElement.querySelector('h1').textContent).toContain('John');
  });
});

Phase 10: Performance & Optimization (1 Woche)

Change Detection Optimization:

• OnPush Strategy
• TrackBy für *ngFor
• Unsubscribe Patterns

Bundle Size:

• Lazy Loading
• Tree Shaking
• Code Splitting
• Ahead-of-Time (AOT) Compilation

Runtime Performance:

• Virtual Scrolling für große Listen
• Image Lazy Loading
• Preloading Strategies

Advanced Angular Patterns

Custom Decorators

export function DebugLog(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args: any[]) {
    console.log(`Calling ${propertyKey} with`, args);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

Custom Pipes

@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {
  transform(value: string, search: string): string {
    if (!search) return value;
    return value.replace(
      new RegExp(search, 'gi'),
      match => `<mark>${match}</mark>`
    );
  }
}

Custom Directives

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @Input() appHighlight = 'yellow';

  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = this.appHighlight;
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = null;
  }
}

Capstone Projekt – Production-ready App (3–4 Wochen)

Baue eine komplette Angular-Anwendung von Grund auf:

Beispiel-Projekt: Online Job Portal

Features:

1. User System

   • Registration & Login
   • User Profiles
   • Authentication Guards

2. Job Management

   • Browse & Search Jobs
   • Filters & Sorting
   • Job Details
   • Apply für Jobs

3. Employer Dashboard

   • Post Job Listings
   • View Applications
   • Manage Company Profile

4. Admin Panel

   • Moderation
   • Analytics
   • User Management

5. Architecture

   • Modular Structure
   • Shared Module
   • Feature Modules
   • State Management mit NgRx
   • Comprehensive Tests
   • Error Handling
   • Loading States

Ablauf

• Week 1: Architecture, Auth, Core Modules
• Week 2: Feature Modules, Routing
• Week 3: State Management, API Integration
• Week 4: Testing, Performance, Polishing

Lernen vs. React vs. Vue: Welches solltest du wählen?

Aspekt	Angular	React	Vue
Learning Curve	Steil	Moderat	Sanft
Unternehmensnutzung	★★★★★	★★★★	★★★
Flexibilität	Niedrig	Hoch	Moderat
Gehalt	60–75k	65–80k	55–70k
Community	Groß	Riesig	Wachsend
Beste für	Enterprise	Startups	Mittlere Orgs

Learning-Ressourcen

Offizielle Dokumentation

• Angular Official Docs: angular.io
• TypeScript Handbook: typescriptlang.org
• RxJS Documentation: rxjs.dev

Online Kurse

• Angular – The Complete Guide (Udemy, Max Schwarzmüller)
• Angular Masterclass (Pluralsight)
• NgRx – A JavaScript State Management Solution (Udemy)
• Angular Testing Workshop (egghead.io)

Freie Ressourcen

• Angular University: Angular.io Docs
• Alligator.io: Free Tutorials
• Dev.to: Community Articles
• YouTube: Angular Official Channel

Bücher

• "Angular Development with TypeScript" – Yakov Fain, Anton Moiseev
• "Effective TypeScript" – Dan Vanderkam
• "RxJS in Action" – Paul P. Daniels, Luis Atencio

Häufig gestellte Fragen

Sollte ich Angular oder React lernen? React ist beliebter bei Startups. Angular ist Enterprise-Standard. Wähle basierend auf deinem Zielmarkt.

Ist Angular zu kompliziert für Anfänger? Ja, es ist steiler als React. Mit guten TypeScript-Grundlagen ist es aber machbar.

Kann ich mit Angular ein Startup gründen? Ja, aber React/Vue sind schneller für MVP. Angular lohnt sich, wenn du langfristige Skalierbarkeit brauchst.

Wie lange brauche ich, um Angular gut zu können? 6–9 Monate mit 20+ Stunden/Woche für Intermediate. 1–2 Jahre für Senior-Level.

Muss ich NgRx verwenden? Nein, aber für größere Apps ist es sehr empfohlen.

Ist Angular noch zukunftssicher? Ja. Während React populärer ist, nutzt Enterprise-Welt Angular massiv. Investition ist sicher.

Zusammenfassung

Angular ist das Framework der Wahl für große, komplexe Web-Anwendungen. Mit TypeScript, RxJS, Services und State Management bringst du Enterprise-Entwicklung auf dein Level. Die steile Learning Curve zahlt sich aus mit besseren Gehältern und sicheren Job-Aussichten in großen Unternehmen.

Folge dem Lernpfad: TypeScript → Basics → Components → Services → Routing → RxJS → State Management → Testing → Production App. Nach diesem Pfad kannst du komplette Angular-Anwendungen architektieren und implementieren.