Frontend 5

5.
Angular Routing i navigacija

5.1. Osnove
Angular Router omogućava navigaciju (rutiranje) između različitih prikaza (view). Prikaz je
najmanja grupa elemenata za prikaz koji se mogu kreirati i poništiti kao celina, a prikazom
upravlјaju jedna ili više direktiva, uglavnom direktiva komponenti i njihovih HTML šablona.
Pre Angular-a veb pregledači (browser, pretraživač) su poznavali nekoliko modela navigacije:
 Korisnik unosi URL u adresno polјe i pretraživač prikazuje odgovarajuću stranu;
 Korisnik klikne mišem na određeni element na strani (najčešće anchor) kako bi otvorio
novu stranu;
 Korisnik klikne na Back ili Forward taster pretraživača kako bi otvorio neku od ranije
otvaranih strana.
Angular Router je preuzeo ovaj model i može da interpretira URL kao instrukciju za otvaranje
određenog prikaza, a može da prosledi i opcione parametre komponenti odgovornoj za taj
prikaz, na osnovu kojih se prikazuju određeni podaci. Router se takođe može povezati sa
određenim linkovima na strani, tako da korisnik može jednostavnim klikom mišem da dobije
određeni prikaz.
Za početak je važno podesiti <base href> atribut na glavnoj (index.html) stranici, unutar
<head> elementa, kako bi ruter mogao da pravilno kreira linkove. Ako je app glavni
direktorijum aplikacije, tada je href atribut <base> elementa:
<base href="/">
Angular Router je opcioni servis koji daje prikaz (view) određene komponente za dati URL. Nije
deo Angular core, već ima svoj paket „@angular/router“, koji je potrebno importovati, kao i
bilo koji drugi Angular paket:
import { RouterModule, Routes } from '@angular/router';
Angular aplikacija sa rutiranjem ima jednu singleton instancu Router servisa. Kada se u
pretraživaču promeni URL, taj servis traži odgovarajuću rutu za koju može odrediti koju
komponentu da prikaže.
Međutim, ruter nema nijednu rutu, pa je potrebno dodati bar jednu rutu:
RouterModule.forRoot([
{
path: 'new-cmp',
component: NewCmpComponent
}
])
Metoda forRoute kao ulazni parametar uzima niz objekata od kojih svaki sadrži putanju
(path) i komponentu. Putanja je naziv rutera, a komponenta je naziv klase, tj. komponente
koja se prikazuje za tu putanju. Ta komponenta je npr.
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-new-cmp',
templateUrl: './new-cmp.component.html',
styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {

newcomponent = "Entered in new component created";
constructor() {}
ngOnInit() { }}
Za ovu komponentu definišemo HTML i CSS fajlove, kao i za druge komponente.

Kada se koristi Angular CLI za generisanje projekta i dodavanje komponenti projektu,
automatski se generišu HTML šabloni i CSS fajlovi (vrednosti za templateUrl i styleUrls), i takav
pristup treba koristiti uvek kada je sadržaj šablona većeg obima. Međutim, za manji sadržaj
(npr. tekst od nekoliko reči u naslovu i sl.) može se koristiti inline HTML sadržaj u samoj
komponenti, gde se umesto templateUrl atributa koristi template: npr.
template: '<h1>Hey guys!</h1>'
Unutar ovakvih šablona se mogu koristiti Angular podaci koji su definisan u samoj komponent
klasi:
@Component({
// Other component properties removed
template: `
<h1>Hey guys!</h1>
<p>{{ myObject.gender }}</p>
`,
})
Takođe, možemo koristiti *ngIf i else direktive za uslovni prikaz šablona:

<li *ngIf="myArr">Yeah, I exist.</li>
ili:
template: `
<h1>Hey guys!</h1>
<ul>
<li *ngIf="myArr; else otherTmpl">Yeah, I exist.</li>
</ul>
<ng-template #otherTmpl>No, I do.</ng-template>

`,
gde je unutar li elementa otherTmpl definiše lokalnu promenlјivu koja se referencira unutar
ng-template elementa. Takođe je moguće koristiti then za definisanje dva šablona:
template: `
<h1>Hey guys!</h1>
<div *ngIf="myArr; then tmpl1 else tmpl2"></div>
<ng-template #tmpl1>I'm here</ng-template>

<ng-template #tmpl2>I'm not here</ng-template>
`,
Pretpostavimo da smo u glavni modul dodali ruter, kao u sledećem kodu:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';

import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'new-cmp',
component: NewCmpComponent
}
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Sada je potrebno dodati komponentu NewCmpComponent:

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-new-cmp',
templateUrl: './new-cmp.component.html',
styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
newcomponent = "Entered in new component created";
constructor() {}
ngOnInit() { }
}
čime se dobija i automatski generisan HTML šablon ako se koristi Angular CLI:
<p>
{{newcomponent}}
</p>
<p>
new-cmp works!
</p>
Ovaj šablon možemo modifikovati npr. na sledeći način:
<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>
<br />
<br />
<br />
<a routerLink = "new-cmp">New component</a>
<br />
<br/>
<router-outlet></router-outlet>
Preko routerLink atributa u anchor elementu definišemo koja komponenta će biti prikazana
unutar router-outlet elementa kada korisnik klikne na taj anchor (URL link).
Primećujemo da postoji sqrt pipe, koji nije predefinisan u Angular-u, već se radi o custom pipe,
koji je definisan u app.sqrt fajlu:
import {Pipe, PipeTransform} from '@angular/core';

@Pipe ({
name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
transform(val : number) : number {
return Math.sqrt(val);
}
}
Detalјe za ovaj primer možete pogledati u materijalu „Angular 4 Tutorial“ u sekciji Routing,
kao i ostale sekcije, jer je na relativno jednostavan način opisano sve što je dato u primeru na
sajtu https://angular.io.
Takođe, detaljniji tutorijal je po ceni od $9.99 dostupan na TutorialsPoint sajtu:
https://www.tutorialspoint.com/fundamentals-of-angular/index.asp
U realnom slučaju, potrebno je definisati i podrazumevanu putanju za sve druge slučajeve koji
se ne poklapaju sa predefinisanim rutama (nepostojeći URL), što se postiže sa:
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{
path: 'heroes',
component: HeroListComponent,
data: { title: 'Heroes List' }
},
{ path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
Ovde je dodato još putanja kako bi se prikazale neke dodatne mogućnosti rutera. Na primer,
putanja „her/:id“ sadrži dodatni parametar koji će biti prosleđen komponenti koja se
prikazuje. Takođe, data atribut se koristi za čuvanje određenih podataka za tu rutu, na primer
to mogu biti naslovi, breadcrumb (vrsta navigacije) tekst i drugih statičkih podataka. Ako je
putanja prazna, tj. URL je jednak adresi aplikacije, mora se prikazati neka komponenta, u ovom
slučaju, recimo, hoćemo da se prikaže lista heroja, pa umesto da navedemo
HeroeListComponent, vršimo prosleđivanje na tu putanju pomoću redirectTo atributa. Na
kraju, prazna putanja, označena sa „**“, označava putanju koju će ruter odabrati u slučaju da
se zadati URL (od strane korisnika preko adresnog polјa ili preko nekog linka iz same aplikacije)
ne poklapa sa putanjom nijedne druge rute.
Redosled zadatih ruta je bitan, jer se pretraživanje putanja vrši zadatim redosledom ruta.
Više detalјa o rutama i navigaciji možete pogledati ovde.
Nastavlјamo sa primerom datim na pomenutom sajtu u sekciji 5. Add Navigation, u posebnom

dokumentu Frontend_5 - Primer.pdf.

Frontend 5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Frontend 5

Uploaded by

Copyright:

Available Formats

5.

Angular Routing i navigacija

import { Component, OnInit } from '@angular/core';

export class NewCmpComponent implements OnInit {

Za ovu komponentu definišemo HTML i CSS fajlove, kao i za druge komponente.

Takođe, možemo koristiti *ngIf i else direktive za uslovni prikaz šablona:

<ng-template #otherTmpl>No, I do.</ng-template>

<ng-template #tmpl1>I'm here</ng-template>

Pretpostavimo da smo u glavni modul dodali ruter, kao u sledećem kodu:

import { AppComponent } from './app.component';

Sada je potrebno dodati komponentu NewCmpComponent:

Ovaj šablon možemo modifikovati npr. na sledeći način:

import {Pipe, PipeTransform} from '@angular/core';

Više detalјa o rutama i navigaciji možete pogledati ovde.

Nastavlјamo sa primerom datim na pomenutom sajtu u sekciji 5. Add Navigation, u posebnom

You might also like