Angular: Biblioteki DOM w komponentach

Angular 10+

0:00O ile Englert pozwala nam robić różne

0:02bardzo fajne rzeczy nie zawsze jest sens samemu pisać cały kod.

0:08Istnieje masa różnych bibliotek część tej

0:10biblioteki jest w specjalnych wersjach klarownej natomiast masa różnych bibliotek

0:15istnieje które po prostu pracują bezpośrednio na Krypcie na HTML u.

0:20Nie są za bardzo przystosowane do pracy.

0:23W tej lekcji spróbujemy zastosować

0:25bibliotekę do animowana liczb i pakuje ją w ogóle.

0:29Zobaczymy jak to można zrobić.

0:32Czy mam jakieś takie liczniki.

0:34Dane wyglądają OK ale

0:37ja bym chciał dać taki efekt żeby te liczby się animowany powiedzmy w

0:41ten sposób znalazły gdzieś sobie bibliotekę kodu metr.

0:45Zobaczmy dokumentację tą bibliotekę możemy zainstalować czyli międzyczasie.

0:51Jak oglądam dokumentację zrobię n.p.m.

0:54Instal do biblioteki

1:00niech ona się instaluje w naszym projekcie i w tym czasie spojrzał dokumentację.

1:04Jak widzisz tutaj żeby zacząć pracę

1:06my musimy znaleźć po prostu elementy na stronie skryptu lub gwary utworzyć metr

1:14i wskazać go w którym miejscu chcemy naszą animację dodać i wyświetlić.

1:19Jeśli chcemy

1:21zmienić tą wartość animowanych mogą różne funkcje wykonać mogę np.

1:25zaktualizować.

1:26Czyli w ten sposób działa większość bibliotek trzeba z kredytowych

1:29że musimy utworzyć jakiś obiekt jakąś funkcję wykonać wskazać jakiś element

1:33i manipulując tym obiektem manipuluje tym co się dzieje na ekranie.

1:38To jest projekt klerem.

1:40Jest troszeczkę inaczej

1:41wygląda ten plan nie mamy szablonu i mamy wylądować więc pytanie jak możemy takie

1:45coś połączyć z angola czyli pierwsze że tutaj

1:51to zainstalowano bibliotekę metr i teraz chciałbym użyć biblioteki

1:56ale tam złoży się globalnie czy też po prostu byle gdzie.

1:59Ja postaram się tą bibliotekę pakować w komponent żebyśmy mogli w łatwy sposób

2:03później wielokrotnie korzystać z tej biblioteki.

2:06Czyli wygeneruje dodatkowy komponent.

2:10Nazwa może po prostu Counter czyli licznik

2:13i umieszcza tak użyje może po prostu wewnątrz komponentu czy otworzyć jakiś

2:19komponent i spróbuje za importować

2:22nasz ten metal zrobić import do mety.

2:30I mamy taki problem że pierwszy problem to jest to że TK np.

2:35nie może nie mieć typów czyli nie ma typu nie mieli żadnych podpowiedzi.

2:40Zawsze spróbować zainstalować pakiet np. coś takiego.

2:44Intel Instal Meteor czy możesz zobaczyć czy istnieje

2:47dodatkowa paczka która zawiera typy lipcowe żeby były podpowiedzi.

2:52Tutaj niestety nie mamy takiej nie mamy takiej paczki z typami.

2:57Czyli jest to w ogóle całkowicie Java skrypty biblioteka.

3:00Nie mamy tutaj żadnych informacji nie mamy żadnej podpowiedzi.

3:05Więc ja spróbuję po prostu wszystko z tej

3:06paczki wyciągnąć jako zmienna o metr

3:13i teraz próbując używać zmiennej muszę niestety prowadzenia dokumentacji tej nie

3:17będzie mi za bardzo podpowiadał co z tym zrobić.

3:21Czyli teraz tak powiedzmy mamy konstruktor mamy agonii nikt nie może w tej metodzie

3:26postaram się odtworzyć tak jak było to w dokumentacji nowe a do mety.

3:31PS Jest problem muszę wskazać element na którym chcemy umieścić ten cały metal

3:39więc gotowe komentuje zobaczymy w ogóle czy aplikacja działa

3:43Centrum jeszcze gdzieś na stronie czyli powiedzmy gdzie mamy te nasze liczby.

3:49W ten sposób to ja sobie wezmę taki jeden element HTML.

3:56Zamieni go na Counter.

4:00W ten sposób przepraszam są jakieś parametry czyli np.

4:05liczbę i etykietę czyli to będzie po festiwalu.

4:14I niech jeszcze będzie label etykieta.

4:20Jak pamiętam tutaj mogę dać sobie te

4:21parametry czyli wiesz możemy służyć nam należy przekazać to komponentu a komponent

4:27będzie musiał te parametry przykładać się jakoś do biblioteki

4:30w której chce naruszyć czyli wartość na początku 0 impuls dla Lewego

4:38etykietę To będzie tekst ok i teraz Counter HTML mogę użyć Gwatemala.

4:47I tu mogę położyć naszych danych czyli

4:49Walią i mogę określić tutaj liczbę czyli lud widzi że tam jest dynamiczny

4:56super bede mógł wielokrotnie tego samego używać będę mógł ostrzeliwać jakieś dane

5:00pytanie tylko co z naszą biblioteką zobaczymy naszą aplikację tutaj świeże.

5:08Już widzę że na razie żadnych błędów nie ma nic się nie dzieje czyli zobaczymy.

5:13Muszę mieć referencje do elementu mógł zrobić to w ten sposób czyli mógł po

5:19prostu dać mu jakąś klasę i wyszukać te elementy.

5:25Jest tylko jeden mały problem

5:27mianowicie jeśli już jakieś klasy powiedzmy sobie to counter

5:32i będę chciał zlokalizować ten element na stronie używając tej klasy Counter

5:37wszystko świetnie i mam tylko jeden komponent.

5:40Co się stanie jeśli ja kilka komponentów i na stronie znajdzie

5:45się w ten sposób kilka razy ta sama klasa różnych komponentów.

5:50Nie chciałbym żeby jeden komponent w żaden sposób jakby inni ingerował w stan innych

5:55komponentów żeby Komponent 1 zmieniał stan innego komponentu.

6:01Jak to zrobić jak mogę zlokalizować jakiś

6:04element który znajduje się tylko dokładnie lokalnie wewnątrz naszego komponentu.

6:10Tak ponieważ możemy do oznaczania elementów użyć tzw.

6:14lokalnych referencji czyli mogę sobie

6:15zrobić przykład Enter LM ref czyli zrobić jakąś lokalną nazwę lokalu referencje.

6:23Problem jest taki że lokalne referencje ona nie jest dostępna tutaj jeszcze w

6:26krypcie po prostu my musimy już stąd wydobyć żeby coś takiego elementu

6:31mógł sobie stworzyć tutaj ręcznie zmienną ale to za mało.

6:34Jeśli ja chce element ref referencje do

6:37tego elementu to muszę dodatkowo oznaczyć to jako czwarte dziecko w widoku czyli

6:44muszę zaznaczyć że szukam elementu o takiej nazwie

6:49i chcę być o ten typ czyli chcę wyciąć element HTML

6:54typu komponent albo szablon albo inny element wysunąć np.

6:58referencje do komponentu aby referencje do

7:00lata do innego elementu na wersję faktycznie fizycznie.

7:04Element ten zobaczymy tutaj jeszcze do gier.

7:09Przejdziemy do przeglądarki i zobaczymy co to się dzieje.

7:13Zatrzymamy się w tym miejscu i zobaczmy co kryje się w naszym komplecie

7:19Ibis pod zmienną Counter LM czyli bez Counter element.

7:26Niestety jest to Android i teraz dlaczego

7:28dlatego że komponent się utworzył już ale elementy tutaj nie zdążyły się jeszcze

7:35jakby zaczekać wyemigrować musimy poczekać jeszcze.

7:37Czyli konstruktor to jest za wcześnie.

7:39Dopiero klasa się utworzyła będzie mini za wcześnie.

7:42Mam dopiero wartości impulsów

7:45czyli mamy nasz zwalił już slabo ale jeszcze HTML nie jest

7:51gotowy i jeszcze te elementy się nam tutaj nie podłączył jakby do HTML a do stron.

7:58Drugą kolejną metodę jest to change after

8:04the Night tak czasem poczekać aż cały HTML będzie już gotowy pod pętlę.

8:10Wszystkie elementy referencje komponenty są zamontowane.

8:13Dopiero wtedy będę chciał się odwołać do

8:16tego elementu jak już na pewno istnieje i to jest już nie wiem może być tego tutaj

8:21globalnego wyszukiwania tylko odwołać się do Counter LM.

8:26Spróbujmy jeszcze raz.

8:29Jesteśmy troszeczkę później i nie widzisz tamte elementy.

8:34Jest obiektem element

8:36który w środku zawiera referencje do naszego Diva tu będzie negatyw element.

8:41To jest nasz Thief czyli ten nasz element.

8:43Możemy przekazać teraz do naszego metra

8:48żeby nam anonimowo ten element zobaczmy 80 czy coś poszło nie tak.

8:55Więc ja spróbuję jeszcze jedną rzecz

8:57zapisze sobie gorset Enter i postawimy tutaj jakąś wartość czyli update ds.

9:06Walii.

9:10Coś się popsuło.

9:11Prawdopodobnie brakuje nam jakichś CSS ów dołączę globalnie może do wszystkich

9:17naszych steli i dołączę także skórkę do metra żeby te nasze liczby się

9:24troszkę nie rozjeżdżają żeby one były ładnie wyświetlane czyli te przygotowane.

9:30Domyślam jakąś skórkę czyli dołączy jakiś domyślne tyle że do

9:34metra i jak widzisz teraz się świetnie animacje.

9:40Jest OK.

9:41Musi jednak uważać będą antybiotyki które właśnie nie są przygotowane do Prezesa RM

9:47nie są stworzone jako moduły nie mają typów itd.

9:50To mogą być pewne problemy przy kompilacji.

9:53Jeśli spróbuje jeszcze raz projekt może uruchomić i skomplikować.

9:57Zobaczmy też czy nie będzie żadnych

9:59problemów przy budowaniu kombinowanie naszego projektu bo te biblioteki stare

10:04drzewa sklepowe bez modułów bez typów czasami stanowią problem przy

10:10optymalizacji przy budowaniu tutaj naszego komputera.

10:15Jak widzisz pojawia się taki problem

10:17Morning że niektóre biblioteki jeśli nie są modelami mogą powodować optymalizację

10:24Englert nie jest w stanie analizować co w tym jest modułu który nie posiada tych

10:28wszystkich informacji które on potrzebuje do optymalizacji.

10:32Nie znam struktury tego pliku nie jest go zoptymalizować.

10:36Mam taki ułamek przejść na jasną stronę poczytać więcej na ten temat.

10:40Ja pokażę tutaj Dawson to damy sobie taką opcję specjalną ale on jest panem.

10:49Czyli pozwalamy na importowanych modułów które nie są do końca kompatybilne.

10:54Jeśli spróbuje to zrobić jeszcze raz to powinien teraz już akceptować bibliotekę.

11:01Czułem że PM rozumiem że jest to stara biblioteka.

11:04Czy ona może być kompatybilna.

11:06Więc można to zrobić w ten sposób aczkolwiek zawsze warto rozejrzeć się czy

11:10nie ma od razu już biblioteki klarownej czy ktoś prostu już za nas nie poświęcił

11:16tego wysiłku w stworzenie właśnie takiego komponentu opracowanego za nas.

11:23Czyli się kombinuje

11:24jak odświeżyć stronę widzisz te liczby się elegancko a nie moją.