Angular v.5.0.0 – co nowego?

© Angular.io / Shutterstock Milan M

W końcu doczekaliśmy się Angulara w wersji 5.0.0, a już w marcu 2018, możemy spodziewać się wydania 6.0.0. Czas zrobić przegląd, co nowego w trawie piszczy. Cały spis zmian, możesz znaleźć tutaj:
Changelog v.5

Jak widzisz w powyższym linku, zmian jest sporo, opiszę parę ciekawszych / ważniejszych.

Nowe funkcjonalności Angular v.5.0.0

UpdateOn

Jedną z ciekawszych funkcjonalności, jest rozszerzenie API formularzy o funkcjonalność –  UpdateOn.

Obecnie, za każdym razem jak zmienia się wartość np. Inputa, uruchamia się proces walidacji tejże kontrolki. Dzięki funkcjonalności UpdateOn, możemy uruchomić proces walidacji dopiero w momencie submita formularza lub gdy kontrolka traci focus (blur event). Przykład użycia:

Reactive Forms:

this.username = new FormControl('', { updateOn: 'blur' });

Template Forms:

<input type="email" ngModel [ngModelOptions]="{updateOn: 'submit'}">

Domyślna wartość to ‘change’. Więcej informacji wraz z przykładami, znajdziesz w tym artykule:
https://netbasal.com/boosting-performance-with-the-new-updateon-option-in-angular-v5-18857279ace2

PreserveWhitespaces

Zaglądając do dokumentacji dekoratora @Component, możemy zauważyć nową właściwość o wdzięcznej nazwie “PreserveWhitespaces“. Dokumentacja właściowości TUTAJ.

Owa funkcjonalność, pozwala nam zachować whitespaces w templatce. Obecnie, jeśli napiszemy:

<span>Zaraz wstawię 3 spacje   </span>

To te 3 spacje, zostaną zastąpione jedną. Dzięki nowej funkcjonalności, jesteśmy w stanie je zachować.

Obecnie domyślna wartość PreserveWhitespaces to true, ale może to się zmienić w kolejnej wersji.

Możemy również przestawić globalnie wartość na false, w pliku tsconfig.json:

{
  "extends": "../tsconfig.json",
...
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  },
...
}

Do dyspozycji dostajemy również atrybut ngPreserveWhitespaces:

<div ngPreserveWhitespaces>
whitespaces are preserved here
<span>    and here </span>
</div>

dzięki któremu, możemy skorzystać z zachowanie whitespaces wyłącznie lokalnie w pożądanym miejscu.

HttpClient

Nowy HttpClient pojawił się już w wersji 4.3.0, ale warto o nim wspomnieć, jest mniejszy i przyjemniejszy w użyciu. Wreszcie nie trzeba mapować odpowiedzi na JSON’a:

return this.http.get('some_url')
  .map(res => res.json())

Wystarczy wyłącznie:

return this.http.get('some_url')

Również mamy do dyspozycji wiele innych ficzerów, takich jak np. support interceptorów.

Zatem od wersji 5.0.0, HttpModule z @angular/http staje się przestarzały (ale nie zostaje usunięty! nie jest to breaking changes) i przeskakujemy na HttpClientModule z @angular/common/http.

Nowe Router Events

Pojawiły się nowe Router Events związane z guardami i ich aktywacją / deaktywacją:

GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd

O RouterEvents, popełniłem jakiś czas temu wpis:

http://wp.angular.love/2017/06/17/angular-router-events-i-spinner/

Zachęcam do lektury.

Inne, istotne zmiany Angular v.5.0.0:

• support TypeScripta dla wersji 2.4
• support dla RxJs dla wersji 5.5.2+
• usunięcie OpaqueToken, teraz używamy InjectionToken
• wiele zmian w DatePipe, min. nowe formaty (np fullTime)
• wiele zmian dotyczących wydajności aplikacji

Link do aplikacji, która pomoże w przeskoczeniu do wersji 5.0.0:

Inne wersje

Sprawdź zmiany w innych wersjach Angular:

• Zmiany w Angular 16
• Zmiany w Anuglar 15
• Zmiany w Angular 14