AngularJS 1.8 → Angular 17
Plan Técnico de Migración

// GestorPro legacy — ClientesController
angular
  .module('gestorpro')
  .controller('ClientesController', function(
    $scope, $http, $routeParams,
    ClienteService, ToastService
  ) {
    $scope.clientes = [];
    $scope.loading = false;
    $scope.pagina = 1;

    $scope.cargarClientes = function() {
      $scope.loading = true;
      ClienteService.listar($scope.pagina)
        .then(function(res) {
          $scope.clientes = res.data;
          $scope.loading = false;
        });
    };

    $scope.eliminarCliente = function(id) {
      if(confirm('¿Eliminar?')) {
        ClienteService.eliminar(id).then(() => {
          ToastService.ok('Eliminado');
          $scope.cargarClientes();
        });
      }
    };

    // Init
    $scope.cargarClientes();
  });

// GestorPro modernizado — Angular 17 Standalone
@Component({
  selector: 'app-clientes',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <div class="clientes-page">
      <app-clientes-tabla
        [clientes]="clientes()"
        [cargando]="cargando()"
        (eliminar)="eliminarCliente($event)">
      </app-clientes-tabla>
    </div>
  `
})
export class ClientesComponent implements OnInit {
  // Signals en lugar de $scope
  private clienteService = inject(ClienteService);
  private toast = inject(ToastService);

  clientes = signal<Cliente[]>([]);
  cargando = signal(false);
  pagina = signal(1);

  ngOnInit() { this.cargarClientes(); }

  cargarClientes() {
    this.cargando.set(true);
    this.clienteService.listar(this.pagina())
      .pipe(finalize(() => this.cargando.set(false)))
      .subscribe(data => this.clientes.set(data));
  }

  eliminarCliente(id: number) {
    this.clienteService.eliminar(id).subscribe(() => {
      this.toast.ok('Cliente eliminado');
      this.cargarClientes();
    });
  }
}

// GestorPro legacy — ProyectoService
angular
  .module('gestorpro')
  .factory('ProyectoService', function($http) {
    var API = '/api/proyectos';

    return {
      listar: function(page) {
        return $http.get(API, {
          params: { page: page, limit: 20 }
        });
      },
      crear: function(data) {
        return $http.post(API, data);
      },
      actualizar: function(id, data) {
        return $http.put(API + '/' + id, data);
      },
      cambiarEstado: function(id, estado) {
        return $http.patch(API + '/' + id, {
          estado: estado
        });
      }
    };
  });

// GestorPro moderno — ProyectoService
import { Injectable, inject } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import type { Proyecto, EstadoProyecto } from './proyecto.model';

@Injectable({ providedIn: 'root' })
export class ProyectoService {
  private http = inject(HttpClient);
  private readonly API = '/api/proyectos';

  listar(page: number): Observable<Proyecto[]> {
    const params = new HttpParams()
      .set('page', page)
      .set('limit', 20);
    return this.http.get<Proyecto[]>(this.API, { params });
  }

  crear(data: Partial<Proyecto>): Observable<Proyecto> {
    return this.http.post<Proyecto>(this.API, data);
  }

  actualizar(id: number, data: Partial<Proyecto>): Observable<Proyecto> {
    return this.http.put<Proyecto>(`${this.API}/${id}`, data);
  }

  cambiarEstado(id: number, estado: EstadoProyecto): Observable<Proyecto> {
    return this.http.patch<Proyecto>(`${this.API}/${id}`, { estado });
  }
}

// GestorPro legacy — routing
angular
  .module('gestorpro')
  .config(function($routeProvider) {
    $routeProvider
      .when('/dashboard', {
        templateUrl: 'views/dashboard.html',
        controller: 'DashboardController'
      })
      .when('/clientes', {
        templateUrl: 'views/clientes.html',
        controller: 'ClientesController'
      })
      .when('/clientes/:id', {
        templateUrl: 'views/cliente-detalle.html',
        controller: 'ClienteDetalleController'
      })
      .when('/proyectos', {
        templateUrl: 'views/proyectos.html',
        controller: 'ProyectosController'
      })
      .otherwise({ redirectTo: '/dashboard' });
  });

// GestorPro moderno — lazy routes
import { Routes } from '@angular/router';
import { authGuard } from './auth/auth.guard';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    loadComponent: () => import(
      './dashboard/dashboard.component'
    ).then(m => m.DashboardComponent),
    canActivate: [authGuard]
  },
  {
    path: 'clientes',
    loadChildren: () => import(
      './clientes/clientes.routes'
    ).then(m => m.CLIENTES_ROUTES),
    canActivate: [authGuard]
  },
  {
    path: 'proyectos',
    loadChildren: () => import(
      './proyectos/proyectos.routes'
    ).then(m => m.PROYECTOS_ROUTES),
    canActivate: [authGuard]
  }
];