Angular 4 - przegląd

Istnieją trzy główne wydania Angulara. Pierwsza wydana wersja to Angular1, zwana także AngularJS. Po Angular1 pojawił się Angular2, który wprowadził wiele zmian w porównaniu z Angular1.

Struktura Angulara oparta jest na architekturze komponentów / usług. AngularJS został oparty na kontrolerze widoku modelu.Angular 4 wydana w marcu 2017 roku okazuje się być dużym przełomem i jest najnowszym wydaniem zespołu Angular po Angular2.

Angular 4 jest prawie taki sam jak Angular 2. Ma kompatybilność wsteczną z Angular 2. Projekty opracowane w Angular 2 będą działać bez żadnych problemów z Angular 4.

Zobaczmy teraz nowe funkcje i zmiany wprowadzone w Angular 4.

Dlaczego Angular4, a nie Angular3?

Zespół Angular napotkał pewne problemy z wersjonowaniem swoich modułów i ze względu na konflikt musiał przejść dalej i wydać następną wersję Angulara - Angular4.

Zobaczmy teraz nowe funkcje dodane do Angular 4 -

ngIf

Angular2 obsługiwał tylko ifstan: schorzenie. Jednak Angular 4 obsługujeif elsestan również. Zobaczmy, jak to działa przy użyciu szablonu ng.

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

jako słowo kluczowe w pętli for

Z pomocą as słowo kluczowe, w którym można przechowywać wartość, jak pokazano poniżej -

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

Zmienna total przechowuje dane wyjściowe wycinka przy użyciu rozszerzenia as słowo kluczowe.

Pakiet animacji

Animacja w Angular 4 jest dostępna jako osobny pakiet i należy ją zaimportować z @ angular / animations. W Angular2 był dostępny z @angular/core. Jest nadal taki sam ze względu na aspekt zgodności z poprzednimi wersjami.

Szablon

Angular 4 używa <ng-template> jako tag zamiast <template>;ten ostatni został użyty w Angular2. Powód zmiany Angular 4<template> do <ng-template> jest z powodu konfliktu nazw <template> tag z html <template>tag standardowy. Będzie całkowicie przestarzały. To jedna z głównych zmian w Angular 4.

TypeScript 2.2.0

Angular 4 został zaktualizowany do najnowszej wersji TypeScript 2.2. Pomaga to zwiększyć szybkość i zapewnia lepsze sprawdzanie typu w projekcie.

Przypadek tytułu rury

Angular 4 dodał nową kreskę w tytule, która zmienia pierwszą literę każdego słowa na wielką.

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

Powyższy wiersz kodu generuje następujące dane wyjściowe - Angular 4 Titlecase.

Parametry wyszukiwania HTTP

Parametry wyszukiwania do http get api są uproszczone. Nie musimy dzwonićURLSearchParams za to samo, co w Angular2.

Mniejsze i szybsze aplikacje

Aplikacje Angular 4 są mniejsze i szybsze w porównaniu do Angular2. Używa TypeScript w wersji 2.2, najnowszej wersji, która sprawia, że ​​ostateczna kompilacja ma mały rozmiar.