Understand Routing in Angular 2

avatar
by Virender
November 4, 2015
Angular 2 still in development phase. Routing is important part of any SPA (Single Page Application). Angular 2 provide an easy way to implement routing. 
Angular 2 supports both location strategies using its classes HashLocationStrategy and PathLocationStrategy. HashLocationStrategy handle by adding the hash sign to the URL and pushState() method.
Angular 2 identified by the tags <router-link></router-link>
Angular 2 use HTML5 APIs to programmatically support the Back and Forward buttons and pushState() check the state of URL. User’s navigations history maintain on client side. If view already loaded into memory then request not goes to the server.
Today I am giving example of Angular 2 routing using HashLocationStrategy.

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 <router-link></router-link>.

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.

Steps for use routing in Angular 2

1. Add Angular 2 routing library into your html file https://code.angularjs.org/2.0.0-alpha.45/router.dev.js 

<script src=”https://code.angularjs.org/2.0.0-alpha.45/router.dev.js”></script>
2. Import all routing directive and classes from ‘angular2/router’
import {RouteConfig,  ROUTER_DIRECTIVES, ROUTER_PROVIDERS,
        LocationStrategy, HashLocationStrategy} from ‘angular2/router’;
3. Map URLs in @RouteConfig 
@RouteConfig([
    {path: ‘/’,        component: HomeComponent, as: ‘Home’},
    {path: ‘/aboutus’, component: AboutUsComponent, as: ‘AboutUs’  }
    {path: ‘/contactus’, component: ContactUsComponent, as: ‘ContactUs’  }
])
4. In main root component use router-outlet where you want render components
<router-outlet></router-outlet>
5. Define router-link for which component you want to show  
 <router-link></router-link>.
Index.html
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
    <title>Angular2 Basic Routing with Hash-based Navigation Example</title>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="config.js"></script>
    <script>
        System.import('./app.ts');
    </script>
</head>
<body>
    <mainroot></mainroot>
</body>
</html>
<!DOCTYPE html>
<html>

<head>
<title>Angular2 Basic Routing with Hash-based Navigation Example</title>

<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>

<script src="config.js"></script>

<script src="https://code.angularjs.org/2.0.0-alpha.45/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.45/router.dev.js"></script>

<script>
System.import('./app.ts');
</script>

</head>

<body>
<mainroot></mainroot>
</body>

</html>

app.ts

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import {Component, bootstrap, provide} from 'angular2/angular2';
import {RouteConfig,  ROUTER_DIRECTIVES, ROUTER_PROVIDERS,
        LocationStrategy, HashLocationStrategy} from 'angular2/router';
// Home Component
@Component({
    selector: 'home',
    template: '<h2>Welcome to <a href="http://www.codeandyou.com" target="_blank"> www.codeandyou.com </a></h2>',
    styles: ['.home {background: red}'],
})
export class HomeComponent {}
// About Us Component
@Component({
    selector: 'aboutus',
    templateUrl: 'aboutUs.html'
})
    
export class AboutUsComponent {}
// Contact Us Component
@Component({
    selector: 'contactUs',
    template:'<h2>Contact Us</h2>'
})
    
export class ContactUsComponent {}
// Root Component
@Component({
    selector: 'mainroot',
    template: `<div class="grayColor"><a [router-link]="['/Home']">Home</a>
              <a [router-link]="['/AboutUs']">About Us</a>
              <a [router-link]="['/ContactUs']">Contact Us</a>
              </div><hr>
              <router-outlet></router-outlet>
              `,
    directives: [ ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: '/',        component: HomeComponent, as: 'Home'},
    {path: '/aboutus', component: AboutUsComponent, as: 'AboutUs'  }
    {path: '/contactus', component: ContactUsComponent, as: 'ContactUs'  }
])
class RootComponent{
}
bootstrap(RootComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]);
import {Component, bootstrap, provide} from 'angular2/angular2';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS,
LocationStrategy, HashLocationStrategy} from 'angular2/router';


// Home Component
@Component({
selector: 'home',
template: '<h2>Welcome to <a href="http://www.codeandyou.com" target="_blank"> www.codeandyou.com </a></h2>',
styles: ['.home {background: red}'],
})
export class HomeComponent {}

// About Us Component
@Component({
selector: 'aboutus',
templateUrl: 'aboutUs.html'
})

export class AboutUsComponent {}

// Contact Us Component
@Component({
selector: 'contactUs',
template:'<h2>Contact Us</h2>'
})

export class ContactUsComponent {}

// Root Component
@Component({
selector: 'mainroot',
template: `<div class="grayColor"><a [router-link]="['/Home']">Home</a>
<a [router-link]="['/AboutUs']">About Us</a>
<a [router-link]="['/ContactUs']">Contact Us</a>
</div><hr>
<router-outlet></router-outlet>
`,
directives: [ ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: '/', component: HomeComponent, as: 'Home'},
{path: '/aboutus', component: AboutUsComponent, as: 'AboutUs' }
{path: '/contactus', component: ContactUsComponent, as: 'ContactUs' }
])

class RootComponent{
}

bootstrap(RootComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]);

aboutUs.html

1
<h2>About us</h2>
<h2>About us</h2>

config.js

1
2
3
4
5
6
7
8
System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  }
});
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
}
});

Keywords –

 Understand Routing in Angular 2 

How to use Routing in Angular 2

 Routing in Angular 2

Angular 2 Routing

Leave a Reply

Your email address will not be published. Required fields are marked *