ANGULAR – ROUTER EVENTS I SPINNER

Hello!

Czas na kolejny art związany z routingiem. W tym artykule poznasz etapy routingu i pokażę praktyczny przykład ich zastosowania. Zaimplementujemy spinner, który będzie się pokazywał podczas przechodzenia między widokami.

Skorzystam z Plunkera, którego stworzyłem na potrzeby tego artykułu:
ANGULAR 2 – RESOLVE SERVICE

Plunker:

Resolver Example

W powyższym przykładzie, stworzyłem Resolve Service, który dostarcza nam dane przed aktywacją routa. Fajnie, jeśli użytkownik widziałby spinner podczas ładowania danych do widoku. Celowo teraz opóźnię załadowanie danych z API w pliku app.module.ts:

Dzięki temu będzie czas, aby zobaczyć spinner.

ROUTER EVENTS

W routingu rozróżniamy następujące typy eventów:

  1. NavigationStart
  2. RoutesRecognized
  3. NavigationEnd
  4. NavigationCancel
  5. NavigationError
  6. RouteConfigLoadStart (związane z lazy loading)
  7. RouteConfigLoadEnd (związane z lazy loading)

Nazwy eventów od 1 do 5 jasno określają etap na jakim znajduje się routing, natomiast eventów 6-7 nie będę pokrywać w tym artykule.

Stan routingu możemy obserwować w konsoli przeglądarki, poprzez włączenie enableTracing w odpowiednim module z routingiem, w następujący sposób:

Dzięki temu podczas przechodzenia między widokami, będziesz otrzymywać odpowiednie logi:

Spójrzmy teraz na klasę Router:
Router docs

Klasa router posiada pole Events typu Observable<Event> … a jeśli widzimy Observable… to znaczy, że możemy się subskrybować i nasłuchiwać na dany event! Whoaa!

Zatem jeśli pojawi się Event NavigationStart, to chcemy pokazać spinner, a natomiast jak wyemituje się Event NavigationEnd, to z pewnością będzie to dobry moment, aby ukryć spinner.

Zatem teraz wykorzystam Router.events do pokazania spinnera. Przechodzę do app.component.ts i subskrybuję się do router.events:

Powyższy kod jest prosty i jasny. Obsłużyłem również NavigationCancel oraz NavigationError. W tych przypadkach chcę również ukryć spinner. Teraz w templatce głównego komponentu (app.component.html) dodajemy diva ze spinnerem:

Natomiast sam spinner, to już kwestia CSSa, możesz np. wykorzystać  Key Frames do animacji. Jeśli chcesz sprawdzić kod spinnera z przykładu, przejdź do pliku styles.css.

Link do kodu ze spinnerem i eventami, klikamy na dowolnego usera z listy:

LIVE EXAMPLE

Polecam również ciekawy artykuł, jak wykorzystać Router Events do dynamicznych zmian tytułów:

https://toddmotto.com/dynamic-page-titles-angular-2-router-events

I właściwie w ten oto prosty sposób, dodaliśmy spinnera do naszej aplikacji ; )

——————————-

Chciałbym również podsumować konkurs, w którym można było wygrać wejściówkę na konferencję Frontend-Con:

KONFERENCJA FRONTEND-CON 2017, WYGRAJ BILET!

Gratulacje dla Piotra Lewandowskiego z Gdańska, który uzbierał zawrotną sumę 37 lajków pod udostępnieniem posta;)!

Mam nadzieję, że będziesz się dobrze bawić i wrócisz pełny nowej wiedzy 🙂

One Comment

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *