ng-src / ng-href / ng-srcset en Angular moderno

El prefijo ng- existía para que el navegador no pidiera una URL con {{ }} sin resolver antes de que AngularJS corriera. Los templates de Angular se compilan, así que los bindings de propiedad comunes alcanzan.

<img ng-src="{{ vm.user.avatarUrl }}" alt="{{ vm.user.name }}">
<a ng-href="/users/{{ vm.user.id }}">Profile</a>
<a ng-href="{{ vm.user.website }}">Website</a>
<img ng-srcset="{{ vm.hero.small }} 480w, {{ vm.hero.large }} 1200w">

<img [src]="user().avatarUrl" [alt]="user().name" />
<a [routerLink]="['/users', user().id]">Profile</a>
<a [href]="user().website">Website</a>

<!-- NgOptimizedImage: needs width and height (or fill) -->
<img [ngSrc]="hero().path" width="1200" height="400"
     sizes="100vw" priority alt="Hero" />

Qué cambia

• ng-src y ng-href pasan a ser [src] y [href].
• Los enlaces internos de la app usan routerLink en vez de un href armado a mano.
• NgOptimizedImage (el atributo ngSrc) agrega carga diferida e indicaciones de prioridad, y genera un srcset cuando hay un loader de imágenes configurado.

Relacionado

• $filter in JavaScript
• DI annotations ($inject, array syntax)
• module.config() / module.run()
• ng-disabled / ng-readonly / ng-checked