Dynamiczne odświeżanie strony

0

Mam takie pytanie do ludzi, którzy programują zawodowo.

Zrobiłem w ramach samorozwoju apkę Spring + Angular.
Obsługuję metody HTTP i do dynamicznego odświeżania strony np. po dodaniu elementu metodą post używam window.location.reload();

np mam taką metodę w komponencie:

onAddTickets()
{
  this.http.postTickets(this.model as Tickets).subscribe()
  console.log('ADDING NEW TICKET')
  window.location.reload();
  this.getTickets()
}

Czy taki sposób przeładowywania strony po dodaniu elementów mozna uznać za poprawny?
Nie wiem dlaczego, ale mam jakieś wrażenie że to topornie strasznie wygląda i tak się nie powinno robić.
Jak takie rzeczy robi się w prawdziwych apkach komercyjnych ?

2

Pytanie co dokładnie chcesz osiągnąć.

Angular powinien automatycznie odświeżyć komponent po aktualizacji danych, nie potrzebujesz przeładowywać całej strony

1

Co do Angulara, to chyba najlepiej będzie spojrzeć w dokumentację i przykłady, jednak mam wrażenie, że brakuje ci modelu mentalnego o tym, jak działa frontend ogólnie.

po dodaniu elementu metodą post używam "window.location.reload();"

A może cofnij się trochę i zanim wejdziesz w Angulara, to spróbuj napisać jakieś proste rzeczy w JavaScript bez użycia żadnego frameworka.

Ogólnie we frontendzie można manipulować obiektami na stronie bez żadnego window.location.reload();. Np. możesz dynamicznie dodawać divy:
https://jsfiddle.net/ghqvajf2
Obiekty w przeglądarce to jest żywy organizm, który można zmieniać w czasie rzeczywistym (bo to zabrzmiało, jakbyś miał model mentalny, że strona to jest statyczny HTML, który jest wyświetlany przez przeglądarkę i już)

Ogólnie JS działa w przeglądarce i strona jest raz załadowana, a potem sobie działa (chyba, że przejdziesz do innej strony, albo właśnie, odświeżysz)

0

No właśnie uczę się dopiero. Przerobiłem jakieś kursy z js. i Angulara i teraz próbuję zrobić swoją pierwszą apkę w tym.

Poprawiłem trochę metodę i już działa tak jak chciałem (dodałem response=> ...). Dodaje elementy na bieżąco bez przeładowywania strony

onAddTickets()
{
  this.http.postTickets(this.model as Tickets).subscribe((response: Tickets) => {this.getTickets()})
  console.log('ADDING NEW TICKET')
}

Zdaję sobie sprawię, że java script pozwala na tworzenie dynamicznych rzeczy. Ale trochę przestałem kumać o co chodzi, jak zrobiłem wszystko jak mi się wydawało dobrze, ale przy dodawaniu elementów na stronie pokazywał mi się log do konsoli przeglądarki z powyższej metody, więc metoda działała poprawnie, a wizualnie nic się nie działo na stronie. Dopiero jak kliknąłem submita, to pokazywały mi się od razu 2-3 elementy dodane wcześniej...(tak jakby metoda strzelała postem przy każdym kliknięciu buttona, a strona aktualizowała się co 2-3 kliknięcia...) Użyłem *ngFor do wyświetlania i przy prostych rzeczach rzeczywiście dodawały się od razu, a tutaj już tak to nie działało.

0

pokaz caly kod, getTickets i sposob w jaki wyswietlasz (bindujesz?) pobrane dane

0
Imperator109 napisał(a):

this.http.postTickets(this.model as Tickets).subscribe((response: Tickets) => {this.getTickets()})

Czy this.http.postTickets(this.model as Tickets) nie zwraca ci przypadkiem obserwabla z Rx.js?

0
LukeJL napisał(a):
Imperator109 napisał(a):

this.http.postTickets(this.model as Tickets).subscribe((response: Tickets) => {this.getTickets()})

Czy this.http.postTickets(this.model as Tickets) nie zwraca ci przypadkiem obserwabla z Rx.js?

Tak, zwraca Observable

1 użytkowników online, w tym zalogowanych: 0, gości: 1