Angular: Łączenie dyrektyw i intersekcja DOM
od Podstaw
6 godz. 45 min · Angular · Full-stack i Programowanie
Mateusz KuleszaSenior Software Developer, Konsultant, TrenerCzego się nauczysz
- Kompletne podstawy Angular
- Ciekawe, praktyczne projekty
- Budowanie własnego Portfolio
- Bardziej zaawansowane koncepcje
- Formularze i REST API
- I wiele więcej!
Dynamiczny HTML i CSS
Pierwsze dwa działy kursu są idealne dla osób które rozpoczynają swoją przygodę z Angularem i stanowią wprowadzenie do frameworka. Zaczynamy od prostych przykładów, gdzie budujemy formularz zapisu na newsletter. Jest to przykład pozornie prosty, ale dzięki łatwości z jaką Angular wprowadza dynamizm, manipulacje wyglądem a nawet animacje wcale taki nie będzie. Zobaczysz, że nawet prosty przykład możemy zamienić w interaktywny, dynamiczny interfejs, który wciągnie użytkownika!
Zbuduj Portfolio razem z kursem
W kolejnych sekcjach kursu nie robimy prostych ćwiczeń, ale krok po kroku budujemy prawdziwy projekt. Jeśli marzyło Ci się stworzenie i opubliklowanie eleganckiej strony WWW lub aplikacji z Twoim CV oraz listą projektów, to nie musisz marzyć dalej. Możesz podążać krok po kroku i z każdą lekcją budować własną stronę portfolio. Będziesz zaskoczony, że z podstawową znajomością JavaScript, HTML i CSS zaczniesz błyskawicznie tworzyć złożone eleganckie i interaktywne interfejsy użytkownika.
Produktywność i błyskawiczne tworzenie aplikacji
W kursie stawiam na produktywność. Koniec że żmudnym klepaniem setek lini HTML i CSS, koniec z zawiłym kodem jQuery. Wykorzystując bibliotekę Bootstrap i modyfikując gotowe elementy HTML możemy skupić się na tym co najważniejsze. Zobaczysz jak wykorzystać interpolacje i wiązania by struktura HTML i CSS zmieniała się sama po każdej akcji użytkownika. Dzięki poprawnemu użyciu mechanizmów Angulara, mozolna praca z DOM, którą znasz np. z jQuery staje się zbędna. Angular renderuje interfejs za Ciebie - prosto z danych które umieścisz w komponentach.
Formularze i komunikacja z REST API
Już w pierwszych sekcjach kursu dowiesz się jak wykorzystać moduł formularzy w praktyce, by tworzyć automatyczne dynamicznie generowany formularze i pobierać z nich dane. Dowiesz się także jak znając wyłącznie podstawy JavaScript połączyć naszą stronę portfolio z serwerem i pobrać pliki JSON, w tym nasze projekty, opisy i zdjęcia ze zdalnego serwera!
Jak działa Angular? Wykrywanie zmian i optymalizacje
Podczas pracy nad Twoim portfolio nie tylko poznasz podstawy pracy z angularem, ale w kilku lekcjach zagłębimy się na chwilę w samo działanie Angulara. O ile jest to wiedza zaawansowana, tak znajomość mechanizmów wykrywania zmian już na samym początku pracy z Angularem da Ci lepsze zrozumienie tego narzędzia i pozwoli pisać kod który będzie nie tylko prosty i czytelny ale też będzie działał błyskawicznie. W tym kursie nie tylko pokazuje jak czegoś użyć, ale kiedy, dlaczego oraz jak to działa od środka. Nawet jeśli Angular nie jest dla Ciebie nowością - ten kurs da Ci głębsze zrozumienie jego koncepcji.
Dla kogo jest ten kurs?
Ten kurs przygotowałem dla osób początkujących w Angularze, ale w taki sposób by mógł on służyć także do powtórzenia, uporządkowania wiedzy czy uzupełnieniu braków dla osób które pracowały już z Angularem. Jeśli jesteś front-end developerem, ale jeszcze nie miałeś okazji zapoznać się z Angular, lub chcesz uzupełnić szczątkową wiedzę o fundamenty - to jest kurs dla Ciebie! Dodatkowo, jeśli zaczynasz przygodę z front-end ale masz już podstawy HTML i JavaScript, to kolejny ważny krok na Twojej drodze do kariery!
Angular 10+
Poprzedniej lekcji daliśmy tutaj specjalne
dyrektywy które pozwalały przyjąć różne parametry i skonfigurować np.
dodawanie animacji do elementów na stronie i wszystko jest świetnie chyba że np.
użytkownik powiedzmy znajduje się w tym
miejscu przeczyta górę i przeminie niżej i jak widzisz efekty zupełnie nie ma bo
użytkownik po prostu go przegapił żeby to za późno.
Więc teraz co chcielibyśmy zrobić.
Chciałbym mieć coś takiego że jeśli użytkownik tutaj dojedzie do tego miejsca
to miejsce będzie widoczne na ekranie żeby dopiero w tym momencie aktywować animację
czy nie po opóźnieniu tylko jako taki właśnie wyzwalać.
Wierzymy w to miejsce
zmuszał na różne sposoby co zrobić takim szybkim prostym czy też nowoczesnym
sposobem jest wykorzystywanie Interest Section Observer jest to specjalne API
wbudowane w przeglądarkę dzięki którym możemy oznaczyć jakiś np.
obszar rodzica powiedzmy np.
boty czy cały ekran określić sobie jakiś margines jakiś próg
wejścia czyli jaka część elementu ile procent elementu musi być na ekranie
żeby tutaj nas powiadomić Kubacki specjalnym że właśnie w to miejsce
weszliśmy w tym miejscu użytkownik widzi powiedzmy 100 proc.
albo 20 proc.
naszego elementu.
Teraz tak mógłbym modyfikować naszą dyrektywę którą już mamy
ale tak informacja o tym że użytkownik jest w konkretnym miejscu mógł ją
wykorzystać do innych rzeczy takich jak np.
powiedzmy paski animowane.
Może ta licznik też aktywować dopiero skończonej dojedzie itd.
Tak czy możemy w różnych miejscach sytuacjach potrzebować informacji
o tym czy użytkownik już się znajduje w tym miejscu.
Dlatego kolejną dyrektywę i tę dyrektywę
ma się właśnie wyłączyć sprawdzaniem czy jesteśmy już w tym miejscu czy element
jest widoczny na stronie czy znowu otworzy sobie terminal engine
generator dyrektyw czy ideę w katalogu dyrektyw utworzy dyrektywę
którą nazwę on wysyłał czyli kiedy element jest widoczny
czyli specjalny atrybut który sprawdzi które mogły przybyć elementu
i powiadomić czy ten element go przyjąłem jest widoczna czy przy tego trzeba będzie
znowu szukać gdzieś na stronie po jakimś idei tylko po prostu mogę przyczepić taką
dyrektywę w miejscu w którym jej potrzebuje.
Czyli otworzy sobie tą dyrektywę tutaj bo z boku i zobaczmy teraz nasz interes.
Observer PP czyli może tak utworzyć interesach Observer tutaj powiedzmy NG.
żeby zrobić to później możemy poczekać aż
wszystko będzie wygenerowane czyli engine After Midnight czyli poczekam aż
faktycznie HTML na pewno będzie gotowy i wtedy dopiero będziemy przypominać
wersję czym Observer czy utworze New Winter Section Observer.
Tutaj mamy kolba.
Mamy jakieś wyniki w ten sposób
i epizod to jest tablica czyli mamy jeden Observer i możemy wiele
innych elementów obserwować jednym serwerem zrobić Foreign
czyli dla każdego elementu dla każdego rezultatu
wykonamy ten kod i może na razie po prostu konsolowe
rezultaty i zobaczymy co tam się kryje w konsoli.
Kiedy ten element uruchomimy
testach intelektu obserwuje się co chcieliby zapisać czyli powiedzmy sobie
przypisane do zmiennej Observer typ żeby mi podpowiadał co to jest.
I piszę tutaj do tej zmiennej w ten sposób.
I teraz gdy mamy to uruchomione to nad ma
wskazać jakiś element który chcemy obserwować.
Czasami też słyszymy Observer tutaj
jeszcze możemy mu parametry podać szczegóły wskazać
powiedzmy że ma obserwować względem powiedzmy dokument
dokument Body ale jest to domyślne nic z tego nie muszę podawać.
Możemy też próg podać Reinhold czyli że element musi być w 100 proc.
czyli jeden 100 proc.
w całości musi być widoczny.
I teraz jeśli mam taki Observer
się uzyskać element element który wskazać będzie to wskazywała nasza dyrektywa.
Czy jeśli chciałbym żeby konkretny element był widoczny czyli powiedzmy
sobie troszeczkę niżej tutaj powiedzmy to w tym miejscu
chciałem żeby ten element pojawił się dopiero
kiedy będzie widać lub poinformował nas czy ten element jest widoczny.
Teraz jeśli pamiętasz przypomnę dyrektywę
to ta dyrektywa ma dostęp do tego elementu nie musimy go szukać musimy dać mit.
Możemy po prostu poprosić Abdullaha.
Element ref muszą też podać czy to jest prawda bowiem będzie to element HTML.
Nie jestem pewien.
Załóżmy że będzie to zawsze Onet HTML
V2 albo jakiś inny element na stronie czyli LM.
I teraz tutaj dodam Observer.
Observer czyli obserwuje nasz KLM Native element zaś jak tworzymy
jakieś tego typu operacje na przeglądarce jakimś API to zawsze dobrą praktyką
jest posprzątać po sobie czyli zrobił się dysk.
Observer To jest Connect dzięki czemu unikniemy sytuacji w których np.
komponent dyrektywy został już dawno zniszczonych.
Nie ma na stronie a tam jeszcze jakiś Observer próbuje coś obserwować.
Polecam to by się zatrzymać sprawdzić poprzednie dyrektywy np.
dyrektywę z naszym kontem
i zobaczyć tam czy nie zostawiliśmy jakich właśnie internautów czy tematów.
Jeśli tak no to spróbuj uzyskać Chandler i w On the strong posprzątać.
Możesz poznać kod źródłowy z tym
przykładem w tej lekcji i zobaczyć czy prawidłowo udało ci się właśnie posprzątać
podpisać wszystkie rzeczy w poprzedniej dyrektywie.
Ok przy testujemy zobaczmy jak to działa.
Przyjdź na stronę.
I mam jakieś interesy Section Observer
Entry jeśli przywilejem stronę jak widzisz tutaj wyjechałem poza ten
element pojawia się event i z powrotem jeśli Wade się cały pojawi.
Jeśli nie są cały widoczny część jest
zakryte a parę procent zdobi i ten event informują nas właśnie jak to wygląda.
Nie tylko nam mówić czy element jest widoczny nie tylko czy właśnie chociaż
częściowo się tutaj nie zahaczył czy pokrywa się element z naszym
Body lub z innym elementem od którego chcemy się odwołać i mamy dodatkową
informację mam co to za element czas mamy Banks i Bank y.
Czy mam dokładnie informacje o ile.
Ile pikseli z każdej strony.
Ten element np.
tu się pojawił lub nie.
Czy w temacie On jest niewidoczny bo jest
kawałek zakryte jeszcze w stu procentach jest widoczny.
To się zmieni i interesy filtru.
Możemy też gdybyśmy chcieli pobrać dokładne informacje ile procent ile
pikseli jest to właśnie wysunięte to na takie szczegółowe informacje
interesy nie interesują mnie ta informacja czy interesy.
Im bardziej się to zmienia się kierunek
przesuwamy element zmień tutaj resort na horyzont
i z interesem think czyli troszkę bardziej precyzyjnie.
I teraz widzę jest to widoczne.
Nie jest widoczny jest widoczny nie jest widoczny jest dokładnie informuje.
Jeśli próg troszeczkę zmniejszymy czy zrobimy to zero.
Kropka powiedzmy pół.
No to teraz.
Jeśli chociaż połowa elementu jest widoczna też nas informuje to super ok.
Czyżby nasz próg nasz element i teraz
zamiast konsolidować informacje jakoś wykorzystać.
Chciałbym użyć do tego angola ARA czyli jeśli jest to trup.
Jeśli to prawda to chciałbym jakoś znacznie lepiej
zbudować mu klasę CSS czyli powiedzmy jeśli jest to odpowiednie
elementy jeszcze sprawdzę by było ich tu więcej tutaj byśmy
obserwowali wiele więcej elementów to sprawdzę np.
czy bez LM Native element to jest ten sam element co horyzont.
Target pewny to jest ten sam element
jeśli nie jest to nas to nie interesuje niech inny to obsłuży.
Następnie chce sprawdzić czy jest to widoczne czyli powiedzmy żeby sobie This
Is Bible i w ustawie czy mamy taktyk czy litrów os.
W ten sposób tę właściwość i wizy.
I tu już mam klerowi płacić.
Co z tą informacją możemy zrobić. Np.
mogę sobie ustawić choćby cennik jak
pamiętasz i ustawić powiedzmy że ma klasę CSS ową np.
klasę is OK.
Zobaczmy teraz jak to zadziała.
Tym razem nie mam konsoli tylko mam klasę CSS.
Czyli zobaczymy. I z wyboru wyjadę troszeczkę do tyłu to
znika znowu pojawia się tak i mam próg 50 więc musi być to przynajmniej 50 proc.
żeby ta klasa się pojawiła.
Nie musi być 100 proc.
Tak tu jest próg tak próg jest OK.
To jest mały problem
jeśli ja chce wykorzystać tę informację na potrzeby animacji uruchomić ktoś ktoś
szybko przewija to ta animacja nam się nie zdąży skończyć i tak sam zniknie przerwie
animacje w trakcie przewijania jeśli ktoś się cofnie więc możemy dodatkowo np.
. Dodam jeszcze jedną flagę nazwę ją nie
tylko nazwę ją może WOS SBU czyli było widoczne chociaż raz czy mogę wystawić
drugą klasę która nie pojawia się zniknęła tylko która zostanie w tym miejscu.
Jeśli chociaż raz element był widoczny
czyli robi to w ten sposób że tutaj jest wyzywał.
Gustaw nad ru jeśli interesy think lub jej się wcześniej już był izbą
to wykorzystać tę wcześniejszą wartość czyli chociaż raz on będzie miał wartość.
No to zapamięta i nie będzie już brał cały czas tą wartość.
Zobaczmy teraz odświeżyć stronę i jest
u nas jak jadę to góry to kasa wybór znika ale klasa bo tu już została.
Teraz możemy z informacji skorzystać i jeśli chciałbym to w animacji to pierwszym
pomysłem który przychodzi do głowy jest prostu zmodyfikować np.
te style żeby nie tylko reagowały na klasę animator ale także jeśli powiedzmy
to dałbym tą drugą naszą klasę czyli klasę WOS w języku.
To także żeby to postulują reanimować.
Teraz spróbuję teraz dodać to gdzieś gdzie mieliśmy już animację.
Czy to jest ten.
Nie chciałbym żeby to animacje się
natychmiast uruchamiana więc dalej na powiedzmy minus 1
i tu modyfikuje tylko troszeczkę że jeśli to jest lepiej nie równa się minus 1 czyli
chcemy na chwilkę wyłączyć to opóźnienie to animacje.
Będę chciał teraz żeby to drugie
spowodowało dodanie klasy tutaj jest ryzyko.
Zobaczymy jak to zadziała.
Wrócę do góry.
Otworzymy stronę jadę w dół
i tu gdzieś coś dziwnego zobacz że elementem się w ogóle nie pojawia.
Ten drugi jakoś dziwnie dziwnie wskoczył
ale pierwszym się w ogóle w ogóle nie pojawia.
Problem polega na tym że ja nie jestem w stanie jakby sprawdzać
czy element jakby jest widoczny kiedy go jeszcze nie ma kiedy jest niewidoczny.
Tak tak czy on dopiero ma wjechać na
chwilę więc nie mogę sprawdzić czy jest widoczny.
Musiałbym to informacje czy jest widoczne
powiedzmy zamontować gdzieś troszeczkę wyżej czy powiedzmy jeśli
ten nagłówek jest widoczny albo ten element jest widoczny
to wtedy wykonać animację tutaj jak pojawia się problem bo teraz te dwie
dyrektywy one znajdują się na zupełnie innych elementach.
One nie są tym samym elemencie więc teraz pytanie jak chcemy czasami
zrobić krzem albo kombinować tutaj z klasami że jeśli rodzic zawiera klasę to
wtedy dziecko nie chce wprowadzać takiej zależności w CSS.
Chciałbym żeby te dwie dyrektywy jakoś się
ze sobą skomplikowały żeby jedna mogła powiedzieć drugiej że coś ma zrobić.
Czyli jeśli chciałbym wiedzieć kiedy ta
widoczność się zmienia to mogę posłów tej dyrektywie zakaźne są
tutaj mamy zmianę widoczności pojęć na przykład bilety ciągłe.
Stworzyć sobie taką własną wizję Change i
oznaczyć ją jako out loud czyli tak samo jak komponenty mogą emitować zdarzenia do
rodzica tak samo dyrektywy też mogą imitować zdarzenia musi tylko to być
event Emitel czy specjalny obiekt który pozwala emitować zdarzenia
i to klik w sobie po prostu mit i mogę to rodzica przekazać informację czy
jest to widoczne akurat teraz czy jest to niewidoczne.
I teraz każdy komponent który używa tej
dyrektywy może się zasób skrytykować na takie zdarzenie.
Internet będzie zawierał informacje czy się stało to widoczne czy nie.
I teraz chciałem to informacje czy
widoczne czy nie chciał mi jakoś przekazać do drugiej dyrektywy kiedyś chcemy rodzica
HTML a dostać się do jakiejś innej dyrektywy to trzeba tą
dyrektywę udostępnić także czyli przekazuje dane im put out put.
W ten sposób możemy animatora zrobić także import.
Jest to jeden sposób albo mogę cały ten obiekt wystawić rodzicowi poprzez eksport.
AS Jeśli eksport as robię to w ten sposób może już tej samej nazwy
to teraz fajna rzecz bo mogę dodać lokalną referencje czy np.
. Np.
co to co robię tak momentu menu to mapę całego drzewa elementy.
Ale jeśli robi to w ten sposób
iż mogę dostać się do dyrektywy korzystając z tej nazwy tutaj znajdę.
Mogę na tym skorzystać.
Teraz pod tym menu pod tą zmienną kryje się referencje
nie do elementu GIF tylko kryje się referencje do tej całej klasy.
Czy jeszcze zobaczymy w środku co się znajduje.
Slide in.
Tak musi być najpierw kropka.
Jak widzisz wszystkie funkcje wszystkie
właściwości po prawej mam do nich dostep z HTML czy możesz tu
wykonać te metody przypisać wartość czy liczbie.
To w ten sposób że za każdym razem jak
to się stanie to ja chcę zmienić wykonać funkcję zmienić np.
animator czyli.
Odwołał się do I ustawy animator.
Nie chcemy wyłączać animacji tym tylko raz
włączyć teraz ten invisible hand on też na początku raz się wykona
i powie nam że jest Folc na początku czyli ja zapewne jeszcze tutaj czy to bilety.
Trevor Fox sprawdzę czy na pewno jest.
I tylko jeśli jest tylko wtedy przepis ten animator czyli tylko wykonał
go jeśli faktycznie element jest faktycznie widoczny i też pamiętasz.
Możemy też ustawić czy mógłby też ktoś
dodatkową opcję import z rogu widoczności postawić przed
domyślnie na 0 0 kropka 7 czyli 75 cm lub widoczna bo 30 proc.
. I zrobić by to było nad wpisywane.
Czyli tutaj ktoś poda inny impuls innym.
To ten próg możemy też sobie tutaj ustawić na inny lot na powiedzmy ok.
Zobaczymy jak to zadziała.
Do góry odświeża stronę i teraz jeśli przecina niżej.
Totalne widzisz wjeżdża na stronę dopiero wtedy kiedy użytkownik go widzi.
A właściwie kiedy użytkownik widzi inny element przed nim jego rodzice bo
ciężko jest stwierdzić czy element jest widoczny czy nie.
Kiedy jeszcze go nie ma więc sprawdzamy czy rodzic jest widoczny.
Jeśli rodzic jest widoczny powiada mamy tutaj poprzez referencje.
Ten drugi element
czy jak widzisz jest dużo komplikacji tutaj ale te mechanizmy możemy także użyć
do komunikowania się pomiędzy różnymi elementami.
Czy mogę je nawet obserwować słuchać jakiś zdarzeń.
Czy masz jakieś dane i te dane mogę przypisać gdzieś indziej.
Ref. Ten nasz eksport as mógł także użyć tutaj
czyli eksport as bo w ten sposób
mógł to informacje wykorzystać gdzieś indziej czyli powiedzmy zamiast eventów
powiedzmy w tym miejscu a on wyzywał odwołał się do tego poprzez referencje.
Się to.
Teraz mogę tej referencji użyć żeby te wartości np.
też były dynamiczne żeby też był animowany.
Czyli tutaj tutaj i tutaj sprawdzimy że tylko jeśli było widoczne to 0 odwrotnie.
Jeśli nie to 25 czyli trzeba troszkę
kombinować żeby dojść do właściwego miejsca.
No właśnie teraz jak tylko się widoczne paski się rozwiną na myśl użytkownik
powiedzmy zacznie od tej części strony i będzie przebijał w drugą stronę.
Te wszystkie animacje pojawiają się
dopiero kiedy użytkownik przeważnie do danej części strony.
Czyli jak widzisz odpowiednie dyrektywy które dają nam różne
informacje mogą one modyfikować element bezpośrednio.
Możemy z tych dyrektyw wyciągnąć jakieś
informacje i informacje ułożyć w HTML u rodziców na różne sposoby.
Jednak czasem to się może skomplikować mamy bardzo dużo
różnych opcji więc pokażę tobie jeszcze jeden sposób.
W ten sposób jest bardzo fajnie.
Mamy bardzo konfigurację dyrektywy zupełnie nic o sobie nie wiedzą.
Możemy wyłącznie na różne sposoby z różnymi rzeczami.
No ale z drugiej strony wada jest taka że musimy je ręcznie powiedzieć która
tak byśmy powiedzieli by Pierwsza Dyrektywa powiedziała drugiej musimy dać
im nazwy więc jest to troszkę pracy więc jest to jeden sposób i ja to może na
chwilkę sobie tutaj po prostu komentuje żebyśmy mieli dla porównania
jeśli nie chcemy każda z tych dyrektyw wspinać ze sobą tutaj ręcznie być jednej.
Co ma zrobić drugą.
To możemy tylko połączyć automatycznie
żeby jedna automatycznie starała się komunikować odnaleźć drugą dyrektywę i
połączyć się zacząć rozmawiać automatycznie.
Czyli chciałam zrobić że
w ten sposób chciałam żeby tego wszystkiego nie musiał ustawiać.
Chciał tylko dać tutaj dyrektywę bo chciałam tego wszystkiego nie musieć
ustawiać chciałam tylko dać mu drugą dyrektywę i teraz ta dyrektywa chciałam
żeby automatycznie rozmawiała z tym jak możemy to zrobić jeśli ta dyrektywa
znajduje się na tym samym elemencie czy powiedzmy znajdują się one w tym samym
miejscu lub ta dyrektywa znajduje się gdzieś poziom wyżej np.
tutaj albo tutaj to ta dyrektywa AP Split in czyli ta w środku karta zagrożona.
Pamiętasz mogliśmy sobie pobrać referencje do elementu.
Czy mogę podać element na którym się
znajduje ale może także taśmach tutaj wyciągnęliśmy ze środka różne obiekty.
To że ta dyrektywa może ze swojego elementu lub z innych elementów
wyżej próbować odszukać jakiś element czyli powiedzmy wyszukać sobie w języku
i po prostu podam nazwę tej drugiej dyrektywy.
Jej typ i w ten sam sposób jaki lokalizację ma
największy element HTML w ten sam sposób możemy spróbować zlokalizować
najbliższą dyrektywę i teraz zobaczmy czy mógł się tego dostać czy wyzywał.
Tutaj jeśli jest wybór to chcemy zawsze czyli nie lub tego minus jeden.
Nie chcemy tego robić tylko sprawdzę tak że jeśli jest wyzywał.
Jeśli mamy z rezerwą to tutaj podobne Change.
Tu się zasób spróbuje czy powiadomił o zmianach i chce poczekać na wybory.
I jeśli.
Czy jeśli jest widoczny i nie było wcześniej animowany już
to wtedy anime w ten sposób zobaczymy jak to zadziała.
To jest kapłan wyboru slide in left w zakładce łata i.
OK. Działa spróbujmy jeszcze raz.
Wjechać do tego miejsca za chwilkę czyli
nie po sekundzie po dwóch tylko to Polak użytkownik wjedzie.
Jak widzisz ładnie.
A do tego jest jeszcze przywilej
uwzględniony czyli tu dodał dalej z ironią.
0 lub jeszcze prościej nie muszę podawać za każdym razem jeśli mamy coś takiego
no to wtedy możemy ustawić też bilans 0 czyli mamy naszą klasę i to robimy dalej.
Problem może się pojawić kiedy nie mamy takiej relacji czyli taką
jedną klasę dodamy powiedzmy gdzieś i powiedzmy że zapomnimy o rodziców.
Czy obiekt klasy mają wspólnego rodzice tutaj więc ta znajduje tego rodzica
znajduje sobie tego jeśli nie będę miał rodzica to będzie twój problem.
Musimy na tą klasę i mam coś takiego no
lider for niż lider For Ever próbuje zlokalizować element
i nie jest w stanie zlokalizować tej dyrektywy no bo faktycznie jej nie ma.
Teraz możemy po prostu komunikat sieć
użytkownikowi programiści że zapomniałeś dyrektyw do dyrektywy.
Albo mogę w tym dyrektywę jako
obszerną i wtedy jeśli tej dyrektywy nie będzie wtedy może na drugą.
Jeśli nie będzie no to nie będzie to błędem aczkolwiek
muszą tutaj sprawdzić czy mamy tą dyrektywę bo jeśli nie ma.
A nie mój.
Zrobimy tak że jeśli jest ta dyrektywa no to wtedy nas kupujemy.
Tych wszystkich zdarzeń robimy to wszystko
w ten sposób zostawiamy zero i robimy wtedy animator a nie mój.
Jeśli nie ma tej dyrektywy
no to po prostu od razu uruchamiamy animator z oryginalnym opóźnieniem.
Nasza dyrektywa nie działa w dwóch przypadkach jeśli samodzielnie umieści my
ją bez rodzica to po prostu zadziała z opóźnieniem jednej sekundy
ale jeśli gdzieś tu w kodzie znajdzie się błędy bo np.
w tym miejscu to wszystkie dyrektywy
się wewnątrz tego rodzica powinny się automatycznie animowanych.
Elementy wjeżdżają na stronę spróbuj od
dołu dopiero jak przebić się już dawno sekunda minęła.
Pojawiają się na stronie czyli jak spojrzymy jeszcze raz na KOD
to jak widzisz dyrektywy mogą być bardzo rozbudowane.
Bardzo proste mogą być samodzielne ale też masz kilka dyrektyw.
Możemy je połączyć ręcznie a możesz też zrobić tak żeby jedna dyrektywa
automatycznie odwoływała się do innej dyrektywy.
One mogą się sobą komunikować na różne sposoby.
Czyli tu umieszcza na rodziców jedną dyrektywę i te dwie dyrektywy w środku
będą automatycznie z niej korzystały czy gdziekolwiek chcę użyć tego to te parę
muszą umieścić na każdym elemencie który chciał żeby stół wjeżdżał gdzieś na
stronie czyli powiedzmy tutaj znowu mieszczan lub wyzywał ten element np.
pierwszą kolumnę ustawią żeby wyjeżdżała z lewej strony.
I drugą kolumnę sobie postawią żeby wyjeżdżała.
Z prawej strony tak i wszędzie gdzie potrzebujemy
informacji o majątku próg miejsce które ma wykryć przewijanie i drugą dyrektywą.
Miejsce ma być animowane czyli te dwie dyrektywy będą elegancko współpracowały ze
sobą w każdym miejscu gdzie chcemy mieć to dynamicznie.
Tu nawet jeśli mamy powiedzmy jakąś już
dyrektywę typu będzie formą jakąś pętle elementy My dodajemy zupełnie dynamicznie.
Tu także mogę to wykorzystać.
Jeśli projekty są widoczne
to na każdym z tych elementów tutaj dodać dodatkowo jeszcze jeden.
Ale teraz kierunek powiedzmy będzie zależał od tego powiedzmy jeśli jest
pierwszym projektem czyli możemy ten Litwin zrobić też dynamicznie.
Jeśli jest to pierwszy projekt tak to ustalimy że ma wyjeżdżać z lewej.
Jeśli nie.
Jeśli jest to ostatni projekt to ma wyjeżdżać z prawej
a jeśli nie jest to ani pierwszy ani ostatni to ma wjeżdżać do.
Jest w nas projekt.
Wars Project w ten sposób.
Czy boimy się zmiennych.
Zobaczmy jeszcze raz.
Może jeszcze tu u góry mamy też AP
bo w tym miejscu mógłby przenieść do góry na wspólnego rodzica
to miejsce tu wykorzystać referencje a po tej stronie np.
po prawej stronie zamiast klasy pisać na sztywno to napisać.
Tutaj slide.
Np. .
Jeśli mamy larw typu string trzeba robić to bez namysłu kwadratowych ok.
3 od samej góry.
To fajnie wjeżdża.
To fajnie wjeżdża.
To wszystko się rozwija.
I projekty zobaczymy jeszcze na dole co
jest nie tak z projektami muszę usunąć klasy które już były.
To z lewej i prawej chetnie to od środka.
Jak widzisz te elementy się ładnie zjeżdżają.
Czyli jeszcze raz samej góry zacznę.
Tu elementy wjeżdżają od samej góry przewijać.
To się pojawia.
Tu elementy wjeżdżają od dołu i z boków tworząc kilka takich dyrektyw.
Jest to troszkę wysiłku ale później już wielokrotnie na różne sposoby łączyć
składać się z innymi elementami bardzo szybko przypiąć po prostu przykleić
do HTML a jakieś zachowania które ta dyrektywa nam dostarcza.