Angular: Projekt - Interaktywny formularz

Angular 10+

0:00Moje gratulacje.

0:01Na tym etapie kursu posiadasz już wszystkie informacje

0:05wiedzę potrzebną do samodzielnego budowania dynamicznych szablonów

0:09w tej lekcji Przygotowałem taki specjalny przykład możesz go sobie pobrać ze źródeł

0:13tego kursu uruchomić i spróbować samodzielnie go dokończyć.

0:17Jak widzisz tutaj dałam troszeczkę HTML a jest bardzo mało specjalnych wiązań.

0:22Miałam wszystkie nadmierne wiązania mieszkałem kilka sekcji.

0:27One są wszystkie tutaj jak widzisz ukryte mamy przełączniki True Falls które

0:32pozwalają nam odpowiednio włączyć wyłączać te elementy.

0:35Mamy formularz i funkcję update.

0:39I to w ten sposób uruchomimy aplikację dającą jeśli coś wpisze.

0:44To się zmienia i teraz nie przecież dalej.

0:48Proponuję zatrzymać tą lekcję i spróbować samodzielnie dodać kolejne kroki.

0:52Czy jeśli ktoś wpisze to imię i to imię jest np.

0:55inne różne niż Hancock no to można pokazać kolejną część.

1:00Czy chciałbyś się zapisać na New Letter.

1:02Jeśli tak.

1:04No to super to możemy wykonać odpowiednią funkcję która zapyta o adres e-mail.

1:09Jeśli ktoś wpisze adres e-mail

1:11możesz go pobrać klikając przycisk za subskrypcję

1:16masz kolejno funkcje i tak dalej aż na końcu możesz wyświetlić użytkownikowi

1:21komunikat że sukces możesz śmiało ukryć pozostałe sekcje.

1:25Więc jest to świetny moment żeby sobie przećwiczyć.

1:29Nie oszukujmy zatrzymaj kurs.

1:32Spróbuj to samodzielnie wykonać.

1:34Za chwilkę tutaj wrócisz do kursu.

1:37Jakieś pytania

1:38lub jeśli masz skończone przykład no to możesz wrócić od pauzować kurs i zobaczysz

1:44jak tu jest problem rozwiązać ten przykład.

1:47Nie musi być to identycznie.

1:48Zobaczysz że jeśli twój przykład działa tak jak ty chcesz no to super.

1:53Ważne żeby zrozumieć o co chodzi.

1:55Możesz też wrócić do poprzednich lekcji i zobaczyć czy na pewno dobrze rozumiesz.

1:59Jeśli coś jest niejasne jeszcze raz przesłuchać OK.

2:03Zakładam że masz rozwiązane to zadanie.

2:05Ja teraz próbuję przejść po kolei przez to

2:08raz szybko powtórzymy wszystkie informacje z poprzednich lekcji.

2:11W praktycznym przykładzie i pójdziemy później dalej zobaczymy co

2:14jeszcze możemy zrobić czyli powiedzmy tak na początku mamy po prostu coś takiego.

2:19To się zmienia bo ta funkcja wyświetla nam

2:22tę informację i co chcielibyśmy zrobić chcieliśmy zrobić coś takiego że jeśli to

2:27imię ma odpowiednią długość no to możemy wyświetlić kolejne pytanie

2:32czy ktoś faktycznie zmienił funkcję czy mógł zweryfikować.

2:37No właśnie czy to nasze czyli na przykład to po prostu czy znają

2:44czy jego długość jest większa powiedzmy od trzech.

2:48Załóżmy sobie że trzy literki jeśli długość jest większa od trzech no to

2:53super to możemy na przykład pokazać tę wiadomość.

2:57Czyli robimy coś takiego teraz czyli ukrywamy komunikat szkoła.

3:04Jeśli wystarczająca długość tekstu jest no to ustawiamy tez.

3:12Step School wielka naturą i zobaczmy to zadziała tak i teraz jeśli.

3:21Liderka tylko zmienimy widzisz od razu wyskakuje trochę dziwnie.

3:24Powiem inaczej ta funkcja jak wiesz

3:28jest każdą literą czy w każdym przypadku użytkownika możemy

3:31sprawdzić co się dzieje i coś schować pokazać to jest póki ktoś kasuje to hasło

3:36Hancock kasuje te literki to nie chcemy żeby mu przeszkadzać.

3:40Więc załóżmy że póki Johansson jest zrobimy tak

3:46że dopóki zawiera w sobie powiedzmy zaczyna się starców z naszym tekstem.

3:55Czyli dopóki ktoś ma na początku tekst

3:58Hancock no to nie chcemy mu przeszkadzać niech sobie pisze.

4:02Czyli jeśli start spływ.

4:07Jest to fałsz nie zaczyna się to co chcemy zrobić no to chcemy by się np.

4:13to ustawiamy tutaj dane zobacz nie muszę dotykać HTML zmieniamy tylko step.

4:21Włączam sobie tą opcję ustawia parametr HTML ma się sam zmodyfikować.

4:26Czyli walka ustawiona na.

4:29No i super.

4:31I teraz jeśli jest School powiedzmy i ktoś już pisał powyżej trzech liter

4:37czyli zobacz jeśli ktoś skasował nasz Hancock wyświetli walka Message i.

4:45Wpisał już więcej niż trzy litery powiedzmy większe równe trzy

4:49minimum trzy litery T kolejny komunikat zapytaj czy chciałbyś

4:53się zapisać na New Letter czyli Zapytaj o e-mail.

4:57Ustawa ma wiatru.

4:58Pojawiają się kolejne HTML czy zmieniając te flagi od bloków.

5:02Wyświetlane kolejne lub schowane lub jeszcze zmieniamy inne parametry.

5:06Zobaczymy jak to zadziała.

5:08Zachęcam was mogę śmiało skasować to tak by o B bo coś za szybko się wyświetli.

5:18Więc mogą też sprawdzić tą długość np.

5:213 jak chcemy możemy od razu była też jest właściwie ok Polecam bo super.

5:28Może być tak może ktoś jeszcze pisze więc co możemy fajnego zrobić.

5:33Mogę na przykład ten drugi krok troszkę opóźnić czy nie tylko możemy zmodyfikować

5:37ten od razu to jest dowolny działa skryptu czyli też nic nie stoi na przeszkodzie np.

5:42żeby sobie set time out i wykonał to za chwilkę.

5:46Czyli tu jeszcze funkcje temu powiedzmy półtora sekundy żeby za długo nie czekać.

5:53I drugi krok uruchomi dopiero za chwilę

5:55jak zobaczysz Conquer też to ładnie wykryje.

5:59Kasuje pisze Bob i po chwili powinien pojawić mi się e-mail.

6:04Super mamy interaktywny przykład.

6:06Czy widzisz możesz na różne sposoby

6:08wykorzystywać informacje łączy się ze sobą.

6:10Chodzi tylko o to żeby skupić się na

6:12danych żeby tak ustawiać dane żeby tylko zmieniając same dane już

6:17się nie przejmować HTML również sam się pojawia i chowa.

6:21Tak czy dziś ktoś tutaj ASK subskrypcję subskrypcję.

6:26Jeśli ktoś nie jest.

6:31No to możemy krok następny.

6:33Jeśli ktoś kliknij przycisk Yes to robimy teraz i mogę funkcję stworzyć.

6:38Mogę też to zrobić zapytaj o e-mail i na przykład.

6:48Scripps

6:50FOZZ której uwaga skomplikowane rzeczy no to pytanie czy to zadziała prawidłowo.

7:01Widzisz nie koniecznie więcej śpisz bardziej skomplikowany kot.

7:05No to tu się zaczęłam pod problemem pojawiać i też

7:08zamiast pisać takie bardzo skomplikowane wyrażenia w krypcie

7:13no to może warto byłoby to wszystko przenieść sobie do funkcji.

7:17Zawsze lepiej to napisać niż tutaj w HTML.

7:20Czyli jakaś tam funkcja.

7:24I tu pamiętać musisz o tym że tu brakuje DS i tu brakuje DS.

7:31O tym też rozmawialiśmy już możemy bardzo prosto zapisać ładnie w kadrze w osobnej

7:35linii i nie ma ryzyka że coś tam umieszczamy coś przestanie działać.

7:41I teraz tą funkcję agregat subskrypcję.

7:47Jest.

7:49Czyli kilkunastu pokazujemy tą sekcję

7:53tę sekcję mamy po prostu zmieniając odpowiedni program.

7:57Jeden krok pokazują następne czyli jeszcze raz bo.

8:02Jest OK.

8:04Wpisz Mr wpisujemy i chcemy kliknąć tutaj czy przejść do kolejnego kroku.

8:09Więc tutaj jeśli chcemy dostać tego maila to ma kilka możliwości manewru z każdą

8:14literą e-mail lub możemy sobie oznaczyć jako e-mail na przykład ref.

8:20Nazwa jest dowolna i tu w pliku

8:26mogę wykorzystać wartość tego komputera i przekazać jako parametr np.

8:30do funkcji subskrypcji user.

8:33Tutaj przekazać e-mail czy subskrypcję 0 mogę przekazać e-mail walił.

8:39I to będzie tutaj nasz e-mail.

8:41Super.

8:43I tak możemy tu sprawdzić czy jest poprawne.

8:45Założony jest poprawny i jeśli tak to co robimy.

8:49DS Józefa.

8:53I to się równa.

8:55I tu krzyczy na mnie na siłę czego nie ma.

8:57Nie ma e-maila nie ma tego czegoś.

9:00Sprawdza że użyłem pola którego nie ma.

9:03No to damy sobie tutaj pustą wartość.

9:06I co jeśli spróbujemy się to możemy ustawić tutaj gdyz Józefa

9:12zasób skorygowany trud i kolejne kroki czyli co możemy schować

9:18możemy schować to a skwer i to możemy sobie zmienić na Fox.

9:25Krok po kroku zmieniając dane zmieniamy strukturę tego atamana chowane

9:30pokazujemy zmieniamy przenosimy dane żeby krok po kroku przejść.

9:34Jak wszystko jest tutaj super to co robimy Słupska sukcesu.

9:48Zobacz jak to działa.

9:50Bo.

9:54Czy chciałby się zapisać.

9:55Tak w piśmie mail testowy nie ma woli racji tego.

10:01Super jest jest obserwowany.

10:02Sprawdź skrzynkę dostaniesz tam jakieś

10:04ciekawe maile czyli jak widzisz krok po kroku można te informacje których użyliśmy

10:09do budowania bardzo fajnych interaktywnych dynamicznych interfejsów.

10:13Tutaj trochę tych zmiennych powstało to pewnie można by inaczej poukładać ale jest

10:17to czysty skrypt może dowolną strukturę trzeba skrótowo umieścić.

10:21Ważne tylko żeby odpowiednie elementy HTML odpowiednio reagowały zmieniały się za

10:26każdym razem jak zmieni się wartość super wygląda to fajnie.

10:30Tutaj brakuje troszeczkę jeszcze stylu i animacji może jakieś coś żeby to ładnie

10:35wyglądało no ale o tym porozmawiamy w kolejnych lekcjach.