• Czym jest Vue Router?
• Instalacja Vue Router
• Konfiguracja Vue Router
• Nawigacja z Vue Router
• Dynamiczny routing
• Nawigacja programistyczna
• Kontrola nawigacji
• Historia nawigacji
• Podsumowanie

Czym jest Vue Router?

Vue Router to oficjalna biblioteka routingu dla Vue.js. Umożliwia ona mapowanie komponentów na określone ścieżki URL, co pozwala na dynamiczne renderowanie różnych widoków bez konieczności przeładowania strony.

const router = VueRouter.createRouter({  history: VueRouter.createWebHashHistory(),  routes: [    { path: '/', component: Home },    { path: '/about', component: About },  ],})

Jak widać powyżej, ścieżki są mapowane na komponenty przy użyciu tablicy routes, która jest przekazywana do instancji routera podczas jej tworzenia.

• Zobacz także: Podstawy Vue – tworzenie interaktywnych interfejsów
• Animacje w Vue.js: Efekty dla Interfejsu Użytkownika

Instalacja Vue Router

Instalacja Vue Router jest prosta i szybka. Można go zainstalować za pomocą menedżera pakietów npm lub yarn, wykonując następujące polecenie:

npm install vue-router@4# lubyarn add vue-router@4

Konfiguracja Vue Router

Po zainstalowaniu Vue Router, musimy go skonfigurować w naszej aplikacji. Poniżej znajduje się przykładowy kod konfiguracji routera:

// 1. Definiowanie komponentów, które będą używane jako widokiconst Home = { template: '<div>Strona główna</div>' }const About = { template: '<div>O nas</div>' }// 2. Definiowanie ścieżekconst routes = [  { path: '/', component: Home },  { path: '/about', component: About }]// 3. Tworzenie instancji routeraconst router = VueRouter.createRouter({  history: VueRouter.createWebHashHistory(),  routes})// 4. Dodanie routera do aplikacji Vueconst app = Vue.createApp({})app.use(router)app.mount('#app')

Nawigacja z Vue Router

Vue Router udostępnia komponent router-link, który umożliwia tworzenie linków nawigacyjnych. Aby wygenerować link, wystarczy przekazać ścieżkę do atrybutu to:

<router-link to="/">Strona główna</router-link><router-link to="/about">O nas</router-link>

Dynamiczny routing

Dynamiczny routing to potężny koncept, który pozwala na tworzenie bardziej złożonych ścieżek. Jest to szczególnie przydatne, gdy chcemy wyświetlać różne widoki w zależności od określonego parametru w URL.

const routes = [  { path: '/', component: Home },  { path: '/about', component: About },  { path: '/user/:id', component: User },]

W powyższym przykładzie, :id to dynamiczny segment ścieżki, który może przyjmować różne wartości. Komponent User będzie renderowany dla każdej ścieżki pasującej do wzorca /user/:id.

Nawigacja programistyczna

Oprócz nawigacji za pomocą linków, Vue Router umożliwia również nawigację programistyczną. Możemy to zrobić za pomocą metody push dostępnej na instancji routera:

router.push('/about')

Kontrola nawigacji

Vue Router umożliwia precyzyjną kontrolę nad nawigacją za pomocą tzw. strażników nawigacji (navigation guards). Strażniki nawigacji to funkcje, które są wywoływane przed wejściem na daną trasę, co pozwala na wykonywanie dodatkowej logiki, takiej jak sprawdzanie czy użytkownik jest zalogowany.

router.beforeEach((to, from, next) => {  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })  else next()})

Historia nawigacji

Vue Router obsługuje trzy tryby historii: HTML5, hash i memory. Tryb HTML5 wykorzystuje History API do manipulacji historią przeglądarki, hash korzysta z fragmentów URL, a memory przechowuje historię w pamięci i nie wpływa na URL.

Podsumowanie

Vue Router to potężne narzędzie, które umożliwia tworzenie skomplikowanych systemów routingu w aplikacjach Vue.js. Dzięki jego elastycznemu API, możliwości są niemal nieograniczone. Czy to prosty system routingu, czy zaawansowany system z dynamicznym routingiem, kontrolą nawigacji i różnymi trybami historii – Vue Router jest gotowy na wszystko.

Artykuł Routing w Vue.js – przewodnik po Vue Router pochodzi z serwisu TheForceCode - centrum wiedzy.

• Wprowadzenie do Angular
• Routing w Angular
• Lazy Loading w Angular
• Dependency Injection w Angular
• Wstrzykiwanie zależności
• Podsumowanie

Wprowadzenie do Angular

Angular to framework stworzony przez firmę Google, który umożliwia tworzenie nowoczesnych aplikacji internetowych. Dzięki swojej modułowej strukturze i zaawansowanym funkcjom, Angular jest często wybierany przez programistów jako narzędzie do tworzenia skalowalnych i wydajnych aplikacji.

Routing w Angular

Routing to proces określania, które komponenty powinny być wyświetlane w odpowiedzi na żądania użytkownika. W Angular, routing jest obsługiwany przez moduł RouterModule, który jest częścią pakietu @angular/router. Aby skorzystać z funkcji routingu w Angular, musimy najpierw skonfigurować odpowiednie ścieżki i komponenty.

Konfiguracja routingu

Aby skonfigurować routowanie w Angular, musimy utworzyć moduł AppRoutingModule, który będzie odpowiedzialny za zarządzanie ścieżkami aplikacji. W tym module definiujemy tablicę obiektów Routes, gdzie każdy obiekt reprezentuje jedną ścieżkę. Każda ścieżka składa się z pola path, które określa URL, oraz pola component, które wskazuje na komponent, który ma być wyświetlany dla tej ścieżki.

Przykład konfiguracji routingu w pliku app-routing.module.ts:

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'contact', component: ContactComponent }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

W powyższym przykładzie zdefiniowaliśmy trzy ścieżki: główną (”), about i contact. Dla każdej ścieżki wskazaliśmy odpowiedni komponent, który ma być wyświetlany.

Wyświetlanie komponentów w szablonach

Aby wyświetlić komponenty dla określonych ścieżek, musimy dodać odpowiednie elementy do szablonów naszej aplikacji. W głównym szablonie (app.component.html) należy dodać element , który będzie odpowiedzialny za wyświetlanie komponentów związanych z aktualną ścieżką.

W ten sposób Angular będzie w stanie dynamicznie wyświetlać odpowiednie komponenty w miejscu w zależności od aktualnej ścieżki.

Nawigacja między ścieżkami

Aby nawigować między różnymi ścieżkami w naszej aplikacji, możemy skorzystać z usługi Router, która jest dostarczana przez moduł RouterModule. Usługa Router udostępnia metody takie jak navigate, które umożliwiają programowe nawigowanie w naszej aplikacji.

Przykład nawigacji do ścieżki about:

import { Router } from '@angular/router'; @Component({ // ... }) export class HomeComponent { constructor(private router: Router) {} navigateToAbout() { this.router.navigate(['/about']); } }

W powyższym przykładzie użyliśmy metody navigate z usługi Router, aby nawigować do ścieżki /about.

Lazy Loading w Angular

Lazy Loading to technika, która umożliwia ładowanie modułów tylko wtedy, gdy są one potrzebne. Jest to szczególnie przydatne w przypadku aplikacji o dużej ilości modułów, gdzie ładowanie wszystkich modułów na starcie aplikacji może spowolnić jej działanie.

Konfiguracja Lazy Loadingu

Aby skorzystać z Lazy Loadingu w Angular, musimy odpowiednio skonfigurować nasze moduły. Zamiast importować moduły bezpośrednio do głównego modułu aplikacji, możemy zdefiniować ich ścieżki jako funkcje, które będą dynamicznie ładowane podczas nawigacji.

Przykład konfiguracji Lazy Loadingu w pliku app-routing.module.ts:

const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) }, { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }, { path: 'contact', loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule) }, ];

W powyższym przykładzie zdefiniowaliśmy trzy ścieżki, które korzystają z Lazy Loadingu. Dla każdej ścieżki użyliśmy metody loadChildren, która dynamicznie importuje moduł zdefiniowany w ścieżce.

Dzięki Lazy Loadingowi, moduły będą ładowane dopiero wtedy, gdy użytkownik nawiguje do odpowiedniej ścieżki, co pozwala zaoszczędzić czas ładowania i zwiększyć wydajność aplikacji.

Dependency Injection w Angular

Dependency Injection (DI) to technika, która umożliwia wstrzykiwanie zależności do komponentów, usług i innych obiektów w aplikacji Angular. Jest to ważna część architektury aplikacji Angular, która pozwala na lepszą separację warstw i testowanie kodu.

Rejestracja usług

Aby skorzystać z Dependency Injection w Angular, musimy najpierw zarejestrować nasze usługi. Rejestracja odbywa się poprzez dodanie obiektów usług do tablicy providers w odpowiednich modułach aplikacji.

Przykład rejestracji usługi w module:

@Injectable() export class DataService { // ... } @NgModule({ providers: [DataService] }) export class AppModule { }

W powyższym przykładzie zarejestrowaliśmy usługę DataService poprzez dodanie jej do tablicy providers w module AppModule. Dzięki temu usługa będzie dostępna dla innych komponentów i usług w całej aplikacji.

Wstrzykiwanie zależności

Aby skorzystać z zarejestrowanej usługi, musimy ją wstrzyknąć do konstruktora odpowiedniego komponentu lub usługi. Angular sam zarządza wstrzykiwaniem zależności, więc nie musimy martwić się o tworzenie i zarządzanie instancjami obiektów.

Przykład wstrzykiwania usługi w komponencie:

@Component({ // ... }) export class HomeComponent { constructor(private dataService: DataService) {} }

W powyższym przykładzie wstrzyknęliśmy usługę DataService do konstruktora komponentu HomeComponent. Angular automatycznie stworzy instancję usługi i przekaże ją do komponentu.

Dzięki Dependency Injection, możemy łatwo zarządzać zależnościami w naszej aplikacji i tworzyć modularny i testowalny kod.

Podsumowanie

W tym artykule zapoznaliśmy się z zaawansowanymi funkcjami Angular, takimi jak Routing, Lazy Loading i Dependency Injection. Wiedza na temat tych funkcji jest niezbędna dla programistów, którzy chcą tworzyć skalowalne i wydajne aplikacje w Angular.

Routing pozwala nam definiować ścieżki i nawigować między nimi w naszej aplikacji. Lazy Loading umożliwia ładowanie modułów tylko wtedy, gdy są one potrzebne, co przyspiesza czas ładowania i zwiększa wydajność. Dependency Injection umożliwia wstrzykiwanie zależności do naszych komponentów i usług, co ułatwia zarządzanie kodem i testowanie.

Angular to potężny framework, który oferuje wiele funkcji i możliwości. Dzięki korzystaniu z tych zaawansowanych funkcji, możemy tworzyć wydajne i skalowalne aplikacje internetowe.

Artykuł Zaawansowane funkcje Angular: Routing, Lazy Loading i Dependency Injection pochodzi z serwisu TheForceCode - centrum wiedzy.