© 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:
1 |
this.username = new FormControl('', { updateOn: 'blur' }); |
Template Forms:
1 |
<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:
1 |
<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:
1 2 3 4 5 6 7 8 |
{ "extends": "../tsconfig.json", ... "angularCompilerOptions": { "preserveWhitespaces": false }, ... } |
Do dyspozycji dostajemy również atrybut ngPreserveWhitespaces:
1 2 3 4 |
<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:
1 2 |
return this.http.get('some_url') .map(res => res.json()) |
Wystarczy wyłącznie:
1 |
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ą:
1 |
GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd |
O RouterEvents, popełniłem jakiś czas temu wpis:
http://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:
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ę.