Ta lekcja jest w bazie eduweb

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

Wykup dostęp do bazyZaloguj się kontem Easy

Lekcja 19/ 32ContentChild i Renderer

0:00 / 0:00
Full-stack i ProgramowanieAngularTechniki Zaawansowane - Interfejs

Angular: ContentChild i Renderer

5 godz. 43 min wideo32 lekcje6 modułów

Mateusz KuleszaSenior Software Developer, Konsultant, Trener
Wszystkie kursy autora

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

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.

Wersja oprogramowania: Angular 5.x

Kurs Angular

6 rozdziałów32 lekcje5h 43min

Wstęp do kursu

8min
  • Wprowadzenie5min(zablokowana)
  • Konfiguracja i pliki źrodłowe3min(zablokowana)

Parametryzacja i rozszerzanie

1h 18min
  • Statyczny komponent4min(zablokowana)
  • Atrybuty komponentów9min(zablokowana)
  • Dynamiczne właściwości9min(zablokowana)
  • Nasłuchiwanie własnych zdarzeń10min(zablokowana)
  • Sterowanie przez lokalne referencje7min(zablokowana)
  • Dziedziczenie komponentów8min(zablokowana)
  • Kompozycja widoku z ViewChild15min(zablokowana)
  • Dynamiczna kompozycja z ViewChildren18min(zablokowana)

Projekcja i kompozycja

1h 11min
  • Projekcja z ngContent4min(zablokowana)
  • Multi-projekcja z select6min(zablokowana)
  • Kompozycja zawartości z ContentChild13min(zablokowana)
  • Kompozycja z ContentChildren12min(zablokowana)
  • Zagnieżdzanie z ContentChildren13min(zablokowana)
  • Komponowalna logika aplikacji13min(zablokowana)
  • Komponowalna logika aplikacji cd.9min(zablokowana)

Wspóldzielenie zachowania

1h 9min
  • Własne dyrektywy i ElementRef12min(zablokowana)
  • ContentChild i Renderer16min(zablokowana)
  • Obsługa zdarzeń HostListener10min(zablokowana)
  • HostListener - użycie zawansowane11min(zablokowana)
  • Wiązanie właściwości z HostBinding12min(zablokowana)
  • Dostęp do API z exportAs8min(zablokowana)

Dynamiczna struktura

1h 55min
  • Podmiana szablonu z ngIfElse17min(zablokowana)
  • Referencje w ngIf - składnia "as"7min(zablokowana)
  • Mikroskładnia dyrektyw i kontekst implicit13min(zablokowana)
  • Dynamiczne szablony ngTemplateOutlet14min(zablokowana)
  • TemplateRef i dyrektywy jako referencja7min(zablokowana)
  • Dyrektywy strukturalne i kontenery30min(zablokowana)
  • Dynamiczne komponenty20min(zablokowana)
  • Rekurencyjne komponenty7min(zablokowana)

Podsumowanie

2min
  • Zakończenie2min(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

Mateusz Kulesza
Ś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.

Inne kursy tego autora

Pokaż więcej kursów