Winkel 4 - Übersicht

Es gibt drei Hauptversionen von Angular. Die erste Version, die veröffentlicht wurde, ist Angular1, das auch AngularJS genannt wird. Auf Angular1 folgte Angular2, das im Vergleich zu Angular1 viele Änderungen aufwies.

Die Struktur von Angular basiert auf der Komponenten- / Servicearchitektur. AngularJS basierte auf dem Model View Controller.Angular 4 Die Veröffentlichung im März 2017 ist ein großer Durchbruch und die neueste Veröffentlichung des Angular-Teams nach Angular2.

Angular 4 ist fast identisch mit Angular 2. Es ist abwärtskompatibel mit Angular 2. In Angular 2 entwickelte Projekte funktionieren problemlos mit Angular 4.

Lassen Sie uns nun die neuen Funktionen und die in Angular 4 vorgenommenen Änderungen sehen.

Warum Angular4 und nicht Angular3?

Das Angular-Team hatte intern einige Versionsprobleme mit seinen Modulen und musste aufgrund des Konflikts die nächste Version von Angular - Angular4 - veröffentlichen.

Lassen Sie uns nun die neuen Funktionen von Angular 4 sehen -

ngIf

Angular2 unterstützte nur die ifBedingung. Angular 4 unterstützt jedoch dieif elseZustand auch. Lassen Sie uns sehen, wie es mit der ng-Vorlage funktioniert.

<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>

als Schlüsselwort in for-Schleife

Mit der Hilfe von as Schlüsselwort Sie können den Wert wie unten gezeigt speichern -

<div *ngFor="let i of months | slice:0:5 as total">
   Months: {{i}} Total: {{total.length}}
</div>

Die variable Summe speichert die Ausgabe des Slice mit dem as Stichwort.

Animationspaket

Animation in Angular 4 ist als separates Paket verfügbar und muss aus @ angle / animations importiert werden. In Angular2 war es mit @ verfügbarangular/core. Es wird hinsichtlich seiner Abwärtskompatibilität immer noch beibehalten.

Vorlage

Angular 4 Verwendet <ng-template> als Tag anstelle von <template>;Letzteres wurde in Angular2 verwendet. Der Grund, warum sich Angular 4 geändert hat<template> zu <ng-template> liegt am Namenskonflikt der <template> Tag mit dem HTML <template>Standard-Tag. Es wird in Zukunft völlig veraltet sein. Dies ist eine der wichtigsten Änderungen in Angular 4.

TypeScript 2.2

Angular 4 wird auf eine aktuelle Version von TypeScript aktualisiert, nämlich 2.2. Dies trägt zur Verbesserung der Geschwindigkeit bei und ermöglicht eine bessere Typprüfung im Projekt.

Pipe Title Case

Angular 4 hat einen neuen Pipe-Titel hinzugefügt, der den ersten Buchstaben jedes Wortes in Großbuchstaben ändert.

<div>
   <h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>

Die obige Codezeile generiert die folgende Ausgabe: Angular 4 Titlecase.

HTTP-Suchparameter

Suchparameter für die http get api werden vereinfacht. Wir müssen nicht anrufenURLSearchParams für das gleiche wie in Angular2.

Kleinere und schnellere Apps

Angular 4-Anwendungen sind im Vergleich zu Angular2 kleiner und schneller. Es wird die TypeScript-Version 2.2 verwendet, die neueste Version, die die endgültige Kompilierung klein macht.