angular-migration

Name: angular-migration
Author: SamarthaKV29

64stars12forks

How to install angular-migration?

samarthakv29/antigravity-god-mode/angular-migration

$npx -y skills add SamarthaKV29/antigravity-god-mode --skill angular-migration

Installs into the current project.

Summary

Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or modernizing legacy Angular code.

Files · 1

View on GitHub

SKILL.md

1	# Angular Migration
2
3	Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.
4
5	## Use this skill when
6
7	- Migrating AngularJS (1.x) applications to Angular (2+)
8	- Running hybrid AngularJS/Angular applications
9	- Converting directives to components
10	- Modernizing dependency injection
11	- Migrating routing systems
12	- Updating to latest Angular versions
13	- Implementing Angular best practices
14
15	## Do not use this skill when
16
17	- You are not migrating from AngularJS to Angular
18	- The app is already on a modern Angular version
19	- You need only a small UI fix without framework changes
20
21	## Instructions
22
23	1. Assess the AngularJS codebase, dependencies, and migration risks.
24	2. Choose a migration strategy (hybrid vs rewrite) and define milestones.
25	3. Set up ngUpgrade and migrate modules, components, and routing.
26	4. Validate with tests and plan a safe cutover.
27
28	## Safety
29
30	- Avoid big-bang cutovers without rollback and staging validation.
31	- Keep hybrid compatibility testing during incremental migration.
32
33	## Migration Strategies
34
35	### 1. Big Bang (Complete Rewrite)
36	- Rewrite entire app in Angular
37	- Parallel development
38	- Switch over at once
39	- Best for: Small apps, green field projects
40
41	### 2. Incremental (Hybrid Approach)
42	- Run AngularJS and Angular side-by-side
43	- Migrate feature by feature
44	- ngUpgrade for interop
45	- Best for: Large apps, continuous delivery
46
47	### 3. Vertical Slice
48	- Migrate one feature completely
49	- New features in Angular, maintain old in AngularJS
50	- Gradually replace
51	- Best for: Medium apps, distinct features
52
53	## Hybrid App Setup
54
55	```typescript
56	// main.ts - Bootstrap hybrid app
57	import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
58	import { UpgradeModule } from '@angular/upgrade/static';
59	import { AppModule } from './app/app.module';
60
61	platformBrowserDynamic()
62	.bootstrapModule(AppModule)
63	.then(platformRef => {
64	const upgrade = platformRef.injector.get(UpgradeModule);
65	// Bootstrap AngularJS
66	upgrade.bootstrap(document.body, ['myAngularJSApp'], { strictDi: true });
67	});
68	```
69
70	```typescript
71	// app.module.ts
72	import { NgModule } from '@angular/core';
73	import { BrowserModule } from '@angular/platform-browser';
74	import { UpgradeModule } from '@angular/upgrade/static';
75
76	@NgModule({
77	imports: [
78	BrowserModule,
79	UpgradeModule
80	]
81	})
82	export class AppModule {
83	constructor(private upgrade: UpgradeModule) {}
84
85	ngDoBootstrap() {
86	// Bootstrapped manually in main.ts
87	}
88	}
89	```
90
91	## Component Migration
92
93	### AngularJS Controller → Angular Component
94	```javascript
95	// Before: AngularJS controller
96	angular.module('myApp').controller('UserController', function($scope, UserService) {
97	$scope.user = {};
98
99	$scope.loadUser = function(id) {
100	UserService.getUser(id).then(function(user) {
101	$scope.user = user;
102	});
103	};
104
105	$scope.saveUser = function() {
106	UserService.saveUser($scope.user);
107	};
108	});
109	```
110
111	```typescript
112	// After: Angular component
113	import { Component, OnInit } from '@angular/core';
114	import { UserService } from './user.service';
115
116	@Component({
117	selector: 'app-user',
118	template: `
119	<div>
120	<h2>{{ user.name }}</h2>
121	<button (click)="saveUser()">Save</button>
122	</div>
123	`
124	})
125	export class UserComponent implements OnInit {
126	user: any = {};
127
128	constructor(private userService: UserService) {}
129
130	ngOnInit() {
131	this.loadUser(1);
132	}
133
134	loadUser(id: number) {
135	this.userService.getUser(id).subscribe(user => {
136	this.user = user;
137	});
138	}
139
140	saveUser() {
141	this.userService.saveUser(this.user);
142	}
143	}
144	```
145
146	### AngularJS Directive → Angular Component
147	```javascript
148	// Before: AngularJS directive
149	angular.module('myApp').directive('userCard', function() {
150	return {
151	restrict: 'E',
152	scope: {
153	user: '=',
154	onDelete: '&'
155	},
156	template: `
157	<div class="card">
158	<h3>{{ user.name }}</h3>
159	<button ng-click="onDelete()">Delete</button>
160	</div>
161	`
162	};
163	});
164	```
165
166	```typescript
167	// After: Angular component
168	import { Component, Input, Output, EventEmitter } from '@angular/core';
169
170	@Component({
171	selector: 'app-user-card',
172	template: `
173	<div class="card">
174	<h3>{{ user.name }}</h3>
175	<button (click)="delete.emit()">Delete</button>
176	</div>
177	`
178	})
179	export class UserCardComponent {
180	@Input() user: any;
181	@Output() delete = new EventEmitter<void>();
182	}
183
184	// Usage: <app-user-card [user]="user" (delete)="handleDelete()"></app-user-card>
185	```
186
187	## Service Migration
188
189	```javascript
190	// Before: AngularJS service
191	angular.module('myApp').factory('UserService', function($http) {
192	return {
193	getUser: function(id) {
194	return $http.get('/api/users/' + id);
195	},
196	saveUser: fun

People who liked this also viewed

6 picks

Type

angular-migration

64stars12forks

View on GitHub

How to install angular-migration?

samarthakv29/antigravity-god-mode/angular-migration

$npx -y skills add SamarthaKV29/antigravity-god-mode --skill angular-migration

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Angular Migration
2
3	Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.
4
5	## Use this skill when
6
7	- Migrating AngularJS (1.x) applications to Angular (2+)
8	- Running hybrid AngularJS/Angular applications
9	- Converting directives to components
10	- Modernizing dependency injection
11	- Migrating routing systems
12	- Updating to latest Angular versions
13	- Implementing Angular best practices
14
15	## Do not use this skill when
16
17	- You are not migrating from AngularJS to Angular
18	- The app is already on a modern Angular version
19	- You need only a small UI fix without framework changes
20
21	## Instructions
22
23	1. Assess the AngularJS codebase, dependencies, and migration risks.
24	2. Choose a migration strategy (hybrid vs rewrite) and define milestones.
25	3. Set up ngUpgrade and migrate modules, components, and routing.
26	4. Validate with tests and plan a safe cutover.
27
28	## Safety
29
30	- Avoid big-bang cutovers without rollback and staging validation.
31	- Keep hybrid compatibility testing during incremental migration.
32
33	## Migration Strategies
34
35	### 1. Big Bang (Complete Rewrite)
36	- Rewrite entire app in Angular
37	- Parallel development
38	- Switch over at once
39	- Best for: Small apps, green field projects
40
41	### 2. Incremental (Hybrid Approach)
42	- Run AngularJS and Angular side-by-side
43	- Migrate feature by feature
44	- ngUpgrade for interop
45	- Best for: Large apps, continuous delivery
46
47	### 3. Vertical Slice
48	- Migrate one feature completely
49	- New features in Angular, maintain old in AngularJS
50	- Gradually replace
51	- Best for: Medium apps, distinct features
52
53	## Hybrid App Setup
54
55	```typescript
56	// main.ts - Bootstrap hybrid app
57	import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
58	import { UpgradeModule } from '@angular/upgrade/static';
59	import { AppModule } from './app/app.module';
60
61	platformBrowserDynamic()
62	.bootstrapModule(AppModule)
63	.then(platformRef => {
64	const upgrade = platformRef.injector.get(UpgradeModule);
65	// Bootstrap AngularJS
66	upgrade.bootstrap(document.body, ['myAngularJSApp'], { strictDi: true });
67	});
68	```
69
70	```typescript
71	// app.module.ts
72	import { NgModule } from '@angular/core';
73	import { BrowserModule } from '@angular/platform-browser';
74	import { UpgradeModule } from '@angular/upgrade/static';
75
76	@NgModule({
77	imports: [
78	BrowserModule,
79	UpgradeModule
80	]
81	})
82	export class AppModule {
83	constructor(private upgrade: UpgradeModule) {}
84
85	ngDoBootstrap() {
86	// Bootstrapped manually in main.ts
87	}
88	}
89	```
90
91	## Component Migration
92
93	### AngularJS Controller → Angular Component
94	```javascript
95	// Before: AngularJS controller
96	angular.module('myApp').controller('UserController', function($scope, UserService) {
97	$scope.user = {};
98
99	$scope.loadUser = function(id) {
100	UserService.getUser(id).then(function(user) {
101	$scope.user = user;
102	});
103	};
104
105	$scope.saveUser = function() {
106	UserService.saveUser($scope.user);
107	};
108	});
109	```
110
111	```typescript
112	// After: Angular component
113	import { Component, OnInit } from '@angular/core';
114	import { UserService } from './user.service';
115
116	@Component({
117	selector: 'app-user',
118	template: `
119	<div>
120	<h2>{{ user.name }}</h2>
121	<button (click)="saveUser()">Save</button>
122	</div>
123	`
124	})
125	export class UserComponent implements OnInit {
126	user: any = {};
127
128	constructor(private userService: UserService) {}
129
130	ngOnInit() {
131	this.loadUser(1);
132	}
133
134	loadUser(id: number) {
135	this.userService.getUser(id).subscribe(user => {
136	this.user = user;
137	});
138	}
139
140	saveUser() {
141	this.userService.saveUser(this.user);
142	}
143	}
144	```
145
146	### AngularJS Directive → Angular Component
147	```javascript
148	// Before: AngularJS directive
149	angular.module('myApp').directive('userCard', function() {
150	return {
151	restrict: 'E',
152	scope: {
153	user: '=',
154	onDelete: '&'
155	},
156	template: `
157	<div class="card">
158	<h3>{{ user.name }}</h3>
159	<button ng-click="onDelete()">Delete</button>
160	</div>
161	`
162	};
163	});
164	```
165
166	```typescript
167	// After: Angular component
168	import { Component, Input, Output, EventEmitter } from '@angular/core';
169
170	@Component({
171	selector: 'app-user-card',
172	template: `
173	<div class="card">
174	<h3>{{ user.name }}</h3>
175	<button (click)="delete.emit()">Delete</button>
176	</div>
177	`
178	})
179	export class UserCardComponent {
180	@Input() user: any;
181	@Output() delete = new EventEmitter<void>();
182	}
183
184	// Usage: <app-user-card [user]="user" (delete)="handleDelete()"></app-user-card>
185	```
186
187	## Service Migration
188
189	```javascript
190	// Before: AngularJS service
191	angular.module('myApp').factory('UserService', function($http) {
192	return {
193	getUser: function(id) {
194	return $http.get('/api/users/' + id);
195	},
196	saveUser: fun

People who liked this also viewed

6 picks

Type