Submit Search
Upload
Angular 2.0 Routing and Navigation
•
Download as PPTX, PDF
•
4 likes
•
2,458 views
Eyal Vardi
Follow
Angular 2.0 Routing and Navigation
Read less
Read more
Software
Report
Share
Report
Share
1 of 25
Download now
Recommended
Routing And Navigation
Routing And Navigation
Eyal Vardi
Upgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.x
Eyal Vardi
Angular 2.0 Dependency injection
Angular 2.0 Dependency injection
Eyal Vardi
Angular 2.0 forms
Angular 2.0 forms
Eyal Vardi
Angular js routing options
Angular js routing options
Nir Kaufman
Http Communication in Angular 2.0
Http Communication in Angular 2.0
Eyal Vardi
Modules and injector
Modules and injector
Eyal Vardi
AngularJS Internal
AngularJS Internal
Eyal Vardi
Recommended
Routing And Navigation
Routing And Navigation
Eyal Vardi
Upgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.x
Eyal Vardi
Angular 2.0 Dependency injection
Angular 2.0 Dependency injection
Eyal Vardi
Angular 2.0 forms
Angular 2.0 forms
Eyal Vardi
Angular js routing options
Angular js routing options
Nir Kaufman
Http Communication in Angular 2.0
Http Communication in Angular 2.0
Eyal Vardi
Modules and injector
Modules and injector
Eyal Vardi
AngularJS Internal
AngularJS Internal
Eyal Vardi
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)
Eyal Vardi
AngularJS - Services
AngularJS - Services
Nir Kaufman
Workshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte II
Visual Engineering
Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte III
Visual Engineering
AngularJS $Provide Service
AngularJS $Provide Service
Eyal Vardi
Practical AngularJS
Practical AngularJS
Wei Ru
How routing works in angular js
How routing works in angular js
codeandyou forums
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Dan Wahlin
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
Visual Engineering
Angular 2 NgModule
Angular 2 NgModule
Eyal Vardi
Angular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time Compilation
Eyal Vardi
Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJS
Visual Engineering
AngularJS Directives
AngularJS Directives
Eyal Vardi
AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.
Yan Yankowski
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
Dan Wahlin
Angular js
Angular js
Behind D Walls
준비하세요 Angular js 2.0
준비하세요 Angular js 2.0
Jeado Ko
The AngularJS way
The AngularJS way
Boyan Mihaylov
Performance Optimization In Angular 2
Performance Optimization In Angular 2
Eyal Vardi
Solid angular
Solid angular
Nir Kaufman
Angular 2.0 Pipes
Angular 2.0 Pipes
Eyal Vardi
Angular 1.x vs. Angular 2.x
Angular 1.x vs. Angular 2.x
Eyal Vardi
More Related Content
What's hot
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)
Eyal Vardi
AngularJS - Services
AngularJS - Services
Nir Kaufman
Workshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte II
Visual Engineering
Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte III
Visual Engineering
AngularJS $Provide Service
AngularJS $Provide Service
Eyal Vardi
Practical AngularJS
Practical AngularJS
Wei Ru
How routing works in angular js
How routing works in angular js
codeandyou forums
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Dan Wahlin
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
Visual Engineering
Angular 2 NgModule
Angular 2 NgModule
Eyal Vardi
Angular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time Compilation
Eyal Vardi
Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJS
Visual Engineering
AngularJS Directives
AngularJS Directives
Eyal Vardi
AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.
Yan Yankowski
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
Dan Wahlin
Angular js
Angular js
Behind D Walls
준비하세요 Angular js 2.0
준비하세요 Angular js 2.0
Jeado Ko
The AngularJS way
The AngularJS way
Boyan Mihaylov
Performance Optimization In Angular 2
Performance Optimization In Angular 2
Eyal Vardi
Solid angular
Solid angular
Nir Kaufman
What's hot
(20)
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)
AngularJS - Services
AngularJS - Services
Workshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte II
Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte III
AngularJS $Provide Service
AngularJS $Provide Service
Practical AngularJS
Practical AngularJS
How routing works in angular js
How routing works in angular js
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
Angular 2 NgModule
Angular 2 NgModule
Angular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time Compilation
Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJS
AngularJS Directives
AngularJS Directives
AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.
AngularJS in 60ish Minutes
AngularJS in 60ish Minutes
Angular js
Angular js
준비하세요 Angular js 2.0
준비하세요 Angular js 2.0
The AngularJS way
The AngularJS way
Performance Optimization In Angular 2
Performance Optimization In Angular 2
Solid angular
Solid angular
Viewers also liked
Angular 2.0 Pipes
Angular 2.0 Pipes
Eyal Vardi
Angular 1.x vs. Angular 2.x
Angular 1.x vs. Angular 2.x
Eyal Vardi
Angular 2 Routing
Angular 2 Routing
Andres Ciceri
Async & Parallel in JavaScript
Async & Parallel in JavaScript
Eyal Vardi
Template syntax in Angular 2.0
Template syntax in Angular 2.0
Eyal Vardi
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
Eyal Vardi
AngulrJS Overview
AngulrJS Overview
Eyal Vardi
Node.js Socket.IO
Node.js Socket.IO
Eyal Vardi
Node.js File system & Streams
Node.js File system & Streams
Eyal Vardi
Node js overview
Node js overview
Eyal Vardi
Node.js Event Emitter
Node.js Event Emitter
Eyal Vardi
Angular 2.0 Views
Angular 2.0 Views
Eyal Vardi
Nodejs
Nodejs
Eyal Vardi
Node.js Spplication Scaling
Node.js Spplication Scaling
Eyal Vardi
Modules in ECMAScript 6.0
Modules in ECMAScript 6.0
Eyal Vardi
AngularJS Routing
AngularJS Routing
Eyal Vardi
Making use of OpenStreetMap data with Python
Making use of OpenStreetMap data with Python
Andrii Mishkovskyi
Rachel's grandmother's recipes
Rachel's grandmother's recipes
Eyal Vardi
ECMAScript 6: A Better JavaScript for the Ambient Computing Era
ECMAScript 6: A Better JavaScript for the Ambient Computing Era
Allen Wirfs-Brock
Angular 2 Architecture
Angular 2 Architecture
Eyal Vardi
Viewers also liked
(20)
Angular 2.0 Pipes
Angular 2.0 Pipes
Angular 1.x vs. Angular 2.x
Angular 1.x vs. Angular 2.x
Angular 2 Routing
Angular 2 Routing
Async & Parallel in JavaScript
Async & Parallel in JavaScript
Template syntax in Angular 2.0
Template syntax in Angular 2.0
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
AngulrJS Overview
AngulrJS Overview
Node.js Socket.IO
Node.js Socket.IO
Node.js File system & Streams
Node.js File system & Streams
Node js overview
Node js overview
Node.js Event Emitter
Node.js Event Emitter
Angular 2.0 Views
Angular 2.0 Views
Nodejs
Nodejs
Node.js Spplication Scaling
Node.js Spplication Scaling
Modules in ECMAScript 6.0
Modules in ECMAScript 6.0
AngularJS Routing
AngularJS Routing
Making use of OpenStreetMap data with Python
Making use of OpenStreetMap data with Python
Rachel's grandmother's recipes
Rachel's grandmother's recipes
ECMAScript 6: A Better JavaScript for the Ambient Computing Era
ECMAScript 6: A Better JavaScript for the Ambient Computing Era
Angular 2 Architecture
Angular 2 Architecture
Similar to Angular 2.0 Routing and Navigation
Angular2RoutingSetupByShubham
Angular2RoutingSetupByShubham
Shubham Verma
Understand routing in angular 2
Understand routing in angular 2
codeandyou forums
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Frost
ngNewRouter
ngNewRouter
phidong
Introduction to Angular2
Introduction to Angular2
Ivan Matiishyn
هیبرید کارا، از رویا تا واقعیت!
هیبرید کارا، از رویا تا واقعیت!
Web Standards School
Angular 2
Angular 2
alinabiliashevych
How to Implement Middleware Pipeline in VueJS.pdf
How to Implement Middleware Pipeline in VueJS.pdf
Katy Slemon
What is your money doing?
What is your money doing?
Alfonso Fernández
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
William Marques
Angular routing
Angular routing
Sultan Ahmed
angular fundamentals.pdf angular fundamentals.pdf
angular fundamentals.pdf angular fundamentals.pdf
NuttavutThongjor1
8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!
Laurent Duveau
Technozaure - Angular2
Technozaure - Angular2
Demey Emmanuel
Commit University - Exploring Angular 2
Commit University - Exploring Angular 2
Commit University
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Ontico
はじめてのAngular2
はじめてのAngular2
Kenichi Kanai
Node.js server-side rendering
Node.js server-side rendering
The Software House
ChtiJUG - Introduction à Angular2
ChtiJUG - Introduction à Angular2
Demey Emmanuel
Angular2 - In Action
Angular2 - In Action
Sebastian Pożoga
Similar to Angular 2.0 Routing and Navigation
(20)
Angular2RoutingSetupByShubham
Angular2RoutingSetupByShubham
Understand routing in angular 2
Understand routing in angular 2
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
ngNewRouter
ngNewRouter
Introduction to Angular2
Introduction to Angular2
هیبرید کارا، از رویا تا واقعیت!
هیبرید کارا، از رویا تا واقعیت!
Angular 2
Angular 2
How to Implement Middleware Pipeline in VueJS.pdf
How to Implement Middleware Pipeline in VueJS.pdf
What is your money doing?
What is your money doing?
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
Angular routing
Angular routing
angular fundamentals.pdf angular fundamentals.pdf
angular fundamentals.pdf angular fundamentals.pdf
8 things you didn't know about the Angular Router, you won't believe #6!
8 things you didn't know about the Angular Router, you won't believe #6!
Technozaure - Angular2
Technozaure - Angular2
Commit University - Exploring Angular 2
Commit University - Exploring Angular 2
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
はじめてのAngular2
はじめてのAngular2
Node.js server-side rendering
Node.js server-side rendering
ChtiJUG - Introduction à Angular2
ChtiJUG - Introduction à Angular2
Angular2 - In Action
Angular2 - In Action
More from Eyal Vardi
Why magic
Why magic
Eyal Vardi
Smart Contract
Smart Contract
Eyal Vardi
Proxies in ECMAScript 6.0
Proxies in ECMAScript 6.0
Eyal Vardi
Iterators & Generators in ECMAScript 6.0
Iterators & Generators in ECMAScript 6.0
Eyal Vardi
Symbols in ECMAScript 6.0
Symbols in ECMAScript 6.0
Eyal Vardi
Objects & Classes in ECMAScript 6.0
Objects & Classes in ECMAScript 6.0
Eyal Vardi
Scope & Functions in ECMAScript 6.0
Scope & Functions in ECMAScript 6.0
Eyal Vardi
Node.js Express
Node.js Express
Eyal Vardi
More from Eyal Vardi
(8)
Why magic
Why magic
Smart Contract
Smart Contract
Proxies in ECMAScript 6.0
Proxies in ECMAScript 6.0
Iterators & Generators in ECMAScript 6.0
Iterators & Generators in ECMAScript 6.0
Symbols in ECMAScript 6.0
Symbols in ECMAScript 6.0
Objects & Classes in ECMAScript 6.0
Objects & Classes in ECMAScript 6.0
Scope & Functions in ECMAScript 6.0
Scope & Functions in ECMAScript 6.0
Node.js Express
Node.js Express
Recently uploaded
WSO2CON 2024 - Not Just Microservices: Rightsize Your Services!
WSO2CON 2024 - Not Just Microservices: Rightsize Your Services!
WSO2
WSO2CON 2024 - Designing Event-Driven Enterprises: Stories of Transformation
WSO2CON 2024 - Designing Event-Driven Enterprises: Stories of Transformation
WSO2
WSO2CON 2024 - Building a Digital Government in Uganda
WSO2CON 2024 - Building a Digital Government in Uganda
WSO2
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2
WSO2Con2024 - From Blueprint to Brilliance: WSO2's Guide to API-First Enginee...
WSO2Con2024 - From Blueprint to Brilliance: WSO2's Guide to API-First Enginee...
WSO2
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the past
Papp Krisztián
What Goes Wrong with Language Definitions and How to Improve the Situation
What Goes Wrong with Language Definitions and How to Improve the Situation
Juha-Pekka Tolvanen
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Bert Jan Schrijver
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
masabamasaba
WSO2Con2024 - Organization Management: The Revolution in B2B CIAM
WSO2Con2024 - Organization Management: The Revolution in B2B CIAM
WSO2
WSO2CON 2024 - How CSI Piemonte Is Apifying the Public Administration
WSO2CON 2024 - How CSI Piemonte Is Apifying the Public Administration
WSO2
WSO2Con2024 - GitOps in Action: Navigating Application Deployment in the Plat...
WSO2Con2024 - GitOps in Action: Navigating Application Deployment in the Plat...
WSO2
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2
Evolving Data Governance for the Real-time Streaming and AI Era
Evolving Data Governance for the Real-time Streaming and AI Era
confluent
Announcing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK Software
Jim McKeeth
WSO2CON 2024 Slides - Open Source to SaaS
WSO2CON 2024 Slides - Open Source to SaaS
WSO2
WSO2CON 2024 - How to Run a Security Program
WSO2CON 2024 - How to Run a Security Program
WSO2
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2
WSO2Con204 - Hard Rock Presentation - Keynote
WSO2Con204 - Hard Rock Presentation - Keynote
WSO2
Recently uploaded
(20)
WSO2CON 2024 - Not Just Microservices: Rightsize Your Services!
WSO2CON 2024 - Not Just Microservices: Rightsize Your Services!
WSO2CON 2024 - Designing Event-Driven Enterprises: Stories of Transformation
WSO2CON 2024 - Designing Event-Driven Enterprises: Stories of Transformation
WSO2CON 2024 - Building a Digital Government in Uganda
WSO2CON 2024 - Building a Digital Government in Uganda
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2CON 2024 - WSO2's Digital Transformation Journey with Choreo: A Platforml...
WSO2Con2024 - From Blueprint to Brilliance: WSO2's Guide to API-First Enginee...
WSO2Con2024 - From Blueprint to Brilliance: WSO2's Guide to API-First Enginee...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the past
What Goes Wrong with Language Definitions and How to Improve the Situation
What Goes Wrong with Language Definitions and How to Improve the Situation
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
WSO2Con2024 - Organization Management: The Revolution in B2B CIAM
WSO2Con2024 - Organization Management: The Revolution in B2B CIAM
WSO2CON 2024 - How CSI Piemonte Is Apifying the Public Administration
WSO2CON 2024 - How CSI Piemonte Is Apifying the Public Administration
WSO2Con2024 - GitOps in Action: Navigating Application Deployment in the Plat...
WSO2Con2024 - GitOps in Action: Navigating Application Deployment in the Plat...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
Evolving Data Governance for the Real-time Streaming and AI Era
Evolving Data Governance for the Real-time Streaming and AI Era
Announcing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK Software
WSO2CON 2024 Slides - Open Source to SaaS
WSO2CON 2024 Slides - Open Source to SaaS
WSO2CON 2024 - How to Run a Security Program
WSO2CON 2024 - How to Run a Security Program
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2Con204 - Hard Rock Presentation - Keynote
WSO2Con204 - Hard Rock Presentation - Keynote
Angular 2.0 Routing and Navigation
1.
2.
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
19.
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 { }
Download now