Masz już konto? Zaloguj się

Kurs Angular

Angular to potężne narzędzie pozwalające szybko i sprawnie tworzyć złożone aplikacje

51 lekcji

11h 45min

5 (3 oceny)

Angular - Techniki Zaawansowane - Wzorce Projektowe

Angular to potężne narzędzie pozwalające szybko i sprawnie tworzyć złożone aplikacje. Dzięki wiązaniom renderowanie interfejsu jest bardzo wygodne, a automatyczne wykrywanie zmian sprawia, że Twoje dane w niemal magiczny sposób pojawiają się na ekranie. Aplikacje to jednak nie tylko sam interfejs użytkownika. Bardzo łatwo jest dodawać kolejne funkcje i opcje - ale tylko do pewnego momentu. Bez odpowiedniej struktury i architektury prosta aplikacja może bardzo szybko przerodzić się w rozbudowane monstrum, nad którym nie mamy żadnej kontroli. Na szczęście - w Angularze jest bardzo wiele mechanizmów, pozwalających od samego początku zapanować nad strukturą aplikacji. Wiele wbudowanych mechanizmów pozwala konstruować aplikacje w oparciu o sprawdzone wzorce projektowe i dobre praktyki.

Jeśli znasz już podstawy Angulara i potrafisz budować proste aplikacje, ale chcesz wiedzieć więcej, poznać lepiej mechanizmy Angulara oraz dowiedzieć się jak działa on w środku - z pewnością ten Kurs będzie dla Ciebie świetnym wyborem. Jeśli chcesz wykorzystać tę wiedzę tak, by od samego początku projektować aplikacje poprawnie i wykorzystywać wzorce jakie oferuje Angular oraz chcesz być bardziej produktywny w swojej pracy - stworzyliśmy ten materiał właśnie dla Ciebie.

Zależności, moduły, usługi - Jak poprawnie budować strukturę aplikacji?

Już w pierwszej sekcji kursu przekonasz się, dlaczego wzorzec odwracania zależności i mechanizm wstrzykiwania są bardzo ważne dla utrzymania jakości kodu aplikacji. Pokaże Ci jak można zarządzać zależnościami przy użyciu wzorca Fabryki i jak zwiększa to elastyczność aplikacji. Następnie zobaczysz jak mechanizm Wstrzykiwania zależności dostępny w Angularze ułatwia ten proces. Zobaczysz różnicę pomiędzy statycznym i automatycznym odnajdywaniem zależności oraz poznasz sposoby podmieniania i przesłaniania zależności. Dzięki temu Twoje aplikacje będą bardziej elastyczne i podmiana lub przetestowanie funkcjonalności nie będą problemem.

Zobacz wzorce projektowe w działaniu i określaj zasięg usług

Angular to nie tylko statyczna struktura i statyczna hierarchia. Pokażę Ci techniki zarządzania modułami i usługami, pozwalające między innymi na używanie wzorca Sigleton dla globalnych współdzielonych danych. Zobaczysz też jak dzięki hierarchiom tworzyć usługi o krótkim cyklu życia, które będą tworzone i niszczone wedle potrzeb. Na koniec pierwszej sekcji zobaczysz kilka różnych technik określania zasięgu i dostępu do usług, tak, by tylko niektóre komponenty miały dostęp do usług, a inne nie. Na przykładzie usługi Selection zobaczysz, jak sprawić, by tylko wybrane komponenty mogły współdzielić informacje o zaznaczeniu.

Formularze to nie sam ngModel. Zobacz jak budować je poprawnie!

W kolejnych dwóch sekcjach zajmiemy się dwoma podejściami do budowania Formularzy. Zobaczysz jak zbudować formularz sterowany szablonem oraz jak wykorzystać formularze reaktywne. Pokażę Ci, że formularze to nie tylko część interfejsu, ale odrębny mechanizm służący zarządzaniu i walidacji danych. Zobaczysz jakie są zalety modelu automatycznego a jakie modelu własnoręcznie utworzonego. Pokażę Ci, że formularze nie muszą być powiązane z widokiem, a ich struktura nie musi być nudna i statyczna. Zobaczysz jak w Angularze możesz budować bardzo złożone struktury danych dzięki modułowi formularzy. Poznasz zagnieżdżanie modeli oraz metody dynamicznego modyfikowania struktury formularza. Przekonasz się, jak wzorzec budowniczego pozwala oddzielić strukturę formularza od jego klas. Podczas całego Kursu stworzymy kilka praktycznych formularzy na których zobaczysz różne możliwości ich budowania, dynamicznej modyfikacji oraz manipulacji stanem oraz danymi formularza. Zobaczysz że formularz może zostać rozbity na komponenty, a nawet być wstrzyknięty jako usługa, co pozwala na jego wielokrotne użycie.

Własne walidatory? Walidacja z serwera? Automatyczne wyświetlanie komunikatów błędów? Zobacz to wszystko i wiele więcej

Nie pominiemy także kwestii walidacji danych. Zobaczysz nie tylko jak prawidłowo wykorzystywać wbudowane walidatory, ale jak tworzyć własne walidatory. Pokażę Ci jak przekazywać parametry i konfigurować walidatory oraz jak dzięki wzorcowi obserwatora obsługiwać asynchroniczne walidacje z serwera. Jeśli zbudowałeś już wcześniej formularze to wiesz ile wysiłku wymaga poprawna walidacja i wyświetlanie błędów. Na koniec sekcji poświęconej walidacji zobaczysz sposoby na ułatwienie sobie pracy poprzez zautomatyzowanie walidacji i wyświetlania błędów w prostym, uniwersalnym komponencie walidacji.

Obiekty obserwowalne RxJS - Zobacz jak je współdzielić, jak zapamiętać ich stan i wiele więcej sposobów na sprawną obsługę asynchroniczności

Nie zapomnieliśmy też o komunikacji z serwerem i obsłudze asynchronicznych danych. Całą sekcję Kursu poświęcam efektywnemu pobieraniu danych do zaprezentowania w interfejsie aplikacji. Na początku przypominam jak skonfigurować moduł HttpClient i pobrać dane z prostego serwera, który załączony jest do kursu. Potem omawiam różne praktyczne techniki pracy z obiektami obserwowalnymi. Pokażę Ci jak uniknąć zduplikowanych zapytań do serwera, jak zbudować efektywny cache zapytań oraz jak prawidłowo obsługiwać błędy występujące w strumieniach.

Komunikacja z serwerem na wiele sposobów

W kolejnych lekcjach pokazuję jak krok po kroku zbudować kod do komunikacji z API typu REST, poczynając od pobierania obiektów i list po zapisywanie zmian na serwerze. W każdej z lekcji pokazuje mechanizmy wysyłania parametrów i nagłówków w zapytaniu, jak i praktyczne techniki, takie jak filtrowanie wyników czy dynamiczne stronicowanie.

Logowanie i Autoryzacja użytkownika w Angular z Json-Web-Token

Komunikacja z API nie może obejść się bez logowania i autentykacji użytkownika. Pokażę Ci zatem na przykładach jak obsłużyć logowanie, pobrać i zapisać token oraz jak dołączyć dane autoryzacyjne do zapytań. Zobaczysz także jak rozwiązać globalnie problem autentykacji dzięki wzorcowi Łańcucha zobowiązań i mechanizmowi multi wstrzykiwania interceptorów. Przy okazji pokażę Ci wiele praktycznych kwestii związanych z Strumieniami zdarzeń i biblioteką RxJS. Zobaczysz przykłady zimnych i ciepłych źródeł oraz przykłady emisji zdarzeń typu unicast i multicast, a to wszystko na praktycznych przykładach.

Zbuduj dynamiczny wielopoziomowy interfejs użytkownika, dynamiczną nawigację i wyskakujące okienka z Routerem

Ostatnia sekcja kursu poświęcona jest routingowi, gdzie pokażę Ci nie tylko jak zorganizować wielopoziomowy interfejs i wstrzyknąć do niego dane, ale także jak prawidłowo obsłużyć nawigację i przejścia pomiędzy ekranami aplikacji. Zobaczysz jak dzięki nazwanym gniazdom dynamicznie podmieniać sekcje aplikacji i jak obsłużyć parametry w adresie strony. Dowiesz się jak doładować moduły aplikacji na życzenie, jak wykorzystać ten sam komponent dzięki strategiom routingu, oraz o wiele więcej.Oczywiście routing to nie tylko interfejs. Zobaczysz jak opóźnić ładowanie i poczekać na dane a także jak przekazać je do komponentu. Dzięki wzorcom kompozytu i adaptera zobaczysz jak zbudować czystą architekturę aplikacji pozwalającą na swobodną reorganizację wyglądu twojej aplikacji.

Autoryzacja i Router - jak ograniczyć dostęp i kontrolować nawigację na stronie

Na koniec zobaczysz także jak połączyć mechanizmy autoryzacji i routingu, by nie tylko ograniczyć dostęp niepowołanym osobom do wybranych części aplikacji, ale także by załadować i uruchomić moduły zależnie od uprawnień aktywnego użytkownika.

Proste przykłady rozwiązania praktycznych problemów krok po kroku

Chociaż kurs prezentuje techniki zaawansowane, to przygotowany został w taki sposób, by każdy, kto zna podstawy Angulara mógł wykorzystać przedstawione w nim techniki. Jeżeli przerobiłeś Kurs Angular od podstaw na platformie Eduweb, oraz rozumiesz komponenty i wiązania - to bez problemu dasz sobie radę z przyswojeniem zawartej w Kursie wiedzy. Po przerobieniu całego materiału będziesz znał techniki budowania struktury aplikacji i będziesz potrafił w pełni wykorzystać mechanizmy, które oferuje Angular. Poznasz narzędzia pozwalające utrzymać porządek w kodzie oraz wysoką produktywność w pracy nawet wtedy, gdy aplikacja będzie bardzo rozbudowana. Co najważniejsze - będziesz potrafił tworzyć narzędzia i usługi wielokrotnego użytku, co znacznie ułatwia i przyspiesza pracę nad funkcjonalnościami Twojej aplikacji.

Większa efektywność i przyjemność z budowania aplikacji w Angular!

Obojętnie czy pracujesz już z Angularem, czy na co dzień kodujesz w innym frameworku - wiedza zawarta w tym kursie pozwoli Ci inaczej spojrzeć na architekturę aplikacji i budowanie złożonych struktur modułów i obiektów. Poznane wzorce projektowe są uniwersalne i dobrze je znając będziesz mógł swobodnie je wykorzystać w wielu innych sytuacjach. Jeśli wykorzystujesz w swojej pracy usługi, formularze i routing - to szybko zobaczysz, jak znajomość omawianych technik przełoży się na efektywność Twojej pracy i elastyczność Twojego kodu, a także wpłynie na jakość pracy całego zespołu. Jeśli chcesz poznać lepiej Angulara - to nie pozostaje mi nic więcej, jak tylko zaprosić się do pierwszej lekcji kursu.

Dla kogo jest ten kurs?

Kurs jest świetnym wprowadzeniem zarówno do koncepcji Angular jak i praktycznego zastosowania tego narzędzia w projektach. Polecany jest wszystkim, którzy chcą usprawnić, przyspieszyć i usystematyzować sposób, w jaki budują aplikacje internetowe - a w szczególności aplikacje typu single page. Jest to kurs na poziomie wprowadzającym dla osób, które znają podstawy HTML, CSS i JavaScript. W pierwszych sekcjach kursu omówione są różnice między podejściem klasycznym do pracy z przeglądarką a podejściem bardziej produktywnym, które oferuje Angular. W kursie używane są sporadycznie najnowsze technologie front-end, takie jak WebPack, EcmaScript, TypeScript oraz Rx.JS. Nie musisz jednak znać żadnej z tych technologii. Kurs wykorzystuje je w minimalny sposób, tak, by pokazać ich możliwości we współpracy z Angular i zachęcić do ich dalszego poznawania. Konfiguracja jest także bardzo prosta dzięki dołączonym narzędziom i wideo-instrukcji pokazującej krok po kroku jak zainstalować i skonfigurować narzędzia. Do każdej lekcji dołączone są też pliki źródłowe.

Czego się nauczysz?

  • Wzorce projektowe - zero teorii, praktyczne rozwiązania problemów

  • Mechanizmy wstrzykiwania zależności w różnych sytuacjach

  • Formularze omówione na wielu praktycznych przykładach

  • Walidacja i manipulacja struktura formularzy. Przydatne Triki

  • Ogromna dawka praktycznej wiedzy na temat RxJS

  • Komunikacja z serwerem REST, oraz logowanie i Autentykacja

  • Dynamiczny wielopoziomowy routing z kontrola dostępu

  • I wiele, wiele więcej!

Zawartość

Angular

8 rozdziały 51 lekcji 11h 45min

  • Wstęp do kursu

    15min

    Wprowadzenie

    Podgląd lekcji

    8min

    Konfiguracja i pliki źródłowe

    7min

  • Struktura złożonych aplikacji

    2h 12min

    Wzorzec wstrzykiwania zależności

    18min

    Statyczne wiązanie zależności

    9min

    Automatyczne wstrzykiwanie i Tokeny

    21min

    Przesłanianie i mockowanie zależności

    7min

    Hierarchia wstrzykiwania

    16min

    Usługi typu Singleton

    20min

    Wstrzykiwanie do widoku

    21min

    Wstrzykiwanie do treści

    10min

    Dyrektywa wstrzykująca

    11min

  • Formularze sterowane szablonem

    1h 31min

    Proste pole tekstowe z ngModel

    6min

    Pola checkbox i radio z ngModel

    7min

    Pola textarea i select z ngModel

    15min

    Zdarzenia formularza i ngForm

    16min

    Model danych Formularza w ngForm

    18min

    Zdarzenia i opcje ngModel

    14min

    Zagnieżdżone modele z ngModelGroup

    6min

    Dynamiczne dodawanie z ngModelGroup

    10min

  • Formularze sterowane modelem

    1h 12min

    Formularze sterowane modelem

    9min

    Grupowanie pól z formGroup

    12min

    Powielanie pól z formArray

    11min

    Wzorzec Budowniczego

    10min

    Zagnieżdżanie modele formularza

    15min

    Manipulowanie strukturą formularza

    15min

  • Walidacja i rozszerzanie formularzy

    1h 40min

    Walidacja formularzy

    16min

    Statusy pól formularza

    12min

    Własne walidatory

    18min

    Walidacja wielu pól

    8min

    Dyrektywa walidująca

    Podgląd lekcji

    15min

    Walidacja asynchroniczna

    14min

    Komponent komunikatów formularza

    16min

  • Komunikacja z serwerem i RxJS

    2h 52min

    Konfiguracja serwera REST

    4min

    Klient Http i Observable

    14min

    Współdzielenie subskrypcji Multicast

    20min

    Cache zapytań i ReplaySubject

    13min

    Zapytania mutujące i autoryzacja

    Podgląd lekcji

    13min

    Obsługa nagłówków HTTP - logowanie

    23min

    Obsługa błędów HTTP i wylogowanie

    24min

    Globalne logowanie - Interceptory

    22min

    Wyszukiwarka i podmiana zapytań

    20min

    Obiekt Response i Stronicowanie

    21min

  • Routing, Nawigacja i Autoryzacja

    2h 2min

    Konfiguracja modułu routingu

    14min

    Routing dla modułów funkcjonalnych

    9min

    Przekazywanie parametrów ścieżki

    24min

    Zagnieżdżony routing

    18min

    Nazwane gniazda routera

    7min

    Nawigacja, popup i zdarzenia routera

    23min

    Kontrola przejść nawigacji z Guards

    18min

    Opóźnienie ładowania z Resolve

    10min

  • Podsumowanie

    1min

    Zakończenie

    1min

Autor kursu

Mateusz Kulesza

Senior Software Developer, Konsultant, Trener

Średnia ocen autora: 5

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.
Inne kursy tego autora
Angular Angular Angular Angular Git

Dołącz do ponad 10 tys. zadowolonych z naszych kursów

Bardzo dobry materiał aby poszerzyć znajomość Angulara lub tak jak w moim przypadku - uzupełnić pewne luki.

Wiktor

25 września 2020

Bardzo fajny kurs. Pomógł mi uporządkować wiedzę oraz uzupełnić braki. Odczuwam lekki niedosyt RxJS ale może to po prostu kwestia przerobienia jakiegoś projektu wykorzustując tę bibliotekę. Aczkolwiek też dobry pomysł na jakiś osobny kurs/warsztat.

Wiktor

5 października 2020

mega wiedza na temat angulara :) przekazana w prosty i przystępny sposób. zgodna z angularem10 ;)

Mateusz

21 maja 2021

Kurs Angular

  • 51 lekcji wideo

  • 11h 45min materiału

  • Ostatnia rewizja 10.04.2018

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych

Dlaczego wybrać właśnie ten kurs?

Efektywna nauka

Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!

Wiedza ekspertów

Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.

Praktyczne przykłady

Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.

Pytania i odpowiedzi

Przeczytaj najczęściej zadawane pytania

Masz więcej pytań?

Porozmawiaj z nami na na czacie

Wyślij nam e-mail

Zadzwoń +48 880880606

Czy każdy kurs ma pliki źródłowe?

Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.

Jak jest skonstruowany kurs?

Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.

Jak najlepiej wykorzystać kurs?

Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!

Jak mogę uzyskać dostęp do kursu?

Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.

Czy kurs jest aktualny?

Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.

Czym się różni kurs od warsztatu i ścieżki?

Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.

We frontendzie nie można stać w miejscu, niezależnie od tego, czy jest się początkującym, czy zaawansowanym. Narzędzia i techniki się zmieniają, więc trzeba cały czas trzymać rękę na pulsie. Jako twórca kursów i programista mogę spokojnie polecić eduweb.pl jako aktualne i dobre źródło wiedzy.

Adam Romański

helloroman.com

Zacznij naukę w Angular

  • 51 lekcji wideo

  • 11h 45min materiału

  • Ostatnia rewizja 10.04.2018

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych