Migração Angular

Domine a migração do AngularJS para o Angular, incluindo aplicativos híbridos, conversão de componentes, mudanças na injeção de dependência e migração de roteamento.

Quando Usar Esta Habilidade

• Migrando aplicativos AngularJS (1.x) para Angular (2+)
• Executando aplicativos híbridos AngularJS/Angular
• Convertendo diretivas em componentes
• Modernizando a injeção de dependência
• Migrando sistemas de roteamento
• Atualizando para as versões mais recentes do Angular
• Implementando as melhores práticas do Angular

Estratégias de Migração

1. Big Bang (Reescrita Completa)

• Reescrever o aplicativo inteiro em Angular
• Desenvolvimento paralelo
• Mudar de uma vez
• Melhor para: Aplicativos pequenos, projetos novos (green field)

2. Incremental (Abordagem Híbrida)

• Executar AngularJS e Angular lado a lado
• Migrar funcionalidade por funcionalidade
• ngUpgrade para interoperabilidade
• Melhor para: Aplicativos grandes, entrega contínua

3. Fatia Vertical

• Migrar uma funcionalidade completamente
• Novas funcionalidades em Angular, manter as antigas em AngularJS
• Substituir gradualmente
• Melhor para: Aplicativos médios, funcionalidades distintas

Configuração de Aplicativo Híbrido

// main.ts - Bootstrap hybrid app
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);
    // Bootstrap AngularJS
    upgrade.bootstrap(document.body, ["myAngularJSApp"], { strictDi: true });
  });

// app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { UpgradeModule } from "@angular/upgrade/static";

@NgModule({
  imports: [BrowserModule, UpgradeModule],
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap() {
    // Bootstrapped manually in main.ts
  }
}

Migração de Componentes

Controlador AngularJS → Componente Angular

// Before: AngularJS controller
angular
  .module("myApp")
  .controller("UserController", function ($scope, UserService) {
    $scope.user = {};

    $scope.loadUser = function (id) {
      UserService.getUser(id).then(function (user) {
        $scope.user = user;
      });
    };

    $scope.saveUser = function () {
      UserService.saveUser($scope.user);
    };
  });

// After: Angular component
import { Component, OnInit } from "@angular/core";
import { UserService } from "./user.service";

@Component({
  selector: "app-user",
  template: `
    <div>
      <h2>{{ user.name }}</h2>
      <button (click)="saveUser()">Save</button>
    </div>
  `,
})
export class UserComponent implements OnInit {
  user: any = {};

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.loadUser(1);
  }

  loadUser(id: number) {
    this.userService.getUser(id).subscribe((user) => {
      this.user = user;
    });
  }

  saveUser() {
    this.userService.saveUser(this.user);
  }
}

Diretiva AngularJS → Componente Angular

// Before: AngularJS directive
angular.module("myApp").directive("userCard", function () {
  return {
    restrict: "E",
    scope: {
      user: "=",
      onDelete: "&",
    },
    template: `
      <div class="card">
        <h3>{{ user.name }}</h3>
        <button ng-click="onDelete()">Delete</button>
      </div>
    `,
  };
});

// After: Angular component
import { Component, Input, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "app-user-card",
  template: `
    <div class="card">
      <h3>{{ user.name }}</h3>
      <button (click)="delete.emit()">Delete</button>
    </div>
  `,
})
export class UserCardComponent {
  @Input() user: any;
  @Output() delete = new EventEmitter<void>();
}

// Usage: <app-user-card [user]="user" (delete)="handleDelete()"></app-user-card>

Migração de Serviços

// Before: AngularJS service
angular.module("myApp").factory("UserService", function ($http) {
  return {
    getUser: function (id) {
      return $http.get("/api/users/" + id);
    },
    saveUser: function (user) {
      return $http.post("/api/users", user);
    },
  };
});

// Depois: Serviço Angular
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";

@Injectable({
  providedIn: "root",
})
export class UserService {

…