Angular 2.0 Routing and Navigation

3. <script src="router.dev.js"></script>
import {
RouteConfig
, ROUTER_PROVIDERS
, ROUTER_DIRECTIVES
, HashLocationStrategy
, LocationStrategy
} from 'angular2/router';

4. 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 { }

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

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

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

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

9. <router-outlet>

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

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

12. @Component({ ... })
@RouteConfig([
{path:'/home' , name: 'Home' , component: HomeComp},
{path:'/products/...' , name: 'Products', component: ProductsComp},
{path:'/Users' , name: 'Users' , component: UsersComp} ])
export class AppComponent { }
@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 { }

13. App
Products
Product

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

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

16. @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');
}
}

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

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

20. canDeactivate
OnDeactivate
OnActivate
CanActivate

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

22. canReuse
OnReuse

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

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