Cette compétence fournit des conseils complets pour migrer les applications AngularJS héritées vers Angular moderne, couvrant la configuration hybride, la conversion des composants, la migration des services et les modèles de routage.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "angular-migration". How do I set up a hybrid AngularJS/Angular application?
Résultat attendu:
To set up a hybrid application, you need to:
1. Install @angular/upgrade package
2. Bootstrap Angular first, then use UpgradeModule to bootstrap AngularJS
3. Configure your AppModule with both BrowserModule and UpgradeModule
Example main.ts:
```typescript
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app/app.module';
platformBrowserDynamic()
.bootstrapModule(AppModule)
.then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule);
upgrade.bootstrap(document.body, ['myAngularJSApp'], { strictDi: true });
});
```
Utilisation de "angular-migration". What's the best approach for migrating a large AngularJS app?
Résultat attendu:
For large applications, the Incremental (Hybrid) approach is recommended:
1. **Setup Phase**: Install Angular CLI, set up hybrid app with ngUpgrade
2. **Infrastructure Phase**: Migrate services, utilities, and shared components
3. **Feature Migration**: Migrate feature by feature, testing thoroughly
4. **Cleanup Phase**: Remove AngularJS code and ngUpgrade
This allows continuous delivery while gradually migrating the application.
Audit de sécurité
SûrThis skill is a documentation file containing code examples and migration guides for AngularJS to Angular migration. Static findings flagged backticks (code fences), example API calls in code blocks, and references to assessment/setup tasks - all false positives. No actual security concerns detected.
Score de qualité
Ce que vous pouvez construire
Planification de la migration AngularJS vers Angular
Une équipe de développement cherchant à mettre à niveau son application AngularJS héritée vers Angular moderne utilise cette compétence pour comprendre les stratégies de migration et configurer une application hybride.
Conversion des composants AngularJS
Un développeur travaillant sur une migration incrémentielle a besoin de conseils pour convertir les contrôleurs et directives AngularJS en composants Angular avec un typage TypeScript approprié.
Apprentissage des modèles de migration Angular
Un développeur newcomer dans Angular veut comprendre comment l'injection de dépendances fonctionne différemment entre AngularJS et Angular et comment relier les deux frameworks.
Essayez ces prompts
Je dois migrer mon application AngularJS vers Angular. Quelles sont les principales stratégies de migration disponibles et laquelle dois-je choisir pour une grande application d'entreprise?
Comment configurer une application hybride AngularJS/Angular à l'aide de ngUpgrade? Montrez-moi le processus de démarrage et la configuration du module.
Convertissez ce contrôleur AngularJS en composant Angular: (fournissez le code AngularJS). Montrez-moi le composant TypeScript avec les imports et décorateurs appropriés.
Comment rétrograder un service Angular pour le rendre disponible dans AngularJS, et comment mettre à niveau une factory AngularJS pour fonctionner dans Angular?
Bonnes pratiques
- Commencer la migration par les services car ils sont plus faciles à convertir que les composants UI
- Utiliser TypeScript dès le début pour bénéficier de la sécurité des types pendant la migration
- Tester en continu à chaque étape pour détecter les problèmes tôt dans le processus de migration
- Suivre le guide de style Angular officiel pour tout nouveau code écrit pendant la migration
Éviter
- Éviter les basculements complets sans validation de staging appropriée et plans de rollback
- Ne pas migrer les composants UI avant d'avoir migré la logique métier et les services
- Éviter de mélanger les modèles AngularJS et Angular de manière incohérente au sein d'une même fonctionnalité