Angular 2 router examples + @Routes typing support

Question

I am trying to find a concrete example on how to use the router in Angular 2. Furthermore the current angular2.d.ts typing file from the 5 min quickstart does

Answer 1

Basic Routing in Angular2 (Updated to Beta)

Firstly to setup the routing in angular2 you have to import the router file in your main file index.html i.e

than we have to add just after the tag in index.html to tell router how to compose navigation URLs. by doing so we just setteled up the basic configuration for routing in angular.

Now its time to configur the routing, te setup our routers according to need, basically we need three basic things those are -

• routerLink
• router-outlet
• and @RouteConfig

routerLink -

RouterLink expects the value to be an array of route names, followed by the params for that level of routing.

Quoted from the official's

The first route name should be prepended with /, ./, or ../. If the route begins with /, the router will look up the route from the root of the app. If the route begins with ./, the router will instead look in the current component's children for the route. And if the route begins with ../, the router will look at the current component's parent

we define routerLink like this -

Hello Routing

Here we can provide parameter along with routing those are optional, also we can provide child route from here. parameter like this -

Hello Routing

router-outlet

A router outlet is a placeholder where routing data is to be displayed on display.there are also exist another type of router-outlet called as aux route. can be used like this -

@RouteConfig

There are various property's exist on the routConfig like, path, name, component etc. When the browser's URL changes, the router looks for a corresponding RouteDefinition from which it can determine the component to display.

• path - is used to define whihc is shown as url in the address bar of browser.

• name - should be used as the name while defining routerLink name.

• component - means whihc compoent to be load while this route is active.

• useDefaultAs - set true if we want to set this as default route.

example is -

@RouteConfig([
  {path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent, useDefaultAs : true}
])

For more information see also -

• https://angular.io/docs/ts/latest/guide/router.html
• http://blog.thoughtram.io/angular/2015/06/16/routing-in-angular-2.html
• http://blog.ng-book.com/basic-routing-in-angular-2/

for child routing see also -

• How to use child routes in Angular 2

UPDATE TO ANGULAR2 RC

There are alot of changes has been made in routing in angular2 after RC some of them points i am going to mention here may help someone :-

1. angular2/router has been changed with @angular/router (also you can use old functionality of routing using import of @angular/router-deprecated but as of now we have to use @angular/router).

2. @RouteConfig has been changed with @Routes .

for example :-

@Routes([
  {path: '/crisis-center', component: CrisisListComponent},
  {path: '/heroes',        component: HeroListComponent}
])

Rest ill update soon my answer as per update in changelog.

• Best Article for new @Route update to angular2 RC