Angular Expert
Créer des applications Angular modernes avec Signals
Vous luttez avec des modèles Angular obsolètes et des NgModules complexes ? Cette compétence vous offre une expertise sur Angular moderne (v20+) avec Signals, Composants Autonomes et architecture sans Zone.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "Angular Expert". Create a user card component with signal inputs
النتيجة المتوقعة:
A standalone UserCardComponent using input() for id, name, and role properties with defaults, output() for select events, and a computed signal for display formatting.
استخدام "Angular Expert". How do I migrate from @Input() to signal inputs?
النتيجة المتوقعة:
Replace @Input() decorator with input() function. For required inputs use input.required<T>(), for optional use input<T>(defaultValue). Update template references to call signals as functions: {{ name() }} instead of {{ name }}.
التدقيق الأمني
آمنAll static analysis findings were false positives. The skill contains documentation-only content (markdown and JSON configuration) with no executable code. URL references point to official Angular documentation. Markdown code formatting was incorrectly flagged as shell execution. No actual security risks detected.
درجة الجودة
ماذا يمكنك بناءه
Configuration d'un nouveau projet Angular
Obtenez une expertise pour démarrer une application Angular moderne avec Signals, Composants Autonomes et une configuration optimale dès le début.
Modernisation d'Angular existant
Planifiez et exécutez une migration progressive des NgModules vers les Composants Autonomes, en adoptant les modèles Signals et sans Zone de manière incrémentale.
Optimisation des performances
Implémentez des modèles avancés comme le chargement différé, l'hydration incrémentale et la détection de changement OnPush pour des performances maximales.
جرّب هذه الموجهات
Create a new Angular component using Signals for state management. The component should display a counter with increment and decrement buttons, using signal inputs for initial value and signal outputs for events.
Help me convert this existing NgModule-based Angular component to a Standalone Component. Update all imports, remove module dependencies, and ensure the component uses modern signal-based inputs and outputs.
Guide me through converting an existing Angular application to Zoneless mode. Explain the configuration changes needed, how to handle change detection triggers, and what patterns to use for async operations without zone.js.
Set up server-side rendering with incremental hydration for an Angular application. Configure defer blocks with appropriate triggers (on viewport, on interaction, on idle) for optimal Core Web Vitals scores.
أفضل الممارسات
- Utilisez Signals pour l'état local des composants et RxJS pour les flux asynchrones comme les requêtes HTTP
- Activez la détection de changement OnPush et laissez Signals déclencher les mises à jour automatiquement
- Préférez les Composants Autonomes avec import directs aux SharedModules pour un meilleur tree-shaking
تجنب
- Utiliser RxJS BehaviorSubject pour un état local simple quand Signals suffisent
- Charger des modules de fonctionnalités entiers de manière impatiente au lieu d'utiliser loadComponent et les defer blocks
- Mélanger des modèles de décorateurs hérités avec Signals causant une détection de changement incohérente