Routing w Angular

Bartosz Szewczyk

Routing w Angular
26 lipca, 2018 APN Promise SA

Routing w Angular

Angular

Routing umożliwia nawigowanie między komponentami w aplikacji bez przeładowywania całej aplikacji. Wykorzystanie tej techniki niesie ze sobą wiele korzyści zarówno dla klienta końcowego, jak i serwera na którym działa. W poniższym artykule przestawiam, jak we frameworku Angular4 zaimplementować przykładowy Routing.

Podczas tworzenia aplikacji na platformę Microsoft SharePoint musimy liczyć się z tym, że nasze oprogramowanie wraz z nowymi funkcjonalnościami będzie się coraz bardziej rozrastać. Z tego względu wytwarzanie czytelnego i łatwego do przetestowania kodu źródłowego staje się coraz trudniejsze dla programistów. Dzięki frameworkowi Angular, który został zaprojektowany na podstawie wzorca projektowego MVC (Model-Widok-Kontroler), wytwarzanie oprogramowania stało się łatwiejsze, a to za sprawą wymuszania przez architekturę dobrych praktyk programistycznych. Dodatkowo, Angular dostarcza wiele bardzo użytecznych rozwiązań. Jednym z nich jest Routing, który ułatwia wytwarzanie oprogramowania zarządzającego dużymi ilościami danych. Routing umożliwia dzielenie widoków i logiki na mniejsze fragmenty i zapisywanie ich w komponentach.  Dzięki temu mechanizmowi nie będzie konieczne przeładowanie całej strony internetowej, a jedynie jej fragmentu, który będzie odpowiedzialny za konkretny produkt. Serwer tylko za pierwszym razem będzie wysyłał pełen kod HTML, a następne zapytania będą dotyczyły tylko konkretnej części aplikacji. Komfort pracy użytkownika końcowego zostanie poprawiony, ponieważ pozbędziemy się męczących przeładowań strony internetowej. Dodatkowo, ograniczony w ten sposób zostanie transfer danych, co ma szczególne znaczenie podczas korzystania z urządzeń mobilnych w trudno dostępnych warunkach, np. ze słabym zasięgiem sieci telekomunikacyjnych.

Wymagania

Aplikacja będzie tworzona przy pomocy narzędzia Angular CLI – więcej informacji niezbędnych o narzędziach oraz opis sposobu ich używania znaleźć można w jednym z moich poprzednich artykułów pt. Budowanie aplikacji Angular4 przy pomocy Angular CLI. Sposób połączenia aplikacji napisanej przy pomocy frameworka Angular z Microsoft SharePoint został przedstawiony w artykułach Kamila Warownego (SharePoint Online Hosted App oraz SharePoint 2016 Farm Solutions).

Tworzenie nowej aplikacji

W tym artykule przedstawione zostanie, w jaki sposób stworzyć aplikację internetową z wykorzystaniem frameworka Angular. Aplikacja ta będzie mieć zaimplementowany Routing. Pokażę jak w adresie URL przekazać parametr do komponentu i w jaki sposób go wyświetlić na widoku. Udowodnię także, że dzięki Routingowi po kliknięciu w linki w aplikacji będzie się odświeżać jedynie konkretny kontroler, a nie całość, jak to miało miejsce w tradycyjnych rozwiązaniach.

Na samym początku trzeba utworzyć aplikację – w tym celu uruchamiamy wiersz poleceń i wpisujemy komendę:


ng new NAZWA_APLIKACJI

Po utworzeniu aplikacji trzeba ją uruchomić i sprawdzić, czy wszystkie niezbędne elementy zostały poprawnie utworzone. W tym celu wpisujemy komendę:


cd NAZWA_APLIKACJI
ng serve

Na konsoli powinniśmy otrzymać następujący wynik:

Po wejściu na adres http://localhost:4200/ powinniśmy zobaczyć napis: „app works!”.

Tworzenie Routing

Aby stworzyć Routing w konsoli wpisujemy:


ng generate module app-routing --flat

Następnie rejestrujemy Routing w pliku app.module.ts

Następnie tworzymy komponenty przez wykonanie komend w wierszu poleceń:


ng generate component home
ng generate component mainPage

Po utworzeniu komponentów możemy przejść do edycji pliku app-routing.module.ts

Tworzymy tablicę, w której będziemy wskazywać, który parametr URL będzie wskazywał na który komponent.


const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'mainpage', component: MainPageComponent }
];
@NgModule({
   imports: [
     RouterModule.forRoot(routes, { useHash: true })
   ],
   exports: [RouterModule]
})

W kolejnym kroku musimy zmodyfikować widok app.component.html. Dodajemy na samym początku pliku .html nawigację, w której dodamy linki do konkretnych komponentów.


<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/mainpage">Main page</a>
</nav>

Następnie dodajemy tag  <router-outlet></router-outlet> w miejscu, w którym chcemy, aby wyświetlała się zawartość Routingu.

Po uruchomieniu aplikacji możemy przetestować jak działa Routing. Po kliknięciu w linki zmienia się adres URL i w miejscu tagu <router-outlet></router-outlet> wyświetlony zostanie widok z konkretnego kontrolera.

Stworzona przez nas aplikacja ma zaimplementowany Routing. Bez przeładowywania całej aplikacji można przełączać się między komponentami. Dzięki częściowemu przeładowaniu zostanie zaoszczędzony transfer danych i odciążone serwery internetowe. W tym momencie strona będzie się generować po stronie klienta, a nie po stronie serwera, co w znaczny sposób go odciąży.

Routing z parametrami

Następnym krokiem będzie dodanie możliwości przekazywania parametru w adresie URL. Najczęściej będzie to Id rekordu z bazy danych – primary key. Dzięki przekazanemu parametrowi komponent będzie mógł np. wysłać odpowiednie zapytanie do bazy danych i w odpowiedzi otrzymać informacje dotyczące produktu i wyświetlić je na widoku.

Na samym początku za pomocą wiersza poleceń tworzymy nowy komponent o nazwie product:


ng generate component product

I edytujemy tablice routes w pliku app-routing.module.ts, dodajemy do niej:


{ path: 'product/:id', component: ProductComponent }

:id w tym miejscu będzie przekazywany nasz parametr, który będziemy przekazywać do naszego komponentu przez adres URL.

Następnie w pliku product.component.ts dodajemy property:


sub:any
id:numer

W konstruktorze dodajemy parametr private route: ActivatedRoute

W metodzie ngOnInit dodajemy kod, który przy każdej zmianie adresu URL będzie pobierał parametr i przypisywał go do property


this.sub = this.route.params.subscribe(params => {
  this.id = params['id'];
});

Nasz kontroler powinien wyglądać w ten sposób:

Następnie musimy zaktualizować widok aby wyświetlić przekazywany parametr i sprawdzić, czy wszystko działa tak jak powinno. Dodajemy do widoku:


{{id}}

Dodatkowo, edytujemy plik app.component.html aby dodać linki z parametrami kierujące nas do nowopowstałego kontrolera.


<a routerLink="/product/1">Produict 1</a>
<a routerLink="/product/2">Produict 2</a>
<a routerLink="/product/3">Produict 3</a>

Kod HTML edytowanego widoku po modyfikacji powinien wyglądać w ten sposób:

Po uruchomieniu aplikacji możemy zobaczyć, że mamy możliwość przesyłania przy pomocy adresu URL parametrów do kontrolera zarówno przez link, jak i ręczną edycję adresu URL.

Stworzona Angularowa aplikacja ma zaimplementowany Routing. Wraz z URL można przekazywać parametr bezpośrednio do kontrolera. Po kliknięciu w link zostanie przeładowany jedynie konkretny fragment strony internetowej, a nie cała aplikacja, jak to ma miejsce w tradycyjnych rozwiązaniach.

Aby udowodnić, że odświeża się jedynie konkretny komponent, a nie całość, należy zedytować plik app.component.html.

Musimy zaktualizować widok dodając do niego zewnętrzny komponent. Takim komponentem może być np. film z YouTube. Trzeba zamienić znacznik  <router-outlet></router-outlet> na HTML’ową tabelkę.


<table>
  <tr>
     <td style="display: block;">
        <iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/9bZkp7q19f0?autoplay=1&controls=0&showinfo=0&autohide=1">
        </iframe>
     </td>
     <td> 
        <router-outlet></router-outlet>
     </td>
  </tr>
</table>

Jak widać, po kliknięciu w linki Main page, Produict 1, Produict 2 lub Produict 3 zmienia się jedynie część strony, a uruchomiony teledysk z YouTube odtwarza się dalej bez żadnego zacięcia.

Podsumowanie

Stworzona Angularowa aplikacja ma zaimplementowany Routing. Wraz z URL można przekazywać parametr bezpośrednio do kontrolera. Po kliknięciu w link zostanie przeładowany jedynie konkretny fragment strony internetowej, a nie cała aplikacja, jak to ma miejsce w tradycyjnych rozwiązaniach. Dzięki temu mechanizmowi podczas korzystania z aplikacji ograniczony zostanie transfer danych. Dzięki framework’owi Angular renderowanie strony internetowej będzie się dziać w całości po stronie klienta końcowego na podstawie danych otrzymanych z serwera internetowego. W znaczący sposób zostanie odciążony serwer, który nie będzie odpowiedzialny za tworzenie plików HTML, a jedynie za wysyłanie danych w formacie JSON/XML.

Pełen kod do przykładowej aplikacji znajduje się w repozytorium GitHub

Zachęcam również do zapoznania się z live demo aplikacji.

Podziel się

Autor: Bartosz Szewczyk

Bartosz Szewczyk

Bartosz Szewczyk

Zespół: Apps

Ostatnie artykuły autora

Rozliczanie przebiegów aut w przedsiębiorstwie w 5 minut

Rozliczanie przebiegów aut w przedsiębiorstwie w 5 minut

Bartosz Szewczyk przedstawia rozwiązanie, które pomaga zarządzać w samochodami w przedsiębiorstwie, zapewniając komfort i szybkość pracy użytkowników.

Synchronizator poczty z Exchange do SharePoint

Synchronizator poczty z Exchange do SharePoint

W artykule przedstawiono rozwiązanie pozwalające na synchronizację wiadomości w czasie rzeczywistym z Exchange do SharePoint w celu dostarczenia użytkownikowi dodatkowych, niedostępnych w programie Outlook możliwości pracy nad załącznikami oraz przyspieszenie dostępu do danych.

Routing w Angular

Routing w Angular

Routing umożliwia nawigowanie między komponentami w aplikacji bez jej przeładowywania. W artykule przestawiam, jak we frameworku Angular4 zaimplementować przykładowy routing.

Zarejestruj się i przetestuj APN Meeting Room

Wypróbuj system rezerwacji sal w praktyce, na Twojej infrastrukturze.
Wersja demonstracyjna umożliwia Ci instalację oprogramowania na 3 urządzeniach.

Chcę otrzymywać treści marketingowe od A.P.N. Promise S.A. drogą elektroniczną
Chcę otrzymywać treści marketingowe od A.P.N. Promise S.A. telefonicznie

Administratorem danych osobowych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. z siedzibą w Warszawie. Kontakt z osobą odpowiedzialną za ochronę danych osobowych jest możliwy za pośrednictwem adresu e-mail: iodo@promise.pl. Podane dane będą przetwarzane w zakresie niezbędnym do realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO, w zakresie niezbędnym dla prawidłowej realizacji żądania oraz oferowania i świadczenia usług, marketingu produktów i usług własnych oraz przeprowadzenia ankiet i oceny satysfakcji zgodnie z art. 6 ust. 1 lit. f RODO przez okres niezbędny dla realizacji celów oraz w przypadku wyrażenia zgody na podstawie art. 6 ust. 1 lit. a RODO w celu dostarczenia treści marketingowych środkami komunikacji elektronicznej lub za pomocą urządzeń telefonicznych.

Przysługuje Ci prawo do żądania dostępu do danych osobowych, ich sprostowania, usunięcia lub ograniczenia przetwarzania, jak również prawo sprzeciwu wobec przetwarzania, prawo do przenoszenia danych, a także prawo złożenia skargi do organu nadzorczego, którym w Polsce jest Prezes Urzędu Ochrony Danych Osobowych. Podanie danych jest dobrowolne, jednak niezbędne dla realizacji powyżej wskazanych celów. Odbiorcami danych mogą być podmioty lub osoby obsługujące administratora w zakresie w zakresie hostingu, komunikatorów internetowych, usług IT, księgowości, archiwizacji. Więcej informacji w Polityce Prywatności oraz Regulaminie.

Register and test the APN Meeting Room booking system.

Registering and installing the trial version you are allowed to install the software on 3 devices.

I want to receive marketing content from A.P.N. Promise S.A. electronically
I want to receive marketing content from A.P.N. Promise S.A. by phone

The data controller of personal data collected using the form is A.P.N. Promise S.A. with its registered office in Warsaw. Contact with the person responsible for the personal data protection is possible via following e-mail address: iodo@promise.pl. The given data shall be processed to the extent necessary to carry out specified request in accordance with art. 6(1)(b) of GDPR and to the extent necessary for the correct realization of the request and offer and provision of services, own product and services marketing and conducting surveys and satisfaction ratings in accordance with art. 6(1)(f) of GDPR for the period necessary to achieve the purposes and in the event of consent in accordance with art. 6(1)(a) of the GDPR to provide marketing content by electronic means or by telephone devices.

You have the right to request access to your personal data, rectification, deletion or limitation of processing, as well as the right to object to processing, the right to transfer data and the right to lodge a complaint with a supervisory authority, i.e. the President of the Personal Data Protection Office in Poland. Providing data is voluntary but necessary for the realization of the above-mentioned purposes. Recipients of data may be entities or persons servicing the data controller in the field of hosting, instant messengers, IT services, accounting, archiving. More information in the Privacy Policy and Regulations.

Cybersecurity w obszarze zarządzania zasobami oprogramowania

Napisz do nas, a skontaktujemy się z Tobą i bezpłatnie porozmawiamy o Twoim poziomie cyberbezpieczeństwa w obszarze SAM.

 

Administratorem danych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. Podane przez Ciebie dane będą przetwarzane w zakresie niezbędnym do podjęcia kontaktu lub realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO przez okres niezbędny dla realizacji Twojego zgłoszenia. Wszelkie informacje w zakresie przetwarzania podanych przez Ciebie w formularzu danych oraz posiadanych uprawnieniach znajdziesz w Polityce prywatności. Kliknij i dowiedz się więcej jeżeli informacje podane powyżej nie są dostatecznie jasne!

Zostaw adres mailowy i nie przegap kolejnego szkolenia!

[contact-form-7 404 "Not Found"]