$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 · Angularexport 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
- $http cache / $cacheFactory
- jQuery / angular.element in directives
- ng-repeat
- ngTouch (ng-swipe-left / ng-swipe-right)
¿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