Carlos Cifuentes
Referencia AngularJS → Angular

$resource .$promise and $resolved en Angular moderno

$resource devolvía un objeto vacío que se llenaba después, con $promise y $resolved adjuntos. HttpClient devuelve un observable, y el estado de carga pasa a ser un valor explícito.

Antes · AngularJS
vm.user = User.get({ id: $stateParams.id });
vm.user.$promise
  .then(function (user) { vm.title = user.name; })
  .catch(function () { vm.error = true; });

<div ng-if="!vm.user.$resolved">Loading…</div>
<h2 ng-if="vm.user.$resolved">{{ vm.user.name }}</h2>
Después · Angular
export class UserDetailComponent {
  private users = inject(UserService);
  id = input.required<string>();

  state = toSignal(
    toObservable(this.id).pipe(
      switchMap(id => this.users.get(id).pipe(
        map(user => ({ status: 'ready' as const, user })),
        startWith({ status: 'loading' as const }),
        catchError(() => of({ status: 'error' as const })),
      )),
    ),
    { initialValue: { status: 'loading' as const } },
  );
}

Qué cambia

  • No hay un objeto a medio llenar: el template recibe un estado que es loading, ready o error, y maneja cada caso con @if o @switch.
  • Las cadenas de $promise.then pasan a ser operadores RxJS, o firstValueFrom cuando async/await se lee mejor.
  • Los métodos de instancia como $save y $delete pasan a ser métodos de un servicio que reciben la entidad como argumento.

Consejo de migración. Angular también tiene APIs de resource (resource, rxResource, httpResource) que empaquetan este patrón de valor, carga y error. Revisa su estado de estabilidad en tu versión de Angular antes de construir sobre ellas.

Relacionado

¿Planeas una migración o una plataforma de microfrontends?

En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.

Escríbeme por LinkedIn