Angular – Od Zera Do Bohatera

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.
Pierwsza Aplikacja
Druga Aplikacja
Trzecia Aplikacja
Http Promises Observables
Zakładki - Wykorzystanie Http...
Formularz
Z Całkiem Innej Beczki
Kod źródłowy dostępny na githubie
https://github.com/mariuszjurczenko/Angular2_AppFirst
https://github.com/mariuszjurczenko/Angular2_Converter
https://github.com/mariuszjurczenko/Angular2-formularz
https://github.com/mariuszjurczenko/Angular2-bookmarks2