Angular: Szablony i dyrektywy strukturalne

Angular 10+

0:00W jednej z poprzednich lekcji poddaliśmy opcję czytaj więcej.

0:04To dodatkowy tekst pokazuje by ten tekst dynamicznie wystawiony na

0:09naprawdę spójrzmy jeśli spojrzymy w KOD to ten tekst cały czas tam jest po prostu

0:16on jest ukryty i zmieniając w atrybut flagę Hidden na klik po prostu

0:22dodajemy CSS zmieniamy w CSS em wygląd dzięki czemu ten tekst się pojawia.

0:27W takich przypadkach jak ukrycie elementu

0:30i pokazanie go później może być OK i żeby stronę internetową.

0:33Tak przy dynamicznych aplikacjach

0:35nie tylko interesuje nas zmiana tekstu zmiana właściwości czy zmiana stylu.

0:40Chcielibyśmy mieć możliwość zupełnie

0:42dynamicznego dodawania nowych elementów elementów HTML.

0:47Jeśli chciałbyś chciałbyś mieć jakiś HTML to swego kodu.

0:51To jest taka możliwość po prostu możesz

0:52użyć tutaj atrybutów HTML i tutaj przekazać jakąś treść

0:58jakieś tagi HTML które chcesz użyć w aplikacji i to w Reader jako HTML

1:07jednak jest jak widzisz bardzo niewygodne bo musimy sklecić stringi sklecić tekst

1:13ze sobą umieścić go w zmiennej w 3 kiwać tutaj i w ten sposób też nie możemy używać

1:18ani komponentów ani dyrektyw jest to taki zwykły surowy HTML.

1:23Jeśli chcemy żeby element został dodany

1:26później żeby element mógł dodane być dynamicznie do strony

1:30to musimy go umieścić w takim specjalnym elemencie który nazywa się Anglii Plate.

1:38I jeśli jeszcze ten cały akapit drugi

1:41w tym kontenerze takim hitem Plate to on zupełnie zniknie ze stron.

1:46Już teraz zbadamy ten HTML i spróbuje poszukać tego tekstu to w

1:51miejscu gdzie był ten tekst znajdziemy coś takiego jak kontener.

1:55Teraz ten kontener to jest komentarz i ma

1:57bardzo specjalne znaczenie bo ten komentarz jest specjalnym

2:01wskaźnikiem takim punktem zaczepienia kotwicą kontenery.

2:05Dzięki temu Hanower pamięta

2:07w którym miejscu ma znajdować się ten nasz Elementarz HTML.

2:12Nasze komponenty lub dowolna inna wartość.

2:14Taki punkt zaczepienia.

2:16I teraz musimy uczyć się mechanizmu

2:18który ten kontener nam podłączyć w to miejsce ten nasz tablet szablon.

2:22I takim najbardziej podstawowym

2:23mechanizmem którego możemy użyć jest engine IF czyli jeśli po angielsku.

2:29Jeśli warunek jest prawdziwy

2:32czyli powiedzmy nie wiem 2 jest większy od 1 lub po prostu True.

2:37Jeśli ten warunek jest w danym momencie

2:39prawdziwy to Aguilera użyje tego szablonu żeby w tym miejscu przypaść na element.

2:46Jeśli zmieni się strona S no to zostanie

2:48zupełnie zniszczony nie tylko schowany ale zupełnie zniszczony.

2:52Ten element tutaj pierwszy read more

2:55ja ustawie żeby on powracał wartość zmiennej More czy zmieniał strona Falls.

3:01Zobaczymy co się stanie tutaj jeśli ten

3:03Folc lub tu znajdzie się w tym miejscu w Anglii.

3:09Jak widzisz teraz nasz kontener troszeczkę

3:11się zmienił tylko teren teraz wskazuje jaka jest bieżąca wartość tej dyrektywy.

3:17Bieżąca wartość dyrektywy to jest w Polsce i naszego elementu tutaj nie widać.

3:21Jeśli zmienię wartość wiatru to on w tym momencie w tym miejscu

3:27utworzy nasz akapit jeśli znowu tutaj klika elementów nam się schował.

3:34Co zmienić się ten z powrotem na drugi raz

3:38to ten element ten cały akapit tutaj zostanie zupełnie zniszczony.

3:42I to jest bardzo istotne.

3:43Te elementy nie są chowane one są ponownie tworzone i niszczone.

3:48Czy jeśli powiedzmy w waszym lecie znalazłby się np.

3:51kolejny taki pasek progres.

3:54I dodatkowo tutaj chciałam głosować dynamicznie.

3:56Czy jest już od lat

3:58i przy każdej zmianie buta ustawi sobie zmienną jakąś

4:03równą event target i piszę tę wartość jako wartość tego naszego.

4:13Progress bar czyli powiedzmy mamy jakieś takie dynamiczne elementy które zawierają

4:17nie tylko tekst HTML ale także wiązania zdarzenia elementy alarmowe

4:23wpisze powiedzmy tutaj nie wiem 30 5 pasek się zmienia.

4:30W ten sposób.

4:32I wszystko fajnie to działa

4:34tylko pamiętaj o tym że jeśli używamy teraz szablonów GIF.

4:38Jeśli ponownie zmieni tutaj wartość strona Focus to cały ten element wraz z

4:44oponentami ze środka w środku z tym całym HTML em zostanie zniszczony.

4:50Jeśli znowu go teraz kliknąć znowu z tyłu.

4:53To zupełnie nowa czysta kopia.

4:56I jak widzisz ten import jest pusty.

4:59Czy są stworzone od nowa jego wartość stała zniszczona.

5:01Nie mamy wartości w nim ale nasz komponent.

5:05Jemu się udało zachować wartość ale tylko

5:07dlatego że on tą wartość pobiera sobie jeszcze raz.

5:12Poprzez to Properties tutaj chwalił które tu przekazałem.

5:16Dlatego żartowali po prostu zapisał w bieżącym Home komponent.

5:19Jeśli ten komponent progres bar przechowywał jakąś

5:23wartość w środku jakiś stan i ta wartość nie byłaby powiązana z

5:27komponentów Home tutaj przez tą zmienną Walią to niszczy ten komponent tworząc go

5:32jeszcze raz tak żeby się zresetować do swej

5:35oryginalnej wartości tak samo jak nasz import tutaj się wyczyścić.

5:39Czy jak widzisz jest to bardzo fajne.

5:42Fajna rzecz można sobie

5:43tworzyć takie wycinki HTML razem z komponent tam też są tworzone niszczone.

5:47Musisz pamiętać o tym że wszystkie

5:49elementy w środku właśnie zostaną zupełnie zniszczone i znowu utworzone.

5:53Następnym razem kiedy zmienimy tutaj Falls na true jeśli korzystasz często z

5:59plakatów No to widzisz jest to troszeczkę pisania dlatego Chandler oferuje także

6:04drugi skrócony zapis mianowicie zamiast tworzyć osobno ręcznie będzie ten Plate.

6:10Jeśli chciałbyś po prostu

6:11ukryć jakiś element HTML jakiś komponent jakąś grupę komponentów

6:15to zamiast podać End Plate możemy uratować taki element na ten.

6:21Używając po prostu do tego tutaj gwiazdki

6:24i paska sprawi iż za nas po prostu o to czy ten element właśnie tam plagiatem

6:30i możemy w Anglii od razu zapisać przy 2 st.

6:32C.

6:33Tutaj w tym miejscu nie musimy już nawet słów kwadratowych od

6:37razu możemy podać warunek którego chcemy użyć czyli ekstra.

6:42Analogiczne działa to w ten sam sposób jak ten tablet ale jak widzisz jest mniej

6:46pisania jak pozwala kilka dodatkowych opcji jest bardziej rozszerzony.

6:53Natomiast do codziennego użytku.

6:54Jak widzisz ta opcja gwiazdka GIF na

6:57elemencie pozwala dużo łatwiej z tego korzystać.

7:00Pamiętaj jednak żeby nie zapomnieć o tych

7:01gwiazd C bez gwiazdki nie ma wtedy szablonu.

7:05Jeśli spróbuje użyć po prostu Anglików

7:07w ten sposób no to zobaczymy błąd że właśnie widzisz.

7:11Nie ma dostawcy.

7:13Latem czyli on nie może zlokalizować szablonu.

7:16Dzisiaj taki błąd gdziekolwiek nie ma dostawcy.

7:19Temperaturę no to znaczy że używasz gdzieś jakieś

7:23dyrektywy która wymaga Templeton a nie ma tam lata.

7:27Najprościej dodać po prostu oznaczający dyrektywę gwiazdką.

7:31Oznacza ona po prostu że oto ten element w Temple.

7:33Stwórz ten plakat.

7:35Oznacza to miejsce jako kontener żeby

7:37wiadomo było w którym miejscu otworzyć elementy z szablonu.

7:42Czyli te elementy oba pozyska i obserwując tą zmienną read more.

7:46Przy każdym część detektorów przy każdym

7:48wykrywaniu zmian na stronie będzie taki element dodawał usuwał tworzą niszczył.

7:54Pamiętaj też że wszystkie wartości które chcesz przeżyły jakby pokazywania nie

7:59musisz jakoś zbudować do zmiennych w komponent nadrzędny.

8:03Jeśli tego nie zrobisz to Angola po prostu

8:05zniszczy ten HTML wraz z wszystkimi komponentu ami.

8:08Co ta może nie jest złą rzeczą dlatego że

8:11tworzymy 20 30 komponentów i że ich nie potrzebujemy bo po prostu otaczające je

8:15GIF i niszcząc je z pieniędzy na FOZZ tutaj w FOZZ możemy bardzo łatwo pozbyć

8:21się wszystkich niepotrzebnych elementów żeby niepotrzebnie nie spowalnia nam

8:25aplikacji i nie zajmowały miejsca na stronie.