Angular: Kompozycja widoku z ViewChild
Techniki Zaawansowane - Interfejs
5 godz. 43 min · Angular · Full-stack i Programowanie
Mateusz KuleszaSenior Software Developer, Konsultant, TrenerCzego 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
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.
Angular 5.x