[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-46cf4f0a-c1df-4a6a-96bf-af079e7b98e3":3,"$fsRTNj00uERXAtPY7XM2JznJ1eoo6DvyP179xfudiz7Y":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"46cf4f0a-c1df-4a6a-96bf-af079e7b98e3","angular-migration","掌握从AngularJS迁移到Angular的技巧，包括混合应用、组件转换、依赖注入变更和路由迁移。","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: angular-migration\ndescription: \"Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# Angular Migration\n\nMaster AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.\n\n## Use this skill when\n\n- Migrating AngularJS (1.x) applications to Angular (2+)\n- Running hybrid AngularJS\u002FAngular applications\n- Converting directives to components\n- Modernizing dependency injection\n- Migrating routing systems\n- Updating to latest Angular versions\n- Implementing Angular best practices\n\n## Do not use this skill when\n\n- You are not migrating from AngularJS to Angular\n- The app is already on a modern Angular version\n- You need only a small UI fix without framework changes\n\n## Instructions\n\n1. Assess the AngularJS codebase, dependencies, and migration risks.\n2. Choose a migration strategy (hybrid vs rewrite) and define milestones.\n3. Set up ngUpgrade and migrate modules, components, and routing.\n4. Validate with tests and plan a safe cutover.\n\n## Safety\n\n- Avoid big-bang cutovers without rollback and staging validation.\n- Keep hybrid compatibility testing during incremental migration.\n\n## Migration Strategies\n\n### 1. Big Bang (Complete Rewrite)\n- Rewrite entire app in Angular\n- Parallel development\n- Switch over at once\n- **Best for:** Small apps, green field projects\n\n### 2. Incremental (Hybrid Approach)\n- Run AngularJS and Angular side-by-side\n- Migrate feature by feature\n- ngUpgrade for interop\n- **Best for:** Large apps, continuous delivery\n\n### 3. Vertical Slice\n- Migrate one feature completely\n- New features in Angular, maintain old in AngularJS\n- Gradually replace\n- **Best for:** Medium apps, distinct features\n\n## Hybrid App Setup\n\n```typescript\n\u002F\u002F main.ts - Bootstrap hybrid app\nimport { platformBrowserDynamic } from '@angular\u002Fplatform-browser-dynamic';\nimport { UpgradeModule } from '@angular\u002Fupgrade\u002Fstatic';\nimport { AppModule } from '.\u002Fapp\u002Fapp.module';\n\nplatformBrowserDynamic()\n  .bootstrapModule(AppModule)\n  .then(platformRef => {\n    const upgrade = platformRef.injector.get(UpgradeModule);\n    \u002F\u002F Bootstrap AngularJS\n    upgrade.bootstrap(document.body, ['myAngularJSApp'], { strictDi: true });\n  });\n```\n\n```typescript\n\u002F\u002F app.module.ts\nimport { NgModule } from '@angular\u002Fcore';\nimport { BrowserModule } from '@angular\u002Fplatform-browser';\nimport { UpgradeModule } from '@angular\u002Fupgrade\u002Fstatic';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    UpgradeModule\n  ]\n})\nexport class AppModule {\n  constructor(private upgrade: UpgradeModule) {}\n\n  ngDoBootstrap() {\n    \u002F\u002F Bootstrapped manually in main.ts\n  }\n}\n```\n\n## Component Migration\n\n### AngularJS Controller → Angular Component\n```javascript\n\u002F\u002F Before: AngularJS controller\nangular.module('myApp').controller('UserController', function($scope, UserService) {\n  $scope.user = {};\n\n  $scope.loadUser = function(id) {\n    UserService.getUser(id).then(function(user) {\n      $scope.user = user;\n    });\n  };\n\n  $scope.saveUser = function() {\n    UserService.saveUser($scope.user);\n  };\n});\n```\n\n```typescript\n\u002F\u002F After: Angular component\nimport { Component, OnInit } from '@angular\u002Fcore';\nimport { UserService } from '.\u002Fuser.service';\n\n@Component({\n  selector: 'app-user',\n  template: `\n    \u003Cdiv>\n      \u003Ch2>{{ user.name }}\u003C\u002Fh2>\n      \u003Cbutton (click)=\"saveUser()\">Save\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  `\n})\nexport class UserComponent implements OnInit {\n  user: any = {};\n\n  constructor(private userService: UserService) {}\n\n  ngOnInit() {\n    this.loadUser(1);\n  }\n\n  loadUser(id: number) {\n    this.userService.getUser(id).subscribe(user => {\n      this.user = user;\n    });\n  }\n\n  saveUser() {\n    this.userService.saveUser(this.user);\n  }\n}\n```\n\n### AngularJS Directive → Angular Component\n```javascript\n\u002F\u002F Before: AngularJS directive\nangular.module('myApp').directive('userCard', function() {\n  return {\n    restrict: 'E',\n    scope: {\n      user: '=',\n      onDelete: '&'\n    },\n    template: `\n      \u003Cdiv class=\"card\">\n        \u003Ch3>{{ user.name }}\u003C\u002Fh3>\n        \u003Cbutton ng-click=\"onDelete()\">Delete\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    `\n  };\n});\n```\n\n```typescript\n\u002F\u002F After: Angular component\nimport { Component, Input, Output, EventEmitter } from '@angular\u002Fcore';\n\n@Component({\n  selector: 'app-user-card',\n  template: `\n    \u003Cdiv class=\"card\">\n      \u003Ch3>{{ user.name }}\u003C\u002Fh3>\n      \u003Cbutton (click)=\"delete.emit()\">Delete\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  `\n})\nexport class UserCardComponent {\n  @Input() user: any;\n  @Output() delete = new EventEmitter\u003Cvoid>();\n}\n\n\u002F\u002F Usage: \u003Capp-user-card [user]=\"user\" (delete)=\"handleDelete()\">\u003C\u002Fapp-user-card>\n```\n\n## Service Migration\n\n```javascript\n\u002F\u002F Before: AngularJS service\nangular.module('myApp').factory('UserService', function($http) {\n  return {\n    getUser: function(id) {\n      return $http.get('\u002Fapi\u002Fusers\u002F' + id);\n    },\n    saveUser: function(user) {\n      return $http.post('\u002Fapi\u002Fusers', user);\n    }\n  };\n});\n```\n\n```typescript\n\u002F\u002F After: Angular service\nimport { Injectable } from '@angular\u002Fcore';\nimport { HttpClient } from '@angular\u002Fcommon\u002Fhttp';\nimport { Observable } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class UserService {\n  constructor(private http: HttpClient) {}\n\n  getUser(id: number): Observable\u003Cany> {\n    return this.http.get(`\u002Fapi\u002Fusers\u002F${id}`);\n  }\n\n  saveUser(user: any): Observable\u003Cany> {\n    return this.http.post('\u002Fapi\u002Fusers', user);\n  }\n}\n```\n\n## Dependency Injection Changes\n\n### Downgrading Angular → AngularJS\n```typescript\n\u002F\u002F Angular service\nimport { Injectable } from '@angular\u002Fcore';\n\n@Injectable({ providedIn: 'root' })\nexport class NewService {\n  getData() {\n    return 'data from Angular';\n  }\n}\n\n\u002F\u002F Make available to AngularJS\nimport { downgradeInjectable } from '@angular\u002Fupgrade\u002Fstatic';\n\nangular.module('myApp')\n  .factory('newService', downgradeInjectable(NewService));\n\n\u002F\u002F Use in AngularJS\nangular.module('myApp').controller('OldController', function(newService) {\n  console.log(newService.getData());\n});\n```\n\n### Upgrading AngularJS → Angular\n```typescript\n\u002F\u002F AngularJS service\nangular.module('myApp').factory('oldService', function() {\n  return {\n    getData: function() {\n      return 'data from AngularJS';\n    }\n  };\n});\n\n\u002F\u002F Make available to Angular\nimport { InjectionToken } from '@angular\u002Fcore';\n\nexport const OLD_SERVICE = new InjectionToken\u003Cany>('oldService');\n\n@NgModule({\n  providers: [\n    {\n      provide: OLD_SERVICE,\n      useFactory: (i: any) => i.get('oldService'),\n      deps: ['$injector']\n    }\n  ]\n})\n\n\u002F\u002F Use in Angular\n@Component({...})\nexport class NewComponent {\n  constructor(@Inject(OLD_SERVICE) private oldService: any) {\n    console.log(this.oldService.getData());\n  }\n}\n```\n\n## Routing Migration\n\n```javascript\n\u002F\u002F Before: AngularJS routing\nangular.module('myApp').config(function($routeProvider) {\n  $routeProvider\n    .when('\u002Fusers', {\n      template: '\u003Cuser-list>\u003C\u002Fuser-list>'\n    })\n    .when('\u002Fusers\u002F:id', {\n      template: '\u003Cuser-detail>\u003C\u002Fuser-detail>'\n    });\n});\n```\n\n```typescript\n\u002F\u002F After: Angular routing\nimport { NgModule } from '@angular\u002Fcore';\nimport { RouterModule, Routes } from '@angular\u002Frouter';\n\nconst routes: Routes = [\n  { path: 'users', component: UserListComponent },\n  { path: 'users\u002F:id', component: UserDetailComponent }\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule {}\n```\n\n## Forms Migration\n\n```html\n\u003C!-- Before: AngularJS -->\n\u003Cform name=\"userForm\" ng-submit=\"saveUser()\">\n  \u003Cinput type=\"text\" ng-model=\"user.name\" required>\n  \u003Cinput type=\"email\" ng-model=\"user.email\" required>\n  \u003Cbutton ng-disabled=\"userForm.$invalid\">Save\u003C\u002Fbutton>\n\u003C\u002Fform>\n```\n\n```typescript\n\u002F\u002F After: Angular (Template-driven)\n@Component({\n  template: `\n    \u003Cform #userForm=\"ngForm\" (ngSubmit)=\"saveUser()\">\n      \u003Cinput type=\"text\" [(ngModel)]=\"user.name\" name=\"name\" required>\n      \u003Cinput type=\"email\" [(ngModel)]=\"user.email\" name=\"email\" required>\n      \u003Cbutton [disabled]=\"userForm.invalid\">Save\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  `\n})\n\n\u002F\u002F Or Reactive Forms (preferred)\nimport { FormBuilder, FormGroup, Validators } from '@angular\u002Fforms';\n\n@Component({\n  template: `\n    \u003Cform [formGroup]=\"userForm\" (ngSubmit)=\"saveUser()\">\n      \u003Cinput formControlName=\"name\">\n      \u003Cinput formControlName=\"email\">\n      \u003Cbutton [disabled]=\"userForm.invalid\">Save\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  `\n})\nexport class UserFormComponent {\n  userForm: FormGroup;\n\n  constructor(private fb: FormBuilder) {\n    this.userForm = this.fb.group({\n      name: ['', Validators.required],\n      email: ['', [Validators.required, Validators.email]]\n    });\n  }\n\n  saveUser() {\n    console.log(this.userForm.value);\n  }\n}\n```\n\n## Migration Timeline\n\n```\nPhase 1: Setup (1-2 weeks)\n- Install Angular CLI\n- Set up hybrid app\n- Configure build tools\n- Set up testing\n\nPhase 2: Infrastructure (2-4 weeks)\n- Migrate services\n- Migrate utilities\n- Set up routing\n- Migrate shared components\n\nPhase 3: Feature Migration (varies)\n- Migrate feature by feature\n- Test thoroughly\n- Deploy incrementally\n\nPhase 4: Cleanup (1-2 weeks)\n- Remove AngularJS code\n- Remove ngUpgrade\n- Optimize bundle\n- Final testing\n```\n\n## Resources\n\n- **references\u002Fhybrid-mode.md**: Hybrid app patterns\n- **references\u002Fcomponent-migration.md**: Component conversion guide\n- **references\u002Fdependency-injection.md**: DI migration strategies\n- **references\u002Frouting.md**: Routing migration\n- **assets\u002Fhybrid-bootstrap.ts**: Hybrid app template\n- **assets\u002Fmigration-timeline.md**: Project planning\n- **scripts\u002Fanalyze-angular-app.sh**: App analysis script\n\n## Best Practices\n\n1. **Start with Services**: Migrate services first (easier)\n2. **Incremental Approach**: Feature-by-feature migration\n3. **Test Continuously**: Test at every step\n4. **Use TypeScript**: Migrate to TypeScript early\n5. **Follow Style Guide**: Angular style guide from day 1\n6. **Optimize Later**: Get it working, then optimize\n7. **Document**: Keep migration notes\n\n## Common Pitfalls\n\n- Not setting up hybrid app correctly\n- Migrating UI before logic\n- Ignoring change detection differences\n- Not handling scope properly\n- Mixing patterns (AngularJS + Angular)\n- Inadequate testing\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,131,1350,"2026-05-16 13:02:54",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"689547ac-55d1-435c-8072-25cecf903145","1.0.0","angular-migration.zip",3710,"uploads\u002Fskills\u002F46cf4f0a-c1df-4a6a-96bf-af079e7b98e3\u002Fangular-migration.zip","49515fc521c915c9fc21b4a214af807d6130bf3304f88e739fea5cd0744a47e6","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":10587}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]