Fähigkeiten angular-state-management
📦

angular-state-management

Sicher

Angular State Management implementieren

Angular State Management ist komplex mit mehreren Lösungsmöglichkeiten. Diese Skill bietet Entscheidungsrahmen und Implementierungsmuster für Signals, NgRx, Component Stores und RxJS-Patterns, um wartbare Anwendungen zu entwickeln.

Unterstützt: Claude Codex Code(CC)
🥉 75 Bronze
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "angular-state-management". Wann sollte ich Signals vs NgRx Store verwenden?

Erwartetes Ergebnis:

  • Verwenden Sie Signals bei: Einfachem lokalen State, geteiltem State zwischen wenigen Komponenten, berechneten abgeleiteten Werten, leichten Lösungen benötigt
  • Verwenden Sie NgRx Store bei: Komplexen Cross-Feature-Abhängigkeiten, Time-Travel-Debugging benötigt, strikter unidirektionaler Datenfluss erforderlich, große Team-Koordination

Verwendung von "angular-state-management". Erstelle einen User-State-Service mit Signals

Erwartetes Ergebnis:

  • Service umfasst: private schreibbare Signals, öffentliche readonly Signals mit asReadonly(), berechnete Werte für abgeleiteten State, Methoden für State-Updates

Sicherheitsaudit

Sicher
v1 • 2/24/2026

Static analysis flagged 70 potential issues. Manual review confirms all findings are false positives. The 'Ruby/shell backtick execution' findings are triggered by markdown code fences and TypeScript template literals. 'Weak cryptographic algorithm' is triggered by words like 'sha' in 'shared' and 'source'. Network-related findings are legitimate documentation URLs and code examples. This is a genuine Angular state management documentation skill with no security concerns.

3
Gescannte Dateien
691
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
50
Community
100
Sicherheit
96
Spezifikationskonformität

Was du bauen kannst

Die richtige State-Lösung wählen

Erhalten Sie Anleitung, wann Sie Signals für einfachen State, Component Stores für Feature-spezifischen State oder NgRx Store für Enterprise-Anwendungen mit komplexen Abläufen verwenden sollten.

Moderne Signal-Patterns implementieren

Lernen Sie, Signal-basierte Services mit berechneten Werten, toSignal-Konvertierung von Observables und korrekten Immutability-Patterns zu erstellen.

NgRx SignalStore einrichten

Konfigurieren Sie NgRx SignalStore mit withState, withMethods, withComputed für typsicheres Feature-State-Management ohne Boilerplate.

Probiere diese Prompts

Einfache State-Lösung Abfrage 
Ich habe eine Angular-App mit [Ihren Use Case beschreiben]. Soll ich Signals, Component Store oder NgRx verwenden? Welche Faktoren sollten meine Entscheidung beeinflussen?
Signal Service Implementierung 
Erstellen Sie einen Signal-basierten Service zum Verwalten von [State beschreiben]. Fügen Sie schreibbare Signals, berechnete Werte und Methoden zum Aktualisieren des States hinzu.
NgRx Store Setup 
Richten Sie NgRx Store für [Feature beschreiben] ein. Fügen Sie Actions mit createActionGroup, einen Reducer, Selectoren und Effects für asynchrone Operationen hinzu.
Migration von BehaviorSubject 
Konvertieren Sie diesen RxJS BehaviorSubject Service zu modernen Angular Signals. Zeigen Sie die Before- und After-Patterns mit korrekter Reaktivität.

Bewährte Verfahren

  • Bevorzugen Sie Signals für neue Angular-Anwendungen - sie sind der empfohlene moderne Ansatz
  • Verwenden Sie computed() für alle abgeleiteten Werte, um automatische Aktualisierungen sicherzustellen
  • Lagern Sie State nahe bei dem Feature aus, das ihn verwendet, anstatt globalem State
  • Verwenden Sie NgRx, wenn Sie Time-Travel-Debugging, strikte Patterns oder Enterprise-Koordination benötigen

Vermeiden

  • Vermeiden Sie direkte Mutation von Signals - verwenden Sie immer set() oder update() Methoden
  • Über-globalisieren Sie State nicht - halten Sie ihn lokal, wenn möglich, um Komplexität zu reduzieren
  • Vermeiden Sie das Mischen von RxJS und Signals ohne klare Bridging-Patterns
  • Abonnieren Sie nicht in Components für State - verwenden Sie Signals direkt in Templates

Häufig gestellte Fragen

Was ist das einfachste State Management in Angular?
Signals sind am einfachsten. Verwenden Sie signal() für schreibbaren State und computed() für abgeleitete Werte. Keine zusätzlichen Bibliotheken erforderlich.
Wann sollte ich NgRx anstelle von Signals verwenden?
Verwenden Sie NgRx für große Anwendungen mit komplexen State-Flows, wenn Sie Time-Travel-Debugging benötigen oder wenn mehrere Teams am selben Codebase arbeiten.
Kann ich Signals mit RxJS mischen?
Ja. Verwenden Sie toSignal() zum Konvertieren von Observables zu Signals und toObservable() zum Konvertieren von Signals zu Observables. Angular bietet integrierte Unterstützung.
Was ist NgRx SignalStore?
SignalStore ist ein neues NgRx-Pattern, das reaktiven State mit berechneten Werten und Methoden bereitstellt. Es ist leichter als traditioneller NgRx Store.
Wie migriere ich von BehaviorSubject zu Signals?
Ersetzen Sie BehaviorSubject durch signal(). Ersetzen Sie .next() durch .set() oder .update(). Ersetzen Sie .asObservable() durch .asReadonly().
Schreibt diese Skill Code für mich?
Ja, diese Skill generiert Code-Beispiele und Patterns. Sie können sie in Ihr Projekt kopieren. Sie modifiziert keine Dateien direkt.

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/angular-state-management

Ref

main

Dateistruktur

📄 metadata.json

📄 README.md

📄 SKILL.md