Trasowanie w Angular 2 - Instytut Informatyki Teoretycznej i

Transkrypt

Trasowanie w Angular 2
Tworzenie serwisów Web 2.0
dr inż. Robert Perliński
[email protected]
Politechnika Częstochowska
Instytut Informatyki Teoretycznej i Stosowanej
6 czerwca 2016
1/21
Plan prezentacji
1
Informacje ogólne
Komponent nawigacyjny
Komponent Router, konfiguracja
Parametry w adresie URL
Tablica parametrów odnośnika
2
Źródła
2/21
Angular 2
https://angular.io/
Warto polecić:
http://www.angular2.com/ - zbiór odnośników związanych z Angular 2
https://egghead.io/technologies/angular2 - przewodnik video po Angular 2
3/21
Trasowanie - Component Router
Component Router w Angular 2 umożliwia nawigowanie między widokami
zależnie od działań użytkownika.
Widoki związane z nawigacją odpowiadają różnym adresom URL.
Obecna dokumentacja opisuje przestarzały Component Router beta.
Jest on zastąpiony przez Component Router release candidate, do
którego dokumentacja dopiero powstaje.
Nawigacja w przeglądarce funkcjonuje poprzez:
wpisanie adresu URL,
kliknięcie odnośnika na stronie, w aplikacji,
kliknięcie przycisków Wstecz i Dalej.
4/21
Elementy związane z trasowaniem w Angular
Elementy związane z trasowaniem w Angular 2:
ustawienie bazowego odnośnika - base href,
importowanie bibliotek do trasowania,
konfigurowanie trasowania,
tablica z parametrami tras (ang. link parameters array ),
nawigowanie z użyciem dyrektywy RouterLink,
nawigowanie z wnętrza kodu aplikacji,
dołączanie informacji jako parametry w adresie URL,
ustawienie domyślnej trasy,
utworznie podrzędnego mechanizmu trasowania z własnymi trasami,
wykorzystanie wstawek programowych w związku z trasowaniem,
przekazywanie dodatkowych informacji w parametrach URL (ang.
query parameters),
obsługa dwóch stylów adresów URL (HTML5 i hash).
5/21
Terminy związane z trasowaniem I
Najważniejsze terminy związane z trasowaniem:
Router - wyświetla komponent aplikacji związany z aktualnym
adresem URL; obsługuje nawigację z jednego komponentu do
następnego,
@RouteConfig - konfiguruje mechanizm trasowania dzięki definicjom
tras (ang. RouteDefinitions), każda łączy adres URL z
komponentem,
definicje tras - określa jak mechanizm trasowania powinien przejść
do komponentu bazując na wzorcu adresu URL,
trasa (ang. Route) - najbardziej powszechna forma definicji trasy
składa się ze: ścieżki, nazwy trasy i typu komponentu,
RouterOutlet - dyrektywa <router-outlet> określająca, gdzie
mechanizm trasowania powinien wyświetlić widok.
6/21
Terminy związane z trasowaniem I
Najważniejsze terminy związane z trasowaniem:
RouterLink - dyrektywa wiążąca element HTML, który można klinkąć
z jedna z tras. Kliknięcie odnośnika z dyrektywą routerLink, która jest
połączona z Tablicą Parametrów Odnośnika wywołuje nawigację.
Tablica Parametrów Odnośnika (ang. Link Parameters Array ) tablica, którą mechanizm trasowania interpretuje jako instrukcje tras.
Można dowązać taką tablicę do dyrektywy RouterLink albo
przekazać taką tablicę do metody Router.navigate().
Komponent nawigacyjny - komponent Angulara, który ma
dołączone trasowanie.
7/21
Nadrzędny komponent odpowiedzialny za trasowanie
Główny komponent będzie prezentował opcje wyboru komponentu,
który chcemy wyświetlić.
Jeden z nich powinien być domyślnym komponentem
(useAsDefault: true).
Nadrzędny komponent (AppComponent) odpowiada tylko za
nawigację.
Taki komponent nazywamy wtedy komponentem nawigacyjnym
(ang. Router Component).
Komponent nadrzędny, nawigacyjny posiada:
linki nawigacyjne na górze strony,
obszar pod linkami wyświetlający wybrany komponent.
8/21
Nadrzędny komponent - przygotowanie usługi
app.compponent.ts
import { Component }
from '@angular/core';
import { HeroService }
from './hero.service';
import { HeroesComponent } from './heroes.component';
@Component({
selector: 'my-app',
template: ‘
<h1>{{title}}</h1>
<my-heroes></my-heroes>
‘,
directives: [ HeroesComponent ],
providers: [ HeroService ]
})
export class AppComponent {
title = 'Wprowadzenie o bohaterach';
}
Usługa pobierająca dane o bohaterach będzie w tablicy providers
tylko w nadrzędnym komponencie.
Cała aplikacja będzie miała jeden egzemplarz usługi HeroService.
9/21
Bazowy adres URL
Większość aplikacji powinna dodać element <base> do pliku
index.html na górze sekcji <head>.
Informuje to mechanizm trasowania (Router) jak składać adresy URL.
Jeśli folder app jest nadrzędnym katalogiem aplikacji to wartość href
ustawiamy:
index.html (fragment)
<head>
<base href="/">
...
</head>
10/21
Komponent Router
Komponent Router to usługa.
Importujemy ją i dodajemy do tablicy providers, żeby była dostępna.
Usługa Router w Angular 2 jest kombinacją:
wielu usług (ROUTER PROVIDERS),
wielu dyrektyw (ROUTER DIRECTIVES),
tablicy metadanych konfiguracji (RouteConfig)
app.compponent.ts (fragment)
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS }
from '@angular/router-deprecated';
...
@Component({
selector: 'my-app',
template: ‘<h1>{{title}}</h1> ...‘,
directives: [ ROUTER_DIRECTIVES ],
providers: [ ROUTER_PROVIDERS, HeroService ]
})
AppComponent nie potrzebuje już HeroesComponent.
Za wyświetlenie listy bohaterów będzie odpowiedzialny teraz Router.
11/21
Konfiguracja komponentu Router I
Utworzenie trasowania wymaga użycia dekoratora @RouteConfig.
W tablicy @RouteConfig jednocześnie:
przypisujemy mechanizm trasowania do komponentu,
określamy konkretną ścieżkę dla tego trasowania.
Uzyskujemy połączony adres URL z konkretnym widokiem.
@RouteConfig([
{
path: '/heroes',
name: 'Heroes',
component: HeroesComponent
}
])
path - dopasowuje adres z trasowania do tego w przeglądarce,
name - oficjalna nazwa danej trasy, musi być PascalCase,
component - komponent tworzony przez mechanizm trasowania po
wyborze danej trasy.
12/21
Konfiguracja komponentu Router II
{
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
useAsDefault: true
},
{
path: '/detail/:id',
name: 'HeroDetail',
component: HeroDetailComponent
}
useAsDefault - właściwość określająca, która z tras (jeśli żadna nie
zostanie dopasowana) ma zostać automatycznie wykorzystana,
:id - token określający parametr;
dla adresu /detail/23 wartością parametru id będzie "23".
13/21
Router Outlet czyli ”wyjście”trasowania
Gdzie mechanizm trasowania ma wyświetlić wybrany adres?
Położenie wybranego komponentu określamy znacznikiem
<router-outlet> w szablonie komponentu.
RouterOutlet to jedna z dyrektyw trasowania
(ROUTER DIRECTIVES).
@Component({
selector: 'my-app',
template: ‘
<h1>{{title}}</h1>
<nav>
<a [routerLink]="['Heroes']">Bohaterowie</a>
<a [routerLink]="['Dashboard']">Deska rozdzielcza</a>
</nav>
<router-outlet></router-outlet>
‘,
})
14/21
Odnośniki w trasowaniu
Chcielibyśmy móc wykorzystać zdefiniowane trasy w szablonie.
Dyrektywa RouterLink pozwala na wykorzystanie tablicy adresów.
Wstawiamy odnośnik do szablonu, podajemy nazwę trasy.
Informujemy mechanizm trasowania, który widok wczytać po
kliknięciu.
@Component({
selector: 'my-app',
template: ‘
<h1>{{title}}</h1>
<nav>
<a [routerLink]="['Dashboard']">Deska rozdzielcza</a>
</nav>
<router-outlet></router-outlet>
‘,
})
15/21
Nawigacja do adresu z parametrem
Mając komponent związany z określoną trasą możemy do niego
przechodzić z dowolnego miejsca aplikacji.
Dotyczy to również adresu z parametrem, np. /detail/:id.
Należy dodać obsługę parametrów trasowania:
hero-detail.compponent.ts (początek)
import { Component, OnInit } from '@angular/core';
import { RouteParams } from '@angular/router-deprecated';
import { Bohater } from './bohater';
import { HeroService } from './hero.service';
...
Importujemy też usługę - przekazane id wykorzystamy do pobrania
odpowiedniego bohatera.
Wykorzystujemy wstawkę OnInit - przy poprawnym adresie z
parametrem musimy pobrać bohatera po utworzeniu komponentu.
16/21
Komponent obsługujący adres z parametrem
Konstruktor komponentu HeroDetailComponent wykorzystuje dwie usługi.
Metoda get() usługi RouteParams zwraca wartość parametru jako string.
Metoda goBack() cofa o jedną pozycję w historii przeglądania.
hero-detail.component.ts
export class HeroDetailComponent implements OnInit {
hero: Bohater;
constructor(
private heroService: HeroService,
private routeParams: RouteParams) {
}
ngOnInit() {
let id = +this.routeParams.get('id'); // dodawanie - zmiena na liczbę...
this.heroService.getHero(id)
.then(hero => this.hero = hero);
}
goBack() {
window.history.back();
}
}
17/21
Komponent obsługujący adres z parametrem - szablon
Dla zdarzenia (click) przycisku Back mamy powrót do poprzedniej strony.
hero-detail.component.html
<div *ngIf="hero">
<h2>Informacje szczegółowe o {{hero.name}}!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>nazwa: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
</div>
<button (click)="goBack()">Back</button>
Przenieśliśmy cały szablon do osobnego pliku (właściwość templateUrl).
Metadane komponentu wyglądają następująco:
hero-detail.component.ts
@Component({
selector: 'my-hero-detail',
templateUrl: 'app/hero-detail.component.html',
styleUrls: ['app/hero-detail.component.css']
})
18/21
Nawigowanie do wybranego bohatera
W szablonie komponentu DashboardComponent wiążemy zdarzenie
kliknięcia z metodą gotoDetail().
dashboard.component.html
...
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)">
...
Metoda gotoDetail wewnątrz komponentu:
tworzy link - tablicę określającą adres URL i jego parametr,
przekazuje tablicę do mechanizmu trasowania - następuję nawigacja.
dashboard.component.ts
export class DashboardComponent implements OnInit {
...
gotoDetail(hero: Bohater) {
let link = ['HeroDetail', { id: hero.id }];
this.router.navigate(link);
}
}
19/21
Tablice z parametrami odnośnika
Komponent nadrzędny AppComponent zawierał odnośniki do tras,
które zawierały tylko jeden parametr.
Określał on nazwę trasy w konfiguracji mechanizmu trasowania:
app.component.ts
Tutaj tablica zawiera dwa elementy:
nazwę trasy w konfiguracji mechanizmu trasowania,
obiekt parametru trasy z polem id (numer id wybranego bohatera).
dashboard.component.ts
let link = ['HeroDetail', { id: hero.id }];
20/21
Źródła
https:
//angular.io/docs/ts/latest/guide/router-deprecated.html
https://angular.io/docs/ts/latest/tutorial/toh-pt5.html
21/21

Trasowanie w Angular 2 - Instytut Informatyki Teoretycznej i

Transkrypt

Podobne dokumenty

Laboratorium 10 – Angular 2

pc laptop drukarka switch router inne Kraków, dnia

Sprzęt informatyczny

Bezprzewodowy router kolejowy 4 × 3G plus Wi-Fi

Konfiguracja routera d-link

LevelOne Instrukcja Szybkiej Instalacji

Karta produktu ADSL-350