Die Frontend-Welt erwartete mit großer Sehnsucht Angular 3, nachdem Angular 2 im September 2016 veröffentlicht wurde.Angular 4 Javascript Framework Jedoch erschien statt Version 3 die Version 4 im März 2017. Wo ist die Version 3 geblieben?

Das Angular-Projekt setzt gezielt auf das System der semantischen Versionierung (SEMVER) mit dem Hauptziel der Versionsnummer eine große Bedeutung zu geben, aber auch Entwicklern einen besseren Umgang mit Updates zu ermöglichen. Auf Grundlage einer Versionsnummer in Form von MAJOR.MINOR.PATCH werden die einzelnen Elemente folgendermaßen erhöht:

  • MAJOR wird bei API-inkompatiblen Änderungen erhöht,
  • MINOR wird bei Funktionalitäten, welche kompatibel zu bisherigen API sind erhöht, und
  • PATCH wird bei Änderungen die ausschließlich API-kompatible Bugfixes umfassen erhöht.

Falls nun ein neues Feature hinzukommt, haben wir als Entwickler durch die Erhöhung der Minor-Version die Garantie, dass unsere Anwendung auf Angular Version 2 trotz eines Updates funktionieren sollte. Dabei können wir entscheiden, ob dieses Update eingespielt werden soll oder nicht.

Alle Angular-Pakete befinden sich in einem Git-Repository. Dabei sind alle Core-Pakete sind in der Major-Version 2 mit einer Ausnahme: der Router ist in Version 3. Um genau diese Unstimmigkeiten zu beheben, wurden alle Versionen auf Major-Version 4 gezogen. Dadurch ist es ab diesem Zeitpunkt möglich, alle Pakete innerhalb von Angular einheitlich nach SEMVER zu behandeln. Damit soll in Zukunft sichergestellt werden, dass Upgrades stabiler ablaufen und die Versionsnummer eben eine echte Bedeutung mit der Semantik hat.

Nun zu den Neuerungen:

View Engine

Eines von den vielen Haupt-Features, das mit der neuen Angular-Version verbessert und optimiert wurde, ist die View Engine. Durch die Änderungen können in den meisten Fällen die Größe von generiertem Code bis zu 60 Prozent kleiner sein. Weitere Informationen zur neuen View Engine gibt es im Design Doc.

Animation Package

Animationen waren immer Teil von dem Package @angular/core. Dies ist nun nicht mehr der Fall. Animationen haben nun ein eigenes Package. Wer also keine Animationen nutzt, bekommt den für ihn unnötigen Code nicht mehr mitgeliefert. Die Änderung vereinfacht es auch, die passende Dokumentation zu finden und verbessert Autocomplete.

Verbesserte *ngIf and *ngFor

Eines der meiner Meinung nach besten Neuerungen. Als Entwickler können wir nun if/else-Syntax beim Template-Binding nutzen und lokale Variablen zuweisen. Hier ein Beispiel:


<div *ngIf="userList | async as users; else loading">
<user-profile *ngFor="let user of users; count as count" [user]="user">
</user-profile>
<div>{{count}} total users</div>
</div>
<ng-template #loading>Loading...</ng-template>

Angular Universal

Universal, das Projekt, dass Entwicklern erlaubt Anuglar auf einem Server laufen zu lassen, ist jetzt wieder up-to-date mit Angular. Der Release ist der erste seit dem Community-getriebenen Original-Release. Der Universal-Code findet sich hauptsächlich in @angular/platform-server. Mehr dazu findet sich in der neuen renderModuleFactory-Methode und in einem Demo-Repository.

Bald folgt ein kleines Tutorial zu Angular 4. Bis dahin wünschen wir euch viel Spaß mit der neuen Version!

Serdar Nurgün

Author Serdar Nurgün

More posts by Serdar Nurgün

Leave a Reply