此技能提供從傳統 AngularJS 應用程式遷移至現代 Angular 的全面指導，涵蓋混合式設定、元件轉換、服務遷移和路由模式。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“angular-migration”。 How do I set up a hybrid AngularJS/Angular application?
预期结果:
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 });
});
```
正在使用“angular-migration”。 What's the best approach for migrating a large AngularJS app?
预期结果:
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.
安全审计
安全This 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.
质量评分
你能构建什么
規劃 AngularJS 到 Angular 遷移
開發團隊規劃將其傳統 AngularJS 應用程式升級至現代 Angular，使用此技能來了解遷移策略並設定混合式應用程式。
轉換 AngularJS 元件
進行漸進式遷移的開發人員需要指導，以將 AngularJS 控制器和指令式元件轉換為具有適當 TypeScript 類型定義的 Angular 元件。
學習 Angular 遷移模式
不熟悉 Angular 的開發人員想要了解 AngularJS 和 Angular 之間的相依性注入運作方式有何不同，以及如何bridging這兩個框架。
试试这些提示
我需要將 AngularJS 應用程式遷移至 Angular。有哪些主要的遷移策略可用，對於大型企業應用程式我應該選擇哪一種？
如何使用 ngUpgrade 設定混合式 AngularJS/Angular 應用程式？向我展示啟動程序和模組配置。
將此 AngularJS 控制器轉換為 Angular 元件：（提供 AngularJS 程式碼）。向我展示具有適當匯入和裝飾器的 TypeScript 元件。
如何降級 Angular 服務使其在 AngularJS 中可用，以及如何升級 AngularJS 工廠使其在 Angular 中運作？
最佳实践
- 從服務開始遷移，因為它們比 UI 元件更容易轉換
- 從一開始就使用 TypeScript 以利用遷移期間的類型安全
- 在每個步驟持續測試，以在遷移過程早期發現問題
- 遵循官方 Angular 風格指南來編寫遷移期間的所有新程式碼
避免
- 避免在沒有適當的預備環境驗證和復原計劃的情況下進行一次性全面切換
- 不要在遷移業務邏輯和服務之前遷移 UI 元件
- 避免在同一功能內不一致地混合 AngularJS 和 Angular 模式