Podstawy kątowe-12
Witamy w 12 części serii Angular Basics. W tej części nauczymy się wykonywać żądania HTTP w Angularze.
Stąd można wziąć punkt wyjścia .
Punktem wyjścia w naszym projekcie jest prosty formularz oparty na szablonie.
Teraz użyjemy Firebase w naszym projekcie do przechowywania danych backendu. Otwórz konsolę Firebase i kliknij przycisk Dodaj projekt .
Poprosi o nadanie projektowi nazwy, którą możemy nadać dowolną.
Na następnym ekranie wyłącz Google Analytics i kliknij przycisk Utwórz projekt .
Utworzy nowy projekt i możemy kliknąć przycisk Kontynuuj .
Tutaj kliknij Baza danych czasu rzeczywistego, a następnie przycisk Utwórz bazę danych .
Zapytał mnie o lokalizację i podałem Singapur, ponieważ jest najbliżej.
Na następnym ekranie ważne jest, aby rozpocząć w trybie testowym.
Na następnym ekranie otrzymamy adres URL do wysłania żądania z naszego frontendu.
Wracając do naszej aplikacji, powinniśmy upewnić się, że mamy HttpClientModule w pliku app.module.ts .
Teraz użyjemy HttpClient dostarczonego przez angular, aby wysłać żądanie POST do punktu końcowego Firebase. Zauważ też, że na końcu dodaliśmy posts.json.
Pamiętaj, aby zaimportować HttpClient również w pliku app.component.ts .
Teraz w lokalnym hoście możemy dodać tytuł i treść i kliknąć Wyślij post, a post zostanie pomyślnie wysłany, jak pokazano na karcie sieci.
Post możemy też zobaczyć w bazie firebase.
Teraz sprawdzimy prośbę o pobranie wszystkich postów. Stworzymy fetchPosts funkcjonować, aby uzyskać wiadomości i wywołać ją z ngOnInit i onFetchPosts w app.component.ts pliku.
Teraz z powrotem na localhost otrzymamy obiekt z bazy ogniowej z naszymi postami.
Musimy przekształcić ten obiekt do użycia w naszym projekcie i do tego użyjemy operatora pipe z funkcją map z angular.
Tutaj przechodzimy przez obiekt za pomocą pętli for..in i tworzymy nową tablicę z obiektami.
Teraz z powrotem w localhost nasze dane są dobrze sformatowane.
W kodzie maszynopisu powinniśmy mieć typ żądań HTTP i w tym celu najpierw utworzymy plik post.model.ts w folderze aplikacji. Jest interfejsem z modelem danych.
Następnie użyjemy tego modelu w naszym pliku app.component.ts , aby odwołać się do typu w różnych miejscach.
Teraz wyświetlimy posty w naszej aplikacji, a także pokażemy Ładowanie, gdy dane są pobierane. Tak więc w pliku app.component.ts dodaj zmienną dla loadPosts i isFetching .
Zanim posty zostaną pobrane, ustaw to isFetching na true, a kiedy posty zostaną pobrane, ustaw je na true, a także loadPosts równe odebranym postom .
Teraz w pliku app.component.html pokaż Brak dostępnych postów tylko wtedy, gdy loadPosts i isFetching nie są prawdziwe. Przeglądamy też wczytane posty i pokazujemy je.
Tekst Loading… jest również wyświetlany, jeśli isFetching ma wartość true.
Nasz główny kod dla żądania HTTP jest gotowy i działa również wskaźnik ładowania. Zmodyfikujemy ten kod w następnej części, aby korzystać z usług.
To kończy nasz post i możesz znaleźć kod tego samego w tym repozytorium github.
Suggested posts
Jest — potężny framework do testowania JavaScript
Testowanie jest istotną częścią tworzenia oprogramowania. Zapewnia, że kod jest niezawodny, działa zgodnie z oczekiwaniami i zmniejsza prawdopodobieństwo błędów.
Aktualizacja aplikacji korporacyjnej do Angular 16
Nadchodzi ból
Jestem absolutnie kupiony przez wszystkie nowe funkcje Angular v16, zaczynając od sygnałów i cóż, wszystko inne. I po prostu nie mogłem się oprzeć pokusie zaktualizowania jednej z aplikacji firmy, aby zobaczyć, jakie to może być trudne.
Related posts
Wyzwanie czytelnicze Goodreads jest toksyczne
Swędzenie w mojej dłoni rozszerzyło się, gdy targowałem się z miejscowym księgarzem o kolejną książkę. Ta książka, podobnie jak pozostałe, które ostatnio kupiłem, znalazłaby swój tron na moim stosie „Do przeczytania” (TBR); a mimo to kupiłem.
Telewizja sieciowa Twitter
To, co stare, jest teraz znowu nowe, a to, co kiedyś było lśniącą, błyszczącą rzeczą, teraz wydaje się nudne. Nie mówię o dżinsach JNCO, które powróciły wśród fajnych dzieciaków w śródmieściu wraz z innymi modami późnych lat 90.
Kłamstwo kowbojskie
Jak megakorporacje sprzedały Amerykanom mocne kłamstwo
Jest wspaniale złoty poranek na falistych wzgórzach zachodu, gdy pierwsze promienie słońca oświetlają oszronioną trawę na równinach. Stado spokojnego bydła rasy Angus, czarnego jak smoła i masywne, rysuje się na tle wschodu słońca, gdy zmierza utartym szlakiem do miejsca, które wszyscy dobrze znają; bar śniadaniowy.
Niebezpieczne rozmowy
Jeśli chcemy dalej prosperować na tej planecie, będziemy musieli prowadzić niebezpieczne rozmowy. Takie, które rzucają wyzwanie temu, co zrobiliśmy, co robimy i co obecnie zamierzamy robić (lub planujemy robić).