Understand Routing in Angular 2

on

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>.

Plnkr - http://plnkr.co/edit/2de7CWiUrRMpl3wJgwbT?p=preview

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 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>
<!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

Comments

Post a Comment