Masz już konto? Zaloguj się

Kurs Angular

Angular to potężne narzędzie przyspieszające tworzenie zarówno prostych, jak i bardzo złożonych aplikacji internetowych.

32 lekcji

5h 43min

5 (2 oceny)

Angular - Techniki Zaawansowane - Interfejs

Angular to potężne narzędzie przyspieszające tworzenie zarówno prostych, jak i bardzo złożonych aplikacji internetowych. Jeśli pracowałeś już z Angularem lub jeśli przerobiłeś kurs Angular od Podstaw na platformie Eduweb - wiesz już jak za pomocą tego narzędzia rozwiązać wiele typowych problemów związanych z budowaniem interfejsu aplikacji. Wyświetlanie danych, zmiana styli czy przełączanie widoków - dzięki automatycznemu wykrywaniu zmian w Angularze to wszystko działa bardzo prosto. To jednak nie wszystko co oferuje Angular. We frameworku kryje się wiele przydatnych, ale mało znanych funkcji i narzędzi, które warto poznać - nie tylko po to, by pisać lepszej jakości kod, ale również by być bardziej produktywnym.

Komponenty wielokrotnego użytku

W pierwszej części kursu omówione zostało budowanie komponentów w sposób jak najbardziej elastyczny i rozszerzalny, po to, by nie pisać ponownie tego samego kodu. Celem jest jego wielokrotne wykorzystanie. W kursie poznasz metody parametryzacji, rozszerzania i dziedziczenia komponentów. Zobaczysz jak komponenty mogą wykrywać inne komponenty i wchodzić ze sobą w interakcje, by twój kod był czystszy. Zobaczysz jak wykorzystać wspólną logikę komponentu do skonstruowania kilku różnych elementów interfejsu. Dowiesz się jak dzielić logikę komponentów i tworzyć kod do wielokrotnego użytku.

Projekcja i kompozycja treści

W drugiej sekcji kursu pokazane są techniki oddzielania logiki od szablonu. Omówione zostały proste oraz zaawansowane techniki projekcji treści pomiędzy komponentami. W tej sekcji dowiesz się także jak wykrywać komponenty znajdujące się w szablonach innych komponentów i budować logikę w pełni niezależną od widoku.

Dyrektywy behawioralne

Angular od wersji drugiej posiada bardzo potężny zestaw wiązań i dyrektyw wbudowanych. Można dzięki nim budować kompletne aplikacje bez potrzeby tworzenia dyrektyw. W kolejnej sekcji tego kursu omówione zostały szczegółowo te właśnie dyrektywy, a dokładniej - proces budowania własnych dyrektyw, by w pełni kontrolować natywne elementy DOM (a także i komponenty). Z tej sekcji dowiesz się nie tylko jak wykonać nietypowe operacje na DOM w dyrektywach, nie używając do tego jQuery, ale także jak bezpiecznie i niezależnie od platformy obsłużyć operacje na DOM, podpinanie zdarzeń i wiele innych.

Dyrektywy strukturalne

Dyrektywy nie tylko pozwalają zmieniać wygląd strony, ale dzięki możliwości łączenia i komunikowania się między sobą - pozwalają na budowanie własnych elementów logiki interfejsu, niezależnych zupełnie od struktury HTML. Pokażę Ci jak stworzyć atrybuty, które wystarczy umieścić w dowolnym fragmencie HTML, by przerobić go na panel, zakładki czy listę rozwijaną. Zobaczysz jak prawidłowo obsłużyć zdarzenia, akcje użytkownika i komunikację pomiędzy dyrektywą a komponentem. Na praktycznym przykładzie zbudujemy kolejne praktyczne elementy interfejsu użytkownika.

Szablony

W kolejnych lekcjach kursu zajmiemy się pracą z szablonami. Dowiesz się czym jest i jak działa szablon w Angularze. Omówione jest proste oraz zaawansowane wykorzystanie dyrektyw ngIf oraz ngFor oraz to, jak działają one “w środku”. W tej sekcji poznasz także techniki dynamicznego podmieniania szablonów oraz całych komponentów. Dowiesz się jak uzyskać referencje do szablonów i umieszczać je dynamicznie w kontenerach.

Dynamiczna struktura komponentów

Struktura interfejsu nie musi być zdefiniowana na sztywno. W ostatniej sekcji kursu omówione są narzędzia do dynamicznego podmieniania komponentów oraz przekazywania do nich danych. Kurs skupia się na praktycznych aspektach pracy z Angularem. Dowiesz się z niego nie tylko jakie funkcje do budowania interfejsów oferuje Angular, ale także - jak je wykorzystać w prawdziwych, praktycznych sytuacjach. Podczas kursu wspólnie budujemy zakładki, panele czy listy rozwijane, a na koniec pokażemy Ci jak zbudować rozszerzalny interfejs przykładowej aplikacji społecznościowej - w tym, jak budować rekurencyjne struktury komponentów.

Dla kogo jest ten kurs?

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 Eduweb i rozumiesz działanie komp"https://eduweb.pl/specjalizacje/front-end" target="blank">podstawy HTML, CSS, i JavaScript. W kursie używane są sporadycznie najnowsze technologie front-end, takie jak WebPack, EcmaScript 2015, TypeScript oraz RxJS. 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. Do każdej lekcji dołączone są pliki źródłowe, które pomogą w zrozumieniu przykładów.

Czego się nauczysz?

  • Wzorce i techniki parametryzacji i dziedziczenia komponentów

  • Budowanie międzyplatformowych dyrektyw behawioralnych

  • Kompozycja i projekcja komponentów

  • Dyrektywy strukturalne i szablony

  • Dynamiczna struktura interfejsu

  • Wstrzykiwanie komponentów

  • Komunikacja pomiędzy dyrektywami i komponentami

  • Rekurencyjne struktury komponentów

Zawartość

Angular

6 rozdziały 32 lekcji 5h 43min

  • Wstęp do kursu

    8min

    Wprowadzenie

    Podgląd lekcji

    5min

    Konfiguracja i pliki źrodłowe

    3min

  • Parametryzacja i rozszerzanie

    1h 18min

    Statyczny komponent

    4min

    Atrybuty komponentów

    9min

    Dynamiczne właściwości

    9min

    Nasłuchiwanie własnych zdarzeń

    10min

    Sterowanie przez lokalne referencje

    7min

    Dziedziczenie komponentów

    8min

    Kompozycja widoku z ViewChild

    15min

    Dynamiczna kompozycja z ViewChildren

    18min

  • Projekcja i kompozycja

    1h 11min

    Projekcja z ngContent

    4min

    Multi-projekcja z select

    6min

    Kompozycja zawartości z ContentChild

    13min

    Kompozycja z ContentChildren

    12min

    Zagnieżdzanie z ContentChildren

    13min

    Komponowalna logika aplikacji

    13min

    Komponowalna logika aplikacji cd.

    9min

  • Wspóldzielenie zachowania

    1h 9min

    Własne dyrektywy i ElementRef

    Podgląd lekcji

    12min

    ContentChild i Renderer

    16min

    Obsługa zdarzeń HostListener

    10min

    HostListener - użycie zawansowane

    11min

    Wiązanie właściwości z HostBinding

    12min

    Dostęp do API z exportAs

    8min

  • Dynamiczna struktura

    1h 55min

    Podmiana szablonu z ngIfElse

    Podgląd lekcji

    17min

    Referencje w ngIf - składnia "as"

    7min

    Mikroskładnia dyrektyw i kontekst implicit

    13min

    Dynamiczne szablony ngTemplateOutlet

    14min

    TemplateRef i dyrektywy jako referencja

    7min

    Dyrektywy strukturalne i kontenery

    30min

    Dynamiczne komponenty

    20min

    Rekurencyjne komponenty

    7min

  • Podsumowanie

    2min

    Zakończenie

    2min

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

Rewelacyjny kurs!! Polecam

Przemyslaw Chudziński

29 stycznia 2021

Chciałem jednocześnie się uczyć i na boku klepać dalej mój projekt. Niestety szybko zaczęło mnie to męczyć, bo sięgając do innych źródeł okazało się, że mając teraz Angulara 16 różni się on trochę od tego z kursu (w tym w kursie jest Angular 5, a w innych o angularze najnowszy to chyba 10) i wykorzystuje się powszechnie już trochę inne rzeczy, by wygodniej się programowało.

Luke

15 stycznia 2023

Kurs Angular

  • 32 lekcji wideo

  • 5h 43min materiału

  • Ostatnia rewizja 18.12.2017

  • 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

  • 32 lekcji wideo

  • 5h 43min materiału

  • Ostatnia rewizja 18.12.2017

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych