ng-src / ng-href / ng-srcset in modern Angular
The ng- prefix existed so the browser would not request a URL containing raw {{ }} before AngularJS ran. Angular templates are compiled, so plain property bindings are enough.
Before · AngularJS
<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" />What changes
- ng-src and ng-href become [src] and [href].
- Links inside the app use routerLink instead of a hand-built href.
- NgOptimizedImage (the ngSrc attribute) adds lazy loading and priority hints, and generates a srcset when an image loader is configured.
Migration tip. Start with plain [src] bindings and move to NgOptimizedImage image by image, beginning with the ones above the fold. It needs dimensions for every image, so it is a task of its own.
Related
- $filter in JavaScript
- DI annotations ($inject, array syntax)
- module.config() / module.run()
- ng-disabled / ng-readonly / ng-checked
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn