Downgrade (downgradeComponent / downgradeInjectable)

En ngUpgrade, hacer downgrade es envolver un componente o servicio de Angular para que el código AngularJS lo use como directiva o como inyectable.

Durante una migración híbrida, el código nuevo se escribe en Angular mientras la mayoría de las pantallas sigue en AngularJS. Las pantallas viejas necesitan una forma de usar el código nuevo. Las funciones downgradeComponent y downgradeInjectable de @angular/upgrade/static la ofrecen.

downgradeComponent devuelve una directiva AngularJS que renderiza un componente Angular. downgradeInjectable devuelve una factory AngularJS que entrega una instancia de un servicio Angular. En ambos casos hay una sola implementación, escrita en Angular, y AngularJS recibe un adaptador delgado.

Ejemplo

import { downgradeComponent, downgradeInjectable } from '@angular/upgrade/static';

angular.module('legacyApp')
  .directive('userCard', downgradeComponent({ component: UserCardComponent }))
  .factory('userService', downgradeInjectable(UserService));

Ahora un template AngularJS puede usar el componente. Los inputs y outputs usan la sintaxis de binding de Angular con nombres en kebab-case:

<user-card [user]="vm.user" (saved)="vm.onSaved($event)"></user-card>

Un controller AngularJS puede inyectar userService por nombre, como cualquier otro servicio.

Confusión frecuente

La palabra sugiere retroceder el código o empeorarlo. Nada se reescribe en AngularJS. El código Angular es la implementación real, y el wrapper de downgrade solo la expone al framework viejo.

De ahí sale un orden útil. Migra primero los servicios y los componentes hoja, hazles downgrade y deja que las pantallas legacy los consuman. A medida que más pantallas pasan a Angular, los wrappers se quedan sin consumidores y se pueden borrar. Los wrappers que quedan al final del proyecto indican trabajo sin terminar. La referencia de AngularJS a Angular lista el equivalente moderno de cada API.

Términos relacionados

• ngUpgrade (UpgradeModule)
• Aplicación híbrida (AngularJS + Angular)
• Migración incremental