How does it handle service migration?

It provides patterns for converting AngularJS factories and services into Angular's class-based injectable services, including examples of how to 'downgrade' or 'upgrade' services to be used across both frameworks.

What migration strategies does this skill support?

It supports three main strategies: the Big Bang complete rewrite, the Incremental Hybrid approach using ngUpgrade, and the Vertical Slice feature-by-feature transition.

Does it cover the transition from $scope to modern Angular patterns?

Yes, the skill provides clear mappings for moving from $scope and controllers to component-based architecture with proper lifecycle hooks like ngOnInit.

Can this skill help with hybrid applications?

Yes, it provides specific boilerplate and logic for bootstrapping hybrid apps where AngularJS and modern Angular run side-by-side during a transition period.

Angular Migration & Modernization

Name: Angular Migration & Modernization
Author: amurata

byamurata

•

Developer Tools

Facilitates the seamless transition from legacy AngularJS 1.x to modern Angular through hybrid strategies and automated code transformation patterns.

This skill provides comprehensive guidance and implementation patterns for upgrading AngularJS (1.x) applications to modern Angular (2+). It supports various migration strategies, including complete rewrites and incremental hybrid approaches using ngUpgrade, allowing both frameworks to run side-by-side. Developers can leverage detailed templates and patterns for converting controllers to components, migrating legacy services to TypeScript-based injectables, and reconfiguring routing systems, ensuring a structured and low-risk modernization process for enterprise web applications.

Key Features

01Pattern-based conversion of controllers and directives to modern components

02Step-by-step routing migration strategies for ngRoute and UI-Router

03Support for hybrid AngularJS/Angular application setup using ngUpgrade

04Modernization of legacy services and dependency injection systems

05Guidance for transitioning from $scope logic to Reactive Forms and RxJS

063 GitHub stars

Use Cases

01Refactoring legacy JavaScript directives into reusable TypeScript Angular components

02Implementing a hybrid architecture to deliver new features in Angular while maintaining legacy code

03Modernizing enterprise AngularJS 1.x applications to the latest Angular version

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add amurata/cc-tools angular-migration

For use in Claude.ai and ChatGPT

Download Skill