Angular 2 router examples + @Routes typing support

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

<script src="node_modules/angular2/bundles/router.dev.js"></script>

than we have to add <base href="/"> just after the <head> 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 - 

<a [routerLink]="['./HomeCmp']">Hello Routing</a>

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

<a [routerLink]="['./HomeCmp', {key : value}]">Hello Routing</a>

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 - 

 <router-outlet></router-outlet>

@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

Main component and Class of Routing in Angular 2.

router-link – router-link directive is use to declare link into view . Its can contains optional parameters also.

Example : 

<a [router-link]="['/AboutUs']">About Us</a>

router-outlet – Its work as a placeholder for views to render then component. Means template and templateUrl will be render on that location where you will use router-outlet directive.

Example : 

<router-outlet></router-outlet>

@RouteConfig – We map URLs to components in this section which used inside the .

Example : 

@RouteConfig([
    {path: '/',        component: HomeComponent, as: 'Home'},
    {path: '/aboutus', component: AboutUsComponent, as: 'AboutUs'  }
    {path: '/contactus', component: ContactUsComponent, as: 'ContactUs'  }
])

RouteParams – Parameter to a component which rendered by the router.

Read this article for more http://www.codeandyou.com/2015/11/understand-routing-in-angular-2.html


The best I've seen thus far is https://github.com/angular-class/angular2-webpack-starter (it's with webpack as well - it's worth the effort IMHO) Also, it's with TypeScript support as well.

Also, based on the last link is my starter, which can be found here - https://github.com/EladRK/angular-starter


A helpful Angular 2 Router example. The concrete code can be found here.

Tags:

Typescript

Angular

Recent Posts