Download - Routing And Navigation
![Page 1: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/1.jpg)
Angular 2.0 Routing & Navigation
Eyal Vardi
Site: http://ng-course.org
Blog: eyalVardi.wordpress.com
![Page 2: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/2.jpg)
Agenda Routes Configuration Routing Strategies RouterOutlet & RouterLink Directives Link Parameters Array Route Guards Lazy loaded modules
![Page 3: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/3.jpg)
http://ev.com/
<router-outlet>
Component App
Home | Products | Users |
Products
<router-outlet>
Product 1
Product 2
Product 3
Product 4
Product 5
Product 6
Product 7
Product 8
products/product/1
<router-outlet>
Details | Price | Spec |
![Page 4: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/4.jpg)
Tree State
root
home products
product
price spec
users
![Page 5: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/5.jpg)
Routes Configuration The application will have one router. When the browser's URL changes, the router looks for a
corresponding Route from which it can determine the component to display.
export const appRoutes: Routes = [ { path:'home', component: HomeComponent }, { path:'products', component: ProductsComponent , children:[ { path: '' , component: NoneProductComponent }, { path: ':id' , component: ProductComponent} ] }, { path:'users', component: UsersComponent ,
children:[...] }];
![Page 6: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/6.jpg)
Route Interface path pathMatch component redirectTo outlet data resolve
children loadChildren canLoad canActivate canActivateChild canDeactivate
![Page 7: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/7.jpg)
Routing Strategies HashLocationStrategy ('#/') PathLocationStrategy (HTML 5 Mode)
@NgModule({
...
imports:[
RouterModule.forRoot(appRoutes, {useHash:true} ),
...
]
});
![Page 8: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/8.jpg)
Path Location Strategy (HTML 5 Mode) Must set base URL. How to set the base URL, 3 options:
Providers:[{ provide : APP_BASE_HREF , useValue: '/' }]
<script> document.write( '<base href="' + document.location + '" />');</script>
<base href="/" >1.
2.
3.
![Page 9: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/9.jpg)
RouterLink & RouterOutlet Directives
<router-outlet>
<a [routerLink]="['/Go']">Go</a>
Code : router.navigate( ['/Go'] );
HTML : <a [routerLink]="['/Go']">Go</a>
Component:
Template
![Page 10: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/10.jpg)
<router-outlet>
Component App
Home | Products | Users |
Products
<router-outlet>
Product 1
Product 2
Product 3
Product 4
Product 5
Product 6
Product 7
Product 8
<router-outlet>
Details | Price | Spec |
<a [routerLink]="[ '
products ','product',{id:1}]">http://
ev.com/products/product/1
![Page 11: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/11.jpg)
App
Products
Product
Link Parameters Array
['Products']
[routerLink]
['Products','Product']
[routerLink]
['./Product']
[routerLink]
[routerLink]
['/Products']
![Page 12: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/12.jpg)
Query Parameters We use route parameters to specify a
parameterized value within the route URL. URL query Route parameters object{path:'/:id', component:Product}
<a [routerLink]="['product', {id:1}]">Product 1</a>
router.navigate(['product' ,'{id:8}']);
![Page 13: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/13.jpg)
Getting The Route Parameter
@Component({...})export class User{ ... constructor( private route: ActivatedRoute ) {}
ngOnInit() { // Observable this.sub = this.route.params .map(params => params['id']) .subscribe( id => { this.selected = first; }); // snapshot // this.route.snapshot.params.id } ngOnDestroy() { this.sub.unsubscribe(); }}
the route params can change during the lifetime of this component.
![Page 14: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/14.jpg)
Matrix URL Notation Matrix URL notation is an idea first floated in a 1996
proposal by the founder of the web, Tim Berners-Lee.
Although matrix notation never made it into the HTML standard, it is legal and it became popular among browser routing systems as a way to isolate parameters belonging to parent and child routes.
<a [routerLink]="['Product', {id:1,foo:3}]">Product 1</a>
localhost:3000/product/;id=1;foo=foo
![Page 15: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/15.jpg)
RouteData
![Page 16: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/16.jpg)
Route Guards
![Page 17: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/17.jpg)
Route Interface path pathMatch component redirectTo outlet data resolve
children loadChildren canLoad canActivate canActivateChild canDeactivate
![Page 18: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/18.jpg)
CanActivateexport interface CanActivate { canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot) :
Observable<boolean> | Promise<boolean> | boolean;}
@Injectable()export class AuthGuard implements CanActivate { canActivate() { console.log('AuthGuard#canActivate called'); return true; }}
{ path: 'admin', component: AdminCmp, canActivate: [AuthGuard] }
// Route config
![Page 19: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/19.jpg)
CanDeactivateexport interface CanDeactivate<T> { canDeactivate(
component: T, route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
Observable<boolean> | Promise<boolean> | boolean;}
@NgModule({ imports: [ RouterModule.forRoot([{ path: 'team/:id', component: TeamCmp, canActivate: ['canDeactivateTeam'] }])], providers: [{ provide: 'canDeactivateTeam', useValue: (route:ActivatedRouteSnapshot, state:RouterStateSnapshot) => true}]})class AppModule {}
![Page 20: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/20.jpg)
View I
Cancelling Route Changes
View IICancel
OK
routerCanDeactivate(){ return new Promise<boolean>((resolve, reject) => resolve(window.confirm('Continue?')));}
![Page 21: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/21.jpg)
Resolve: pre-fetching dataclass Backend { fetchTeam(id: string){ return 'someTeam'; } }
@Injectable()class TeamResolver implements Resolve<Team> { constructor(private backend: Backend) {}
resolve( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ){ return this.backend.fetchTeam(route.params.id); }}
@NgModule({ imports: [ RouterModule.forRoot([{ path: 'team/:id', component: TeamCmp, resolve: { team: TeamResolver } }])], providers: [TeamResolver]})class AppModule {}
![Page 22: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/22.jpg)
Lazy Loaded Modules The AppModule (root,home,users) load
when the application bootstrap.
The ProductsModule load whenwe navigate to‘/products’
root
home products
product
price spec
users
![Page 23: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/23.jpg)
Load Childrenexport const appRoutes: Routes = [ { path:'home', component: HomeComponent }, { path:'products', loadChildren: 'app/products.module.js#ProductsModule'}, { path:'users', component: UsersComponent ,
children:[...] }];
export const productsRoutes: Routes = [ { path:'', component: ProductsComponent , children:[ { path: '' , component: NoneProductComponent }, { path: ':id' , component: ProductComponent} ] }];
// products.module.js
![Page 24: Routing And Navigation](https://reader033.vdocument.in/reader033/viewer/2022052705/5872b30c1a28ab523c8b5ec1/html5/thumbnails/24.jpg)
Thankseyalvardi.wordpress.com
Eyal Vardi
Site: http://ng-course.org
Blog: eyalVardi.wordpress.com