Wprowadzenie do Angular - Szybki start.

Rozpoczęcie nowego projektu opartego o Angular wymaga stworzenia odpowiedniej struktury folderów, skonfigurowania środowiska, zainstalowania TypeScript, definicji typów, stworzenia pierwszego komponentu i wywołania funkcji bootstrap.

Zacznijmy budowanie aplikacji od stworzenia potrzebnych komponentów przy pomocy Angular CLI. Dzięki pomocy Angular CLI, nie musimy już powtarzać wielu manualnych czynności co znacznie przyspiesza pracę z Angular.

W 1 odcinku zainstalujemy wszystkie potrzebne narzędzia oraz zrobimy 1 projekt w Angular 

2 odcinek wykonamy nasz pierwszy projekt w Angular. Wykorzystamy między innymi derektywy ng-model, *ngFor, ng-class

3 odcinek zrobimy projekt w Angular całkowicie od podstaw !!! nie wykorzystując narzędzia Angular CLI

4 odcinek dodamy kolejny komponent który będzie zawarty w głównym komponencie.

5 odcinek dodamy Service i przeniesiemy logikę do service.

6 odcinek bedzię Dependency Injection.

7 odcinek zrobimy małą zmianę w naszej aplikacji w celu pokazania jednej ważnej cechy angulara, która jest wykrywanie zmian.

8 odcinek zrobimy kilka ostatecznych zmian w naszej aplikacji i dokonamy podziału naszego kodu na oddzielne pliki, moduły. 

9 odcinek chcemy przenieść aplikację którą pisaliśmy w poprzednich odcinkach do ES6  

10 odcinek mamy już skonfigurowany projekty do pracy z ES6 który jest kompilowany do ES5 orazt mamy skonfigurowany serwer deweloperski, który automatycznie przeładowuje naszą aplikację po każdej zmianie.

11 odcinek zobaczymy, jak używać klas w ES6. Angular zapewnia własne metody pomocnicze do definiowania klas, używając ES6 mamy wygodniejszą składnię tworzenia klas.

12 odcinek przyjrzymy się modułom w ES6, które są jedną z najważniejszych zmiany wprowadzonych ze specyfikacją ES6. 

13 odcinek mamy już przeniesioną naszą pierwszą aplikację do korzystania z nowych Funkcji javascriptu wprowadzonych ze specyfikacją ES6.

14 odcinek będziemy aktualizować nasz kod do korzystania z typów.  

15 odcinek omówimy inną użyteczną cechę TypeScriptu jak prywatny oraz publiczny modyfikator dostępu. 

16 odcinek w tym momencie stworzyliśmy trzy różne wersje tej samej prostej aplikacji stosując ES5, ES6 oraz TypeScript.

17 odcinek w tej części przyjrzymy się bardziej szczegółowo szablonom w Angularze. Będziemy budować kolejną prostą aplikację, która będzie Konverterem Walutowym.

18 odcinek propery binding

19 odcinek event binding

20 odcinek w naszej aplikacji mamy propery binding oraz event binding wiazania jednokierunkowe. Teraz dodamy two-way binding "wiązanie dwukierunkowe".

21 odcinek zobaczymy jeszcze kilka nowych opcji, które mają do czynienia z klasami css.

22 odcinek napiszemy service, który będzie pomagał nam w przeliczaniu roznych walut. 

23 odcinek będziemy aktualizować nasz interfejs użytkownika

24 odcinek "CurrencySelectComponent" Listę rozwijaną, w której użytkownik będzie mógł wybrać dowolną walutę. 

25 odcinek obaczymy jak Emitować niestandardowe zdarzenia w naszych komponentach używając Angular. 

26 odcinek dodamy do naszej aplikacji dyrektywę strukturalną ngIf. 

27 odcinek dodamy do naszej aplikacji pipes .

28 odcinek stworzymy nasz własny pipe. 

29 odcinek skorzystamy z klienta HTTP, którego możemy użyć do wysyłania żądań http w naszych aplikacjach wykorzystujących Angular.

30 odcinek będziemy omawiać Promises (obietnice), które są wykorzystywane do operacji asynchronicznych takich jak wykonywanie żądań http.  

31 odcinek zajmiemy się observables, czyli obserwowalne.

32 odcinek utworzymy sobie baze danych Firebase

33 odcinek stworzymy service gdzie wykorzystamy klienta Http.Get i będziemy pobierać dane z naszej bazy korzystając z REST API. 

34 odcinek dodamy Http.Post i będziemy tworzyć nowe zakładki korzystając z REST API. 

35 odcinek dodamy Http.Delete i będziemy usuwać zakładki korzystając z REST API. 

36 odcinek dodamy Http.Patch i będziemy edytować zakładki korzystając z REST API. 

37 odcinek czyszczenie zakładek, poprawa wyglądu (responsywność), obsługa błędów 

38 odcinek jak sprawdzać poprawność formularza rejestracyjnego. Jako przykład utworzymy oczywiście formularz rejestracyjny. 

39 odcinek dalej sprawdzamy poprawność formularza rejestracyjnego. 

40 odcinek wyświetlamy odpowiednie komunikaty walidacyjne.  

41 odcinek zakończenie pracy z formularzem rejestracyjnym. 

Kod źródłowy dostępny na github: