Angular: Tworzymy pod-komponenty

Angular 10+

0:00Skoro wiesz już z czego składa się

0:02komponent oraz jak umieścić na stronie No to spróbujmy tym razem stworzyć nowy

0:08własny komponent i zobaczymy jak możemy ten dodatkowy komponent umieścić w naszej

0:14aplikacji i otworzy tutaj jeszcze raz terminal.

0:17Jeśli chodzi o ten serwer to go nie

0:19wyłącza niech zostanie plusem albo podzielić

0:24terminal na dwa może dać nową konsolę jeszcze raz Plus i mogę mieć tutaj dwie

0:30konsole otwarte jednocześnie więc serwer niech sobie działa.

0:34Ja mamy sobie drugą

0:35taki nowy komponent mógł utworzyć ręcznie mógł po prostu utworzyć nowy plik i i tyle

0:41a Polar posiada bardzo fajne narzędzia do generowania kodu.

0:46Czyli mogę zrobić engine generator i generator pozwala generować

0:55różne szablony różnych elementów nie tylko całe aplikacje ale możemy np.

0:59wygenerować sobie komponent czyli w katalogu naszym projekcie.

1:04Tu wykonuje engine generator.

1:07W skrócie jesteś tylko gdzie ten komponent.

1:11W skrócie C czyli engine Angola generator wygeneruje komponent C.

1:17I tu podaje teraz

1:19podaję gdzie go chcę wygenerować czyli ścieżkę rozpoczynamy z katalogu S C

1:24czyli powiedzmy nazwę komponent adwokat albo tu jest dowolna.

1:29Na razie nazwę to po prostu komponent i

1:32nasz główny komponent nazwę powiedzmy walką komponent jakoś tak.

1:38Stąd też ciekawe dodatkowe opcje

1:41jakim jeszcze jest coś takiego że chciałbym tutaj inna planetę.

1:47To.

1:51W skrócie Plater bo właściwie templariusze na FOZZ

1:57Alice in Chains stają też na FOZZ i dodatkowo jeszcze opcję Flat Focus.

2:06Co to znaczy zaraz zobaczymy Koszty komponentów to wygenerowanie ma

2:10masę różnych dodatkowych opcji których możemy użyć czyli jeśli

2:13bym nie użył tych opcji to mam tu jeden plik tak jak App komponent.

2:17Był to jeden plik który zawiera HTML CSS.

2:20W środku tak jak tu widzisz tablet w

2:22środku i tyle w środku ale komponent może być też inaczej zrobiony.

2:27Pokażę ci.

2:28Dla porównania z boku błagam spójrz na tam komponenty.

2:33Jest to też klasa.

2:36Wyrzuca się niepotrzebne elementy żebyśmy widzieli podobieństwo.

2:40Jest to tak samo klasa jak nasz komponent która też ma o góry Dekoral tor.

2:47Tak samo jak komponent też ma lektor spór że elektor powstał na

2:52podstawie nazwy pliku czyli tak jak nazwałem komponent tak on

2:55sam wygenerował domyślny reaktor AP leśnik Orkan aczkolwiek

3:00ten Plate czyli nasz HTML który chcemy wyświetlić jest teraz w osobnym pliku.

3:05I ten plik jest tu zobacz do wiązany po prostu po ścieżce ten sam katalog walką

3:10komponent HTML tu jest plik HTML w tym katalogu i CSS.

3:15Zobacz też zostały wyciągnięte na zewnątrz do osobnego pliku.

3:19Czyli możesz komponenty widzisz w ten

3:20sposób tworzyć jako wszystko w jednym pliku czyli HTML CSS do pliku.

3:26Możesz też rozbić go dodać opcję Flat Falls czyli zawsze katalog żeby był

3:31tworzony żeby te kompletnie nie nie były luzem tylko były zebrane.

3:35Pełen katalog. Style.

3:38Chcemy żeby on nie dołączył ich w środku tylko na zewnątrz.

3:42I tak samo Temple ta z tych opcji musi za każdym razem pisać jak chcesz.

3:48Jeśli chcesz zawsze przed katalogu zawsze

3:51bez katalogu albo jeszcze inaczej to w pliku Angole Jackson.

3:55Możemy sobie to skonfigurować.

3:56Jak widzisz tutaj i Play zawsze jest tu możemy zmienić na Fox inna instalację.

4:04Zmieniamy na Fox i jeszcze robimy.

4:09Flat Force generał komponenty nie muszę tych

4:14opcji podawać za każdym razem tylko mogę napisać.

4:18Oczywiście możesz też zrobić sobie Andrzej generale komponent HELP.

4:22Do każdego z tych generatorów możesz

4:24zobaczyć jakie są opcje dostępne i każdy opcja jest opisana z dokumentacją będziemy

4:29sobie różnych tych opcji używać w kolejnych lekcjach.

4:32Pamiętaj o tym że każdą opcję możesz na sztywno sobie zapisać tutaj.

4:36OK wróćmy do naszego komponentu

4:40czyli zapisze ten plik komponent zamknęli i mamy

4:45komponentu go komponent ma swój HTML ma swoje CSS

4:50teraz gdybyśmy chcieli umieścić gdzieś komponent to musimy użyć jak pamiętasz

4:55tego naszego sektora czyli muszę stworzyć w HTML u coś co

4:59nazywa się tak i tak HTML owej gaz uważaj bo się spróbuje go zamontować w indeks

5:06HTML powiedzmy w tym miejscu i zobaczymy naszą przeglądarkę.

5:17To nie działa. Jak widzisz.

5:19Nie ma żadnej treści w środku jest to po

5:21prostu zwykły element HTML Conquer w ogóle go nie rozpozna.

5:25Tak się składa że akurat tutaj wszystko uruchamia tylko w jednym miejscu.

5:29Tutaj mamy tzw. root korzeń czyli mamy aplikację która

5:32jest cała zbudowana w oparciu o drzewo które jest zamontowane w jednym miejscu.

5:38I teraz jeśli chcielibyśmy

5:40kilka komponentów porozrzucane w naszej aplikacji masz stronę internetową

5:44chciałbyś nagłówek bo komponenty jakiejś pasek boczny stopa jakiś przycisk

5:50to możesz już to w ten sposób i tutaj czemu nie Man tu się uruchamia.

5:57Widzisz nie mamy komponentu tylko mamy moduł i moduł definiuje właśnie

6:02jakie komponenty są zarejestrowane w aplikacji.

6:05Tutaj widzisz jak wygenerowały komponenty

6:07też ciekawa rzecz bo po wygenerowania komponentu zrobił trzy rzeczy dodał.

6:13Trzy pliki i czwarta rzecz zaktualizować

6:16właśnie plik a model czyli nasz komponent zobacz za importowany tutaj

6:22import komponent z naszego pliku i bardzo ważne dopisał ten komponent do

6:28listy aktywnych komponentów dokumentu to nie było to by nie działał.

6:33I teraz jeśli komponentu się znajduje to znaczy że mogę w innych komponenty go użyć

6:38więc go pod komponent zrobić to znaczy że mogę np.

6:40apt komponent HTML u mogę umieścić a poczekam.

6:48I zobaczmy w przeglądarce i ją tu ładnie zadziała.

6:52Jak widzisz komponenty zawarte w drugiej

6:54wszystkie te zawarte w już istniejących komponenty pięknie Acer wykrywa nie musimy

7:00nic robić tylko jak wykryje gdzieś w HTML u w temacie któregoś komponentów to w

7:05widoku czyli wyświetlany HTML u automatycznie widzisz umieścić mam całe

7:09drzewko poziomowi bardzo złożoną strukturę HTML a wygenerować

7:13jeśli chcemy żeby poza głównym oponentem też dało się to zrobić gdzieś w indeks

7:18HTML to tutaj widzisz buc Trap decyduje które komponenty są kumplami głównymi

7:25czyli kompanami które są pierwsze uruchamiane na samym początku w pliku

7:29indeks HTML 8 tutaj umieścił też ten nasz komponent komponent.

7:36Usunęło z pliku tutaj wyrzuca go z naszego

7:40komponentu i montuje go w pliku Index HTML.

7:44Czyli jeśli już możemy mieć dwa główne komponenty AP komponent nasz

7:49pojawia się jako pierwszy na stronie i gładką komponent też jest drugim

7:54komponent najwyższego poziomu można powiedzieć że mamy tutaj nasz a który ma

7:58styl i szablon i pod spodem gdzieś tu jest.

8:03Też zwróć uwagę że taki komponent główny

8:05możesz już też raz jeśli ja trzy razy musiał moją walką to to nie zadziała.

8:10Główny komponent widzisz wydawany jest tylko raz musi być to unikalne.

8:14Nie możesz dwa razy mieć takiego samego

8:16głównego komponentu więc nie mogę tutaj tego powtórzyć.

8:19Co ciekawe ten wielką będzie znajdował się też tutaj.

8:28To jak tutaj nazywa się też nie działa tylko tutaj.

8:30Czyli każdy komponent może być użyty jako

8:33główny komponent czyli tutaj zobaczymy jeszcze plik Maine Maine AP moczu AP tez

8:41może mieć kilka głównych komponentów ale każdy główny komponent może być użyty

8:45tylko tutaj raz już jest dziś użyty w środku to już się wtedy nam nie wyświetli.

8:50Ja w takim razie ten komponent stąd komentuje zostawimy go tylko w

8:55deklaracjach i będzie to pod komponent nie będziemy go użyła jako głównego komponentu

9:00tylko po prostu łaską komponent wyświetli w środku

9:07szablon a komponentu tak czyli tutaj myślimy komponent

9:12a wpadką po necie umieszczać od komponent a Płatka i w ten sposób jak widzisz możesz

9:18tworzyć takie wielu poziomów że możesz tworzyć hierarchię komponentów.

9:22Gdzie mieszkasz kilka głównych komponentów albo jeden główny komponent.

9:26Jest to jednak zalecana praktyka żeby nie

9:29rozbijać aplikacji na kilka tylko jeden główny komponent i w komplecie.

9:33Tutaj już możesz śmiało wielokrotnie używać tego samego pod

9:37komponentu lub innych komponentów pod komponenty mogą mieć pod komponenty itd.

9:43Bardzo rozbudowane aplikacje w ten sposób

9:46tworzyć ok zostali na razie a następnie zajmiemy się tutaj szczegółami a

9:53zobaczymy co ten komponent może dla nas zrobić.