Ta lekcja jest w bazie eduweb

Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.

Lekcja 48/ 54Walidacja i komunikaty błędów

0:00 / 0:00

Angular: Walidacja i komunikaty błędów

10 godz. 19 min wideo54 lekcje9 modułów

Mateusz KuleszaSenior Software Developer, Konsultant, Trener
Wszystkie kursy autora

Czego się nauczysz

  • Narzedzie generowania kodu
  • Automatyczne renderowanie zmian
  • Budowanie interaktywnych interfejsów
  • Architektura zlozonych aplikacji
  • Programowanie obiektowe i reaktywne
  • SPA i Nawigacja z HTML5 History API
  • Dynamiczne formularze i walidacja
  • Finalna aplikacja Multimedialna Spotify!

Angular - od Podstaw

Angular to kolejny krok, ewolucja jednego z najbardziej popularnych frameworków front-end. Już po kilku pierwszych lekcjach kursu zobaczysz jak dzięki uproszczeniu i uporządkowaniu jest on obecnie nie tylko prostszy do nauki niż pierwsze wydania, ale dzięki świetnej współpracy z najnowszymi technologiami takimi jak HTML5 i Strumienie jest to także rewolucja w produktywności i komforcie tworzenia aplikacji internetowych. Jeśli Twoje aplikacje internetowe wymykają się spod kontroli, Twój kod jest coraz trudniejszy w utrzymaniu, a Ty chciałbyś zacząć korzystać z najnowszych zdobyczy technologii front-end w sposób systematyczny i produktywny, to ten kurs jest dla Ciebie.

Angular to nie tylko biblioteka renderująca interfejs użytkownika. To ekosystem narzędzi zbudowanych z myślą o jak najlepszym wykorzystaniu tego co oferują nowoczesne przeglądarki. Także te mobilne! Jeśli w pracy z JavaScript chciałbyś wykorzystać komponenty, programowanie obiektowe czy narzędzia reaktywne - Angular zbudowany jest od podstaw ze wsparciem dla tych narzędzi.

Budowanie interfejsu z Angular

Angular to potężne i rozbudowane narzędzie, ale podobnie jak w przypadku jego poprzednika jego główną siłą są wiązania danych. Właśnie dzięki nim nie musisz już martwić się o to jak wyrenderować właściwe elementy, jak i gdzie podpiąć obsługę zdarzeń itd. Już w ciągu pierwszych kilku lekcji zobaczysz jak możesz łatwo zapomnieć o jednym z największych zmartwień programisty aplikacji dynamicznych - ręczne renderowanie HTML. W Angular zmieniasz związane dane i widzisz w przeglądarce poprawny HTML! Twoje dane są renderowane automatycznie. To już w drugiej lekcji tego kursu.

Dyrektywy i Komponenty

Czy zdarzyło Ci się pracować z kodem w JavaScript, który miał tysiące linii i składał się głównie z poplątanych wywołań jQuery? Czy nie marzyło Ci się by móc po prostu stworzyć własne elementy HTML, które robiłyby dokładnie to co Ty chcesz? W tym kursie zobaczysz, że to nie tylko możliwe, ale całkiem proste. Jedną linią kodu możesz zmienić zwykły kod JavaScript w interaktywny komponent, który Angular wyrenderuje w Twoim kodzie HTML. Jego wygląd, style i zachowanie zależą zupełnie od Ciebie. Zobaczysz jak zdefiniować swoje własne elementy, zagnieżdżać je w dowolny sposób, przekazywać im atrybuty, nasłuchiwać zdarzeń i wiele wiele więcej...

Budowanie złożonych aplikacji

Kurs Angular to nie tylko renderowanie HTML, ale też wiele przydatnych narzędzi. Zobaczysz jak budować proste aplikacje korzystając wyłącznie z komponentów. Dowiesz się jak dzięki modułom i usługom uporządkować kod Twojej aplikacji.Jeśli nie znasz jeszcze korzyści jakie daje TypeScript to nie musisz się przejmować. W tym kursie wprowadzimy Cię do nowinek w JavaScript oraz pokażemy zalety jakie daje rozszerzenie języka TypeScript. Zobaczysz jak dzięki typom i automatycznemu wstrzykiwaniu usług możesz w bardzo prosty sposób budować złożone aplikacje zorientowane obiektowo. Jeśli pracowałeś z kodem obiektowym w Java lub C# to zobaczysz wiele znanych Ci rozwiązań.

Programowanie Reaktywne

Jeśli bardziej interesuje Ciebie programowanie funkcyjne i reaktywne to z Angular świetnie pracuje się także w tym stylu. W kolejnych sekcjach kursu poznasz strumienie, dowiesz się czym są obiekty obserwowalne i jak łączyć je ze sobą by tworzyć reaktywne interfejsy.Zobaczysz też jak pójść o krok dalej i zacząć myśleć strumieniowo, budując architekturę Twojej aplikacji w oparciu o strumienie danych. Pokażemy Ci jak zbudować formularze, które reagują na akcje użytkownika. Dowiesz się jak użyć strumieni by aktualizować dane z serwera, a nawet jak jeszcze bardziej przyspieszyć działanie aplikacji dzięki aktualizowaniu interfejsu użytkownika właśnie przy użyciu strumieni. W tym kursie zobaczysz też, że programowanie obiektowe i reaktywne wcale nie muszą się wykluczać, ale mogą świetnie ze sobą współpracować.

Dynamiczne aplikacje typu SPA i proste linkowanie

To że aplikacja jest typu Single Page nie musi oznaczać, że użytkownik widzi wciąż to samo i nie może się poruszać po naszej aplikacji jak po stronie internetowej. Teraz Twoje aplikacje będą mogły bez problemu kryć w sobie wiele różnych widoków, po których może poruszać się użytkownik. W tym kursie zobaczysz jak kontrolować złożone nawigacje w jednym prostym pliku routingu.Dowiesz się jak zintegrować nawigację z nowym HTML5 History API, dzięki czemu użytkownik aplikacji będzie mógł swobodnie korzystać z paska adresu, a nawet przycisków wstecz i w przód w przeglądarce. Zobaczysz jak w prosty sposób tworzyć dynamiczne odnośniki i elementy nawigacji, które pokazują aktualny stan nawigacji.

Walidacja i stylowanie formularzy

Jeśli już wcześniej budowałeś aplikacje internetowe, zapewne wiesz, że najbardziej żmudną pracą jest renderowanie, aktualizacja i walidacja stanu formularzy. W sekcji poświęconej budowaniu formularzy zobaczysz jak z Angular możesz szybko i prosto budować formularze, a wyświetlanie odpowiednich komunikatów błędów możesz obsłużyć bez pisania linijki kodu JavaScript. Poznasz także dobre praktyki, które pozwolą Ci uniknąć wielu typowych problemów występujących przy zapamiętywaniu danych z formularzy.

HTML5 i Multimedia

Angular 2 w przeciwieństwie do innych bibliotek i frameworków, które próbują ukryć mechanizmy przeglądarki przed programistą - ten przyjmuje odwrotną strategię. Nowe API pozwala w bardzo prosty sposób komunikować się z dowolnym mechanizmem w przeglądarce. Angular świetnie współpracuje z DOM API, z nowymi HTML5 API oraz dzięki swej uniwersalności będzie też on świetnie działał z każdym nowym rozwiązaniem które pojawi się w przyszłości. Jak zobaczysz w tym kursie Angular świetnie współpracuje z nowoczesnymi przeglądarkami, a dzięki przejrzystemu, uniwersalnemu API jest to najlepsze rozwiązanie na przyszłość.

Wersja oprogramowania: Angular 2.4, Angular 4

Kurs Angular

9 rozdziałów54 lekcje10h 19min

Wstęp do kursu

33min
  • Wprowadzenie6min(zablokowana)
  • Edytor pliki narzedzia18min(zablokowana)
  • Struktura Aplikacji9min(zablokowana)

Praca z DOM

1h 18min
  • Główny Komponent5min(zablokowana)
  • Wiązanie danych12min(zablokowana)
  • Wykrywanie zmian7min(zablokowana)
  • Dołączanie bibliotek8min(zablokowana)
  • Dynamiczne właściwości12min(zablokowana)
  • Atrybuty a właściwości7min(zablokowana)
  • Obsługa zdarzeń12min(zablokowana)
  • Dynamiczne stylowanie9min(zablokowana)
  • Dynamiczne klasy CSS7min(zablokowana)

Dyrektywy wbudowane

1h 5min
  • Dyrektywa ngClass5min(zablokowana)
  • Dyrektywa ngStyle4min(zablokowana)
  • Wiązanie dwukierunkowe10min(zablokowana)
  • Dyrektywy Template i ngIf11min(zablokowana)
  • Problem stanu i hidden9min(zablokowana)
  • Dyrektywa ngSwitch12min(zablokowana)
  • Dyrektywa ngFor14min(zablokowana)

Komponenty

1h 22min
  • Komponenty13min(zablokowana)
  • Style i enkapsulacja12min(zablokowana)
  • Inputs Wejscia11min(zablokowana)
  • Outputs Wyjscia17min(zablokowana)
  • Projekcja z ngContent9min(zablokowana)
  • Wiazania kopie i referencje20min(zablokowana)

Moduły i Usługi

1h 50min
  • Moduły12min(zablokowana)
  • Usługi14min(zablokowana)
  • Wstrzykiwanie zależności16min(zablokowana)
  • Usługi współdzielone i izolowane13min(zablokowana)
  • Nowe API Spotify - aktualizacja22min(zablokowana)
  • Praktyczny przykład18min(zablokowana)
  • Praktyczny przyklad - dane z serwera15min(zablokowana)

Programowanie Reaktywne

49min
  • Wprowadzenie do Programowania Reaktywnego12min(zablokowana)
  • RxJS Observable i Subject11min(zablokowana)
  • Operatory map i startWith8min(zablokowana)
  • Async Pipe4min(zablokowana)
  • Reaktywne Formularze15min(zablokowana)

Routing

1h 21min
  • Konfiguracja Routera9min(zablokowana)
  • Przekierowania4min(zablokowana)
  • Routing dla modułów7min(zablokowana)
  • Nawigacja z History API11min(zablokowana)
  • Parametryzowane ścieżki18min(zablokowana)
  • Zagnieżdzony routing13min(zablokowana)
  • Routing reaktywny5min(zablokowana)
  • Nawigacja z kodu13min(zablokowana)

Formularze

59min
  • Lokalne referencje i HTML5 API12min(zablokowana)
  • Dyrektywy ngForm i ngModel15min(zablokowana)
  • Walidacja i komunikaty błędów6min(zablokowana)
  • Stany formularza10min(zablokowana)
  • Stylowanie stanu formularza6min(zablokowana)
  • Elementy radio i select10min(zablokowana)

Finalna Aplikacja

1h 2min
  • Komunikacja z serwerem24min(zablokowana)
  • Współdzielone usługi27min(zablokowana)
  • Deployment produkcyjny11min(zablokowana)

Ten kurs jest w bazie eduweb

Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.

Wykup dostęp do bazy

Autor kursu

Średnia ocen autora: 4,7

Bio

Senior Developer, Konsultant i Szkoleniowiec. Pracował z wieloma polskimi i zagranicznymi firmami nad projektami z sektorów E-Learning, Reklamy, E-Commerce, Transportu oraz Bankowości i Finansów. Z technologiami Internetowymi pracuje od ponad 10 lat. Pasjonat technologii Front-End, JavaScript'u a także Marketingu Internetowego i E-Commerce.