Disponibilidade de material de apoio

Este texto do catálogo contém as orientações embutidas abaixo, mas não inclui os seguintes caminhos de suporte. Eles são pré-requisitos externos, não arquivos agrupados:

• <support-root>/references/hybrid-mode.md
• <support-root>/references/component-migration.md
• <support-root>/references/dependency-injection.md
• <support-root>/references/routing.md
• <support-root>/assets/hybrid-bootstrap.ts
• <support-root>/assets/migration-timeline.md
• <support-root>/scripts/analyze-angular-app.sh

Solicite o material de apoio original ou uma instalação existente antes de usar uma etapa que dependa desses caminhos; este catálogo não identifica uma fonte de download verificada para eles. Resolva cada caminho em relação a essa instalação, inspecione seu conteúdo e verifique quaisquer licenças aplicáveis e pré-requisitos de execução. Não execute um comando ou afirme que um procedimento referenciado foi seguido até que seu arquivo necessário exista. Não fabrique os scripts ausentes nem trate um arquivo não relacionado com o mesmo nome como equivalente. Etapas independentes totalmente documentadas aqui podem prosseguir dentro do escopo autorizado do usuário; relate qualquer etapa dependente como indisponível.

Migração Angular

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

Use esta habilidade quando

• 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

Não use esta habilidade quando

• Você não está migrando do AngularJS para o Angular
• O aplicativo já está em uma versão moderna do Angular
• Você precisa apenas de uma pequena correção na interface do usuário sem alterações no framework

Instruções

1. Avalie a base de código do AngularJS, dependências e riscos de migração.
2. Escolha uma estratégia de migração (híbrida vs. reescrita) e defina marcos.
3. Configure o ngUpgrade e migre módulos, componentes e roteamento.
4. Valide com testes e planeje uma transição segura.

Segurança

• Evite transições "big-bang" sem rollback e validação em staging.
• Mantenha testes de compatibilidade híbrida durante a migração incremental.

Estratégias de Migração

1. Big Bang (Reescrita Completa)

• Reescreva o aplicativo inteiro em Angular
• Desenvolvimento paralelo
• Transição de uma vez
• Melhor para: Aplicativos pequenos, projetos "green field"

2. Incremental (Abordagem Híbrida)

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

3. Fatia Vertical

• Migre uma funcionalidade completamente
• Novas funcionalidades em Angular, mantenha as antigas em AngularJS
• Substitua 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);
  };
});

// Depois: Componente Angular
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

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

…