Kategoria: Angular 9

Programowanie funkcyjne z użyciem Angulara i GraphQL

Programowanie funkcyjne na przykładzie aplikacji CRUD pobierającej listę krajów i szczegółowe informacje o krajach.

REST:
Pobieranie szczegółowych informacji o krajach
https://restcountries.eu/rest/v2Capital
Subregion
Timezones
Currencies
Translations

Aplikacja i kod źródłowy jest dostępna tutaj: https://stackblitz.com/edit/jssample?file=src%2Fapp%2Fapi.service.ts
src:

Tworzenie od zera nowego projektu Angular z użyciem CLI

Jednym ze sposobów utworzenia projektu Angular, który umożliwia utworzenie szkieletu projektów według zalecanego standardu.

Bardzo wygodne jest korzystaniez Angular CLI aby w szybki sposób mieć możliwość utworzenia struktury aplikacji:
npm install -g @angular/cli

Rozszerzona wersja.
Do utworzenia struktury nowej aplikacji Angular można wykorzystać polecenie z Nx toolkit. Na poczatek zainstalujmy pakiet Schematics:
npm install -g @nrwl/schematics

a następnie aby utworzyć projekt:
npm init nx-workspace


angular console

Uruchamianie projektu Angular

W celu uruchomienia projektu Angular musimy przejść do katalogu projektu:

cd nowy_projekt_angular

i uruchomić aplikację za pomocą polecenia

ng serve 

Jeżeli aplikacja poprawnie się uruchomi możemy przejść na adres: http://localhost:4200/
i zobaczymy informację, że aplikacja działa.

Angular 9 wydany

Dziś została wydana kolejna wersja Angulara. Jakie zmiany niesie ze sobą nowa wersja:

1. Ivy

Najważniejsza zmiana: Angular jest teraz domyślnie kompilowany z użyciem Ivy. Ivy czyli nowy silnik renderujący strony internetowe. Dzięki niemu paczki nowo stworzonych aplikacji mogą zajmować mniej miejsca na dysku. Dzięki czemu aplikacja będzie szybciej otwierała się w przeglądarce użytkownika.

2. Ahead-of-time

Przy uruchomieniu aplikacji za pomocą polecenia ng serve zostanie wykonana kompilacja ahead of time zamiast just in time. Może to za sobą nieść inne odświeżanie aplikacji w trakcie jej tworzenia.

3. Basic mode, full mode, strict mode

Możemy skonfigurować aplikację pod kątem sprawdzania nazw templatek. W jaki sposób ma się to odbywać. Funkcja ta była do tej pory dostępna jednak teraz jest jeszcze bardziej rozbudowana. Mamy do dyspozycji: basic mode, full mode, strict mode za ich pomocą można definiować w jaki sposób Angular ma parsować templatki komponentów.

4. @ViewChild(…{ static:false})  domyślnie

Użycie @ViewChild w celu wybrania elementu z templatki  powinno zawierać opcję static:true lub static:false   np w większości przypadków będzie to. @ViewChild(…{ static:false})  i taka wartość będzie przekazywana domyślnie jeżeli jej nie ustawimy i to jest zasadnicza różnica w Angularze 9. Nie trzeba  wartości static ustawiać w przypadku static:false. Jednak gdy chcemy użyć tego typu elementu np. w ngOnInit(). Czyli przed wykryciem zmian w kodzie. Powinna wartość @ViewChild być ustawiona na false

Instrukcja jak zaktualizować aplikację do najnowszej wersji Angulara: https://next.angular.io/guide/updating-to-version-9 . Są tam również przedstawione większe i mniejsze zmiany, które należy wziąć pod uwagę przy aktualizacji np. aktualnie wspierana wersja TypeScript to 3.6.

Aktualizacja za pomocą CLI:
npm install –no-save @angular/cli@^8.3.15
ng update @angular/cli @angular/core

src: https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3