wehub-resource-sync
80 lines
1.8 KiB
Markdown
80 lines
1.8 KiB
Markdown
# angular-migration — additional patterns and templates
|
|
|
|
## Forms Migration
|
|
|
|
```html
|
|
<!-- Before: AngularJS -->
|
|
<form name="userForm" ng-submit="saveUser()">
|
|
<input type="text" ng-model="user.name" required />
|
|
<input type="email" ng-model="user.email" required />
|
|
<button ng-disabled="userForm.$invalid">Save</button>
|
|
</form>
|
|
```
|
|
|
|
```typescript
|
|
// After: Angular (Template-driven)
|
|
@Component({
|
|
template: `
|
|
<form #userForm="ngForm" (ngSubmit)="saveUser()">
|
|
<input type="text" [(ngModel)]="user.name" name="name" required>
|
|
<input type="email" [(ngModel)]="user.email" name="email" required>
|
|
<button [disabled]="userForm.invalid">Save</button>
|
|
</form>
|
|
`
|
|
})
|
|
|
|
// Or Reactive Forms (preferred)
|
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
|
|
|
@Component({
|
|
template: `
|
|
<form [formGroup]="userForm" (ngSubmit)="saveUser()">
|
|
<input formControlName="name">
|
|
<input formControlName="email">
|
|
<button [disabled]="userForm.invalid">Save</button>
|
|
</form>
|
|
`
|
|
})
|
|
export class UserFormComponent {
|
|
userForm: FormGroup;
|
|
|
|
constructor(private fb: FormBuilder) {
|
|
this.userForm = this.fb.group({
|
|
name: ['', Validators.required],
|
|
email: ['', [Validators.required, Validators.email]]
|
|
});
|
|
}
|
|
|
|
saveUser() {
|
|
console.log(this.userForm.value);
|
|
}
|
|
}
|
|
```
|
|
|
|
## Migration Timeline
|
|
|
|
```
|
|
Phase 1: Setup (1-2 weeks)
|
|
- Install Angular CLI
|
|
- Set up hybrid app
|
|
- Configure build tools
|
|
- Set up testing
|
|
|
|
Phase 2: Infrastructure (2-4 weeks)
|
|
- Migrate services
|
|
- Migrate utilities
|
|
- Set up routing
|
|
- Migrate shared components
|
|
|
|
Phase 3: Feature Migration (varies)
|
|
- Migrate feature by feature
|
|
- Test thoroughly
|
|
- Deploy incrementally
|
|
|
|
Phase 4: Cleanup (1-2 weeks)
|
|
- Remove AngularJS code
|
|
- Remove ngUpgrade
|
|
- Optimize bundle
|
|
- Final testing
|
|
```
|