技能 angular-migration
📦

angular-migration

安全

将 AngularJS 迁移到 Angular

也可从以下获取: wshobson

本技能提供全面的指导,帮助您将传统的 AngularJS 应用迁移到现代 Angular,涵盖混合设置、组件转换、服务迁移和路由模式。

支持: Claude Codex Code(CC)
🥉 75 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“angular-migration”。 如何设置混合 AngularJS/Angular 应用?

预期结果:

要设置混合应用,您需要:

1. 安装 @angular/upgrade 包
2. 先引导 Angular,然后使用 UpgradeModule 引导 AngularJS
3. 在 AppModule 中同时配置 BrowserModule 和 UpgradeModule

示例 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”。 迁移大型 AngularJS 应用的的最佳方法是什么?

预期结果:

对于大型应用,推荐使用增量(混合)方法:

1. **设置阶段**:安装 Angular CLI,使用 ngUpgrade 设置混合应用
2. **基础设施阶段**:迁移服务、工具类和共享组件
3. **功能迁移阶段**:逐个功能迁移,进行彻底测试
4. **清理阶段**:移除 AngularJS 代码和 ngUpgrade

这允许在逐步迁移应用的同时持续交付。

安全审计

安全
v1 • 2/24/2026

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.

1
已扫描文件
431
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude

质量评分

38
架构
100
可维护性
87
内容
50
社区
100
安全
100
规范符合性

你能构建什么

规划 AngularJS 到 Angular 的迁移

一个开发团队计划将传统的 AngularJS 应用升级到现代 Angular,使用本技能来了解迁移策略并设置混合应用。

转换 AngularJS 组件

需要进行增量迁移的开发人员需要指导将 AngularJS 控制器和指令转换为具有正确 TypeScript 类型定义的 Angular 组件。

学习 Angular 迁移模式

刚接触 Angular 的开发人员想了解 AngularJS 和 Angular 之间依赖注入的工作方式有何不同,以及如何桥接这两个框架。

试试这些提示

基本迁移策略
我需要将 AngularJS 应用迁移到 Angular。主要有哪些迁移策略可用?对于大型企业应用,我应该选择哪一种?
混合应用设置
如何使用 ngUpgrade 设置混合 AngularJS/Angular 应用?请展示引导过程和模块配置。
组件转换
将此 AngularJS 控制器转换为 Angular 组件:(提供 AngularJS 代码)。请展示具有正确导入和装饰器的 TypeScript 组件。
服务和依赖注入迁移
如何降级 Angular 服务以在 AngularJS 中使用,如何升级 AngularJS 工厂以在 Angular 中工作?

最佳实践

  • 首先从服务开始迁移,因为它们比 UI 组件更容易转换
  • 从一开始就使用 TypeScript 以在迁移过程中利用类型安全
  • 在每个步骤持续测试,以便在迁移过程早期发现问题
  • 遵循官方 Angular 风格指南编写迁移期间的所有新代码

避免

  • 避免在没有适当暂存验证和回滚计划的情况下进行大规模切换
  • 在迁移业务逻辑和服务之前不要迁移 UI 组件
  • 避免在同一功能内不一致地混用 AngularJS 和 Angular 模式

常见问题

什么是 ngUpgrade?为什么我需要它?
ngUpgrade 是一个 Angular 库,可帮助您在同一应用中运行 AngularJS 和 Angular。它提供 UpgradeModule,允许您在 Angular 应用中引导 AngularJS 组件,并在 AngularJS 代码中使用 Angular 服务。
我应该选择哪种迁移策略?
对于小型应用选择大爆炸方法,对于需要持续交付的大型应用选择增量(混合)方法,对于具有独立功能模块的中型应用选择垂直切片方法。
我可以在 AngularJS 模板中使用 Angular 组件吗?
是的,您可以使用 @angular/upgrade/static 中的 downgradeComponent 将 Angular 组件降级以在 AngularJS 模板中使用。
如何处理依赖注入的差异?
AngularJS 使用带有字符串名称的隐式依赖注入。Angular 使用带有类和 Inject 装饰器的显式依赖注入。使用 downgradeInjectable 和 upgradeModule 在框架间桥接服务。
我应该迁移到响应式表单还是模板驱动表单?
响应式表单在大多数情况下推荐使用,因为它们提供更好的类型安全性、更容易测试,并且对表单验证逻辑有更多控制。
从 AngularJS 到 Angular 的迁移通常需要多长时间?
迁移时间因应用规模、复杂度和团队经验而异。典型时间线为:设置(1-2 周)、基础设施(2-4 周)、功能迁移(因应用规模而异)、清理(1-2 周)。

开发者详情

文件结构

📄 SKILL.md