Angular 2.0 Routing and Navigation

import {bootstrap} from 'angular2/platform/browser';
import { ROUTER_PROVIDERS,
ROUTER_DIRECTIVES from 'angular2/router';
bootstrap(AppComponent, [
ROUTER_PROVIDERS
]);
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>',
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

import {bootstrap} from 'angular2/platform/browser';
import { ROUTER_PROVIDERS,ROUTER_DIRECTIVES,
HashLocationStrategy, LocationStrategy
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass:HashLocationStrategy})
]);

bootstrap( App, [ ROUTER_PROVIDERS,
provide( APP_BASE_HREF , { useValue: '/' }) ]);
<script>
document.write(
'<base href="' + document.location + '" />');
</script>
< href= >

<router-outlet>
<a [routerLink]="['Go']">Go</a>
Code : router.navigate( ['Go'] );
HTML : <a [routerLink]="['Go']">Go</a>
Template

@Component({ ... })
@RouteConfig([
{path:'/home‘ , name: 'Home' , component: Home},
{path:'/products' , name: 'Products', component: Products},
{path:'/users' , name: 'Users' , component: Users} ])

<router-outlet>
Products
<router-outlet>
products/
products ',

<router-outlet>
Products
<router-outlet>
products/ product/1
<router-outlet>
Details | Price | Spec |
products ', 'product',{id:1}]">

@Component({ ... })
@RouteConfig([
{path:'/home' , name: 'Home' , component: HomeComp},
{path:'/products/...' , name: 'Products', component: ProductsComp},
{path:'/Users' , name: 'Users' , component: UsersComp} ])
@Component({ ... })
@RouteConfig([
{path:'/product/:id/...',name: 'Product', component: ProductComp}])
export class ProductsComponent { }
@Component({ ... })
@RouteConfig([
{path:'/Details', name: 'Details',component: DetailsComp},
{path:'/Price' , name: 'Price' ,component: PriceComp},
{path:'/Spec' , name: 'Spec' ,component: SpecComp} ])
export class ProductComponent { }

{path:'/:id', name:'Product', component:Product}
<a [routerLink]="['Product', {id:1}]">Product 1</a>
router.navigate(['Product' ,'{id:8}']);

@Component({ template: 'user: {{id}}' })
class UserCmp {
id: string;
constructor(params: RouteParams) {
this.id = params.get('id');
}
}

@Component({...})
@View({directives: [ROUTER_DIRECTIVES]})
@RouteConfig([{
path: '/user/:id'
, component: UserCmp
, as: 'UserCmp'
, data: {isAdmin: true}
}])
class AppCmp {}
@Component({ template: 'user: {{isAdmin}}' })
class UserCmp {
string: isAdmin;
constructor(data: RouteData) {
this.isAdmin = data.get('isAdmin');
}
}

import {Component} from 'angular2/core';
import {Router,ROUTER_DIRECTIVES,RouteConfig
@Component({directives: [ROUTER_DIRECTIVES]})
@RouteConfig([{...}])
class AppCmp {
constructor(router: Router) {
var instruction = router.generate(['/MyRoute']);
router.navigateByInstruction(instruction);
}
}

<a [routerLink]="['Product', {id:1,foo:3}]">Product 1</a>
localhost:3000/product/;id=1;foo=foo

canDeactivate
OnDeactivate
OnActivate
CanActivate

@CanActivate((next, prev) => boolean | Promise<boolean>)
Sample:
@Component({
selector: 'control-panel-cmp‘
, template: `<div>Settings: ...</div>`
})
@CanActivate(checkIfWeHavePermission)
class ControlPanelCmp {
}

View I View II
routerCanDeactivate( next: ComponentInstruction,
prev: ComponentInstruction) : any {
return new Promise<boolean>((resolve, reject) =>
resolve(window.confirm('Continue?')));
}

@RouteConfig([
new AsyncRoute({
path: '/home',
loader: () => System.import('./Home').then(m=>m['Home']),
name: 'Home'
}),
{path:'/users/...', name: 'Users', component: Users}
])
export class App { }

Angular 2.0 Routing and Navigation

Angular 2.0 Routing and Navigation

More Related Content

What's hot

Viewers also liked

Similar to Angular 2.0 Routing and Navigation

More from Eyal Vardi

Recently uploaded

Angular 2.0 Routing and Navigation