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

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:

Template Forms:

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:

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:

Do dyspozycji dostajemy również atrybut ngPreserveWhitespaces:

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:

Wystarczy wyłącznie:

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ą:

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

ANGULAR – ROUTER EVENTS I SPINNER

Zachęcam do lektury.

Inne, istotne zmiany:

  • 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:

https://angular-update-guide.firebaseapp.com/

One Comment

  1. Maras

    Sprawdzałeś może, czy sposób na umieszczenie shared module w repo GIT ciągle działa. Zauważyłem, że są problemy z kompilacją bibliotek z nowych projektów Angular CLI. Piszą, że już nie kompilują zawartości node_modules, co wydaje się, że rozwala tę ideę.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *