Angular 4 - Panoramica

Sono disponibili tre versioni principali di Angular. La prima versione rilasciata è Angular1, chiamata anche AngularJS. Angular1 è stato seguito da Angular2, che è arrivato con molti cambiamenti rispetto ad Angular1.

La struttura di Angular è basata sull'architettura dei componenti / servizi. AngularJS era basato sul controller di visualizzazione del modello.Angular 4 rilasciato a marzo 2017 si rivela un importante passo avanti ed è l'ultima versione del team Angular dopo Angular2.

Angular 4 è quasi uguale ad Angular 2. Ha una retrocompatibilità con Angular 2. I progetti sviluppati in Angular 2 funzioneranno senza problemi con Angular 4.

Vediamo ora le nuove funzionalità e le modifiche apportate in Angular 4.

Perché Angular4 e Not Angular3?

Il team di Angular ha affrontato alcuni problemi di controllo delle versioni internamente con i propri moduli e, a causa del conflitto, ha dovuto andare avanti e rilasciare la versione successiva di Angular: Angular4.

Vediamo ora le nuove funzionalità aggiunte ad Angular 4:

ngIf

Angular2 supportava solo il ifcondizione. Tuttavia, Angular 4 supporta l'estensioneif elsecondizione pure. Vediamo come funziona usando ng-template.

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

come parola chiave nel ciclo for

Con l'aiuto di as parola chiave è possibile memorizzare il valore come mostrato di seguito -

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

La variabile total memorizza l'output della slice utilizzando l'estensione as parola chiave.

Pacchetto animazione

L'animazione in Angular 4 è disponibile come pacchetto separato e deve essere importata da @ angular / animations. In Angular2, era disponibile con @angular/core. È ancora mantenuto lo stesso per il suo aspetto di compatibilità con le versioni precedenti.

Modello

Angular 4 usi <ng-template> come tag invece di <template>;quest'ultimo è stato utilizzato in Angular2. Il motivo per cui Angular 4 è cambiato<template> per <ng-template> è a causa del conflitto di nomi di <template> tag con il codice html <template>tag standard. Sarà deprecato completamente andare avanti. Questo è uno dei principali cambiamenti in Angular 4.

TypeScript 2.2

Angular 4 viene aggiornato a una versione recente di TypeScript, che è 2.2. Questo aiuta a migliorare la velocità e offre un migliore controllo del tipo nel progetto.

Caso titolo tubo

Angular 4 ha aggiunto una nuova maiuscola per il titolo del tubo, che cambia la prima lettera di ogni parola in maiuscolo.

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

La riga di codice sopra genera il seguente output: Angular 4 Titlecase.

Parametri di ricerca HTTP

I parametri di ricerca per http get api sono semplificati. Non abbiamo bisogno di chiamareURLSearchParams per lo stesso che è stato fatto in Angular2.

App più piccole e più veloci

Le applicazioni Angular 4 sono più piccole e più veloci rispetto ad Angular2. Utilizza la versione TypeScript 2.2, l'ultima versione che rende la compilazione finale di piccole dimensioni.