Angular: Organizacja i role komponentów

Angular 10+

0:00Mamy już włączonego trupa mógłbym po prostu ze strony bus

0:04trupa kopiować jakieś dodatkowe elementy i jeszcze jako HTML CSS to

0:10naszego AP komponent HTML tak samo jak zwykłą po prostu strona

0:13internetowa aczkolwiek tutaj siła potęga Mullera tkwi w tym że nie musimy budować

0:19jednego wielkiego pliku HTML tylko możemy taką stronę podzielić na mniejsze

0:24komponenty komponenty które później możemy wielokrotnie wykorzystać

0:28i teraz komponenty wydzielane wyglądają bardzo podobnie mają HTML CSS jest

0:33to komponent możemy sobie tak bogatego rysować podzielić na różne rodzaju

0:39komponenty które mają różne role one są tak samo wyglądały ale będą pełniły

0:44różne role będą służyły nam w różnych celach.

0:48Całe nasze portfolio

0:50nie będzie jedną stroną dodatkowe pod stronę byśmy jakąś nawigację

0:55powiedzmy jakieś nawet na jakimś nawigacje i powiedzmy że mamy tu jakieś strony czy

1:01tylko strona główna kontakt ona Galeria itd i chciałbym żeby

1:06niektóre z tych właśnie zakładek żeby nas przekierować na inną stronę.

1:11I teraz jeśli będziemy budować aplikacje typu Single Page no to będę chciał żeby

1:14ten ekran się zmieniał ale bez ponownego ładowania strony z serwera.

1:19Najprostszym sposobem na to jest tworzenie kilku komponentów gdzie każdy z

1:23komponentów będzie prezentował całą nową stronę cały ekran troll szkodnik zobaczy i

1:28po prostu zmieniając aktywnie wydzielony komponent będzie mógł zobaczyć inną stronę

1:32czyli utworzy sobie tutaj na razie na sucho.

1:35Pamiętasz Andy generator gdzie jak generator pozwalano wygenerować komponenty

1:39czyli jeszcze jako komponent i generator komponentu.

1:43I teraz tutaj ja nie będę to sugerował głównym katalogu byśmy jedynie w górnym

1:48katalogu gdzie zaraz straszny bałagan pójdzie pod katalogi.

1:51Czyli pomysł PO katalog adres pod strony

1:55i stworzymy stronę com strona główna powiedzmy

1:59i strona powiedzmy z naszymi portfolio czyli projekt

2:04projekt i tworzę może jeszcze jakąś stronę about as na przykład

2:11czyli wygeneruje sobie trzy komponenty na tych komponentów które będą reprezentowały

2:15całą stronę będę chciał umieścić pewne elementy które

2:18powodują tylko jakieś poszczególne funkcjonalności np.

2:22taki na bar przycisk czy wyszukiwarkę.

2:25Teraz nie chcemy tego samego HTML a

2:26kopiować za każdym razem do każdego z tych ekranów od naszych stron

2:31więc cały taki efekt na nawa też zamieni go na komponent

2:35i to już w samym katalogu czyli engine generator komponent.

2:39Tak samo tylko to w katalogu komponent i nazwę to nazwa nasz pasek nawigacyjny

2:47i w ten sposób mogę utworzyć jakieś inne elementy tutaj w naszym przykładowy

2:52dębów HTML u gdzie na przykład jakieś takie paski przewijania otworzyć jakąś

2:57nawigację tego typu elementy na przykład też o HDR.

3:01Czy taki pasek

3:02jest jakimś z jakimś tekstem to też mogę to robić jako pod komponent

3:07czyli zobacz mamy komponenty które pełnią rolę stron duże komponenty może tak to

3:12zapamiętać i nieużywane bloki które też są konkurentami ale mają inną rolę.

3:17Choć mam kilka stałych stron każdy z nich

3:20występuje tylko raz i na każdym z tych stron mogę wielokrotnie

3:24użyć któryś z tych komponentów na przykład robimy sobie pasek nawigacyjny i np.

3:32choroba czyli taki pasek właśnie tutaj z tłem z jakimś tekstem którego możemy użyć

3:37i zwrócił uwagę że tych poleceń jeszcze nie wykonałem.

3:40Przygotowałem je z boku.

3:42W tym momencie brakuje robić komitet z gitar zachować zmiany gdyby coś poszło

3:46nie tak jakbym cały czas serwer uruchomiony nasz

3:50i w osobnej karcie po prostu skupuje te wszystkie polecenia

3:55i Englert po kolei będzie wykonywał te polecenia i wygeneruje odpowiedni

3:59łotewskie pliki czyli Page jest komponent itd.

4:02I innej wersji niż ta która jest w kursie.

4:06No to może taki komunikat wystąpi czy się

4:08wersje różnią jeśli masz tylko łącznik to powinno być tu to OK.

4:13Zobaczymy.

4:13Mamy komponenty ich strony czyli dokładnie te struktury które sobie tutaj

4:19zapisały taką strukturę mi tutaj wygenerował komponenty i strony

4:25tak to w ten sposób mogę odtworzyć sobie stronę Home komponent HTML tutaj

4:31całą zawartość stąd przenieść powiedzmy do Home komponent

4:39ale powiedzmy że ten nagłówek sam chcielibyśmy wykorzystać wielokrotnie na

4:43różnych stronach czyli tutaj w AP komponent umieszcza.

4:50Home czyli ten komponent Home komponent mieszkam w głównym mapie.

4:57Oponenci na wybór tutaj jakiejś kultury HTML

5:06czyli powiedzmy kopiuje sobie tutaj jakiś przykładowy może jakiś prostszy taki.

5:15Tu i teraz cały ten Napier komponent jak pamiętasz.

5:18On ma specjalną nazwę AP nazwa.

5:20Tak to jest lektor i teraz ten lektor mogę

5:23sklecić na każdej stronie na której potrzebuje na główkę czy nagłówek dodać do

5:28strony Home mogę dodać go do strony projekt np.

5:32.

5:35I mogę dodać do strony Bałtów np.

5:38w tym miejscu czy gdziekolwiek użyję tego Bara jeśli zmienię HTML tutaj w

5:44tym głównym naszym komponenty to wszędzie gdzie jest wystawione na każdym miejscu.

5:48Zmieni się też to elegancko.

5:50Zobaczmy jak to nam zadziała.

5:54Mamy na to jeszcze nie działa.

5:57Teraz jeśli użycie innych stron widzimy mieście np.

6:00w naszym głównym AP komponent zamiast Hyundaia umieścił bym np.

6:06.

6:08Nasz Band.

6:15Mamy about ale nagłówek jest ten sam bo

6:18pod komponent wykorzystywany wielokrotnie na różnych kontynentach stron.

6:22Jeśli spojrzymy z powrotem w terminal to zobaczymy się ładnie akurat wygenerował

6:27HTML tez CSS i zarejestrował to przez KOD do App.

6:33Mogą się tworzyć główny moduł to komponenty które wygenerowane są ładnie za

6:38importowane i są dodane do deklaracji moduł.

6:42To jest ważne że go robić zgłosić których komponentów używamy czyli np.

6:47mamy tam aut komponenty.

6:49Chciałbym tutaj użyć i zapomnę go zarejestrować w deklaracjach.

6:54Zobaczmy tutaj. Projekt przebudowa.

6:57O to jak się pojawi błąd.

7:01AP about mam a nie jest znanym elementem

7:06upewnij się czy a na pewno jest oponentem czy na pewno czy gwałt komponent czy

7:12lektor zgadza się z nazwą w HTML u i upewnij się czy jest on częścią modułu

7:18czyli trzeba się upewnić że ten komponent którego chcemy użyć na pewno znajduje się

7:22w naszym głównym module albo został za importowany z któregoś z modułów.

7:27Czy możemy także użyć innych modułów

7:29które mają komponenty ale musi być gdzieś w deklaracjach użyte inaczej nie

7:35możemy ogłosić na stronie i tu spróbujmy odświeżyć stronę ta jest pusta.

7:39Nam wszystko zniknęło.

7:42Spróbuję jeszcze do tego dodać z powrotem.

7:45Jeśli go zarejestruje my to mamy komplet sex w jest zielono.

7:49Wszystko działa OK i teraz ten nasz komponent który używamy w środku czyli

7:55nasz powiedzmy na komponent nie wspominam że się go zmienię.

7:59To się zmieni we wszystkich miejscach we

8:01wszystkich innych komponentów stronach czyli powiedzmy sobie portfolio.

8:08Zmienię sobie też style na jakieś

8:10ciemniejsze powiedzmy w ten sposób podam tu jakieś przykładowe klasy.

8:17Nie jest to w tym momencie bardzo istotne

8:19tylko pokaże czy będzie to teraz to ładnie powinno powinnam to działać.

8:24Mam też te wszystkie data to data target możemy użyć po prostu biblioteki móc

8:29dołączyć do QWERTY ale ponieważ mam temu Lara czyli mogę dodać też ręcznie np.

8:34obsługę klik.

8:37Ustalił że kliknięcie na przykład zmienia Open równa się nie Open.

8:41Trumna z FOZZ.

8:43I jeśli powiedzmy jest chłopem

8:46to tej ustawie że powiedzmy klasa klasa szkół to jest popyt.

8:53No i zmienną Open tworzy w tym pod komponent.

8:56Czy nie muszę innych komponentów coś mieszać sobie tymi zmiennymi.

9:01Mogę całą logikę zabijania rozwijania rozwijania menu.

9:05Mogą jeździć tylko w komponent Bara mniej a inne komponenty.

9:08Wystarczy że użyją tylko na przykład Abbott rzadko użyją tego menu i w ten

9:12sposób nie muszą się martwić już o nawigację.

9:15Zobaczmy i mamy pasek nawigacyjny

9:20i mamy zabijanie rozwijanie i znowu użyje innego komponentu.

9:26Tu już nie muszę się martwić o pasek nawigacji bo razem został zmieniony dodany

9:30mógłby teraz wielokrotnie na różnych stronach wykorzystać.

9:34Tak samo wyglądał tak samo działał bardzo fajna rzecz.

9:38Tak więc pamiętaj że zamiast kopiować całe bloki HTML a jeśli chcesz użyć coś

9:43ponownie stworzyć sobie komponent koszyku ponownie i też pamiętaj o tym żeby taką

9:49strukturę aplikacji sobie od razu jakoś uporządkować czyli podzielić te komponenty

9:54na jakieś role na jakieś grupy które chcesz żeby one pełniły jakieś funkcje.

9:59Często ja robię komponenty czyli bloki których używamy takie by zwykłe komponenty

10:04i to w specjalnych fotelach tworzę komponenty które są specjalne role.

10:08Tak np.

10:09prezentują ekran czy reprezentują jakieś właśnie okna czy jakieś panele czy

10:14powiedzmy komponenty które prezentują jakiś stan.

10:18Widzimy trudność w kolejnych lekcjach tego kursu.

10:21Pamiętaj dokładnie nieważne czy przy karty

10:24komponentów musi być zarejestrowany w odpowiednim Module.

10:28Jeśli mogę nie zawiera komponentu to

10:30gładko pokaże błąd że nie jest to rozpoznany komponent.