Wprowadzenie do Angular – Szybki start.

Czego się nauczysz
   *  Angular CLI
   *  Konfiguracja projektu
   *  ES5, ES6, TypeScript
   *  Dependency Injection
   *  Propery binding
   *  Event binding
   *  Two-way binding
   *  Komponent, Moduł
   *  Get, Post, Delete, Patch

Wymagania

Chęć dobrej zabawy !!!

Dla kogo jest ten kurs:

• Każdy kto ma trochę chęci i trochę czasu

Opis

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.

1 odcinek 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
ani też nie pisząc w  TypeScriptcie  wszystko zrobimy w czystym JavaScripcie !!!
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. Powiedzmy, że  zamiast po prostu wyświetlać losowy cytat, kiedy tylko odświeżymy stronę  teraz chcemy, aby automatycznie wyświetlić inny cytat co  jakiś  określony czas .
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.  Jesteśmy teraz gotowi do skorzystania z  nowych funkcji ES6.

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. Zostaje wprowadzone słowo kluczowe “class”
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.  W kilku kolejnych odcinkach będziemy robić prawie to samo, ale z TypeScriptem.
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 więc teraz omówimy która z  nich jest najlepszym rozwiązaniem.
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, tak aby pozwolić użytkownikowi wybrać dowolną walutę z listy rozwijanej.
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. Pokażę, jak wykonać  pierwsze żądanie http.  Będzie to żądanie get .
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. W Angular używajac  klienta HTTP możemy używać observables – obserwowalne, które są podobne  do promises – obietnic, ale są o wiele potężniejsze i dają o wiele  więcej możliwości.
32 odcinek utworzymy sobie baze danych Firebase dostępną za darmo od google. Bazę  danych bedziemy wykorzystywać w kolejnych 4 odcinkach, gdzie bedziemy  wykorzystywać klienta http i generować zapytania do naszej bazy. REST  API.
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.