Understand routing in angular 2

Understand Routing in
Angular 2

Angular2 still indevelopmentphase. Routingisimportantpartof any SPA (Single Page Application).
Angular2 provide aneasy way to implementrouting.
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.
First we need to understand the main component 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

Routing Example in Angular 2
index.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> UNDERSTAND ROUTING INANGULAR2</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
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']">ABOUTUS</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})]);
config.js
SYSTEM.CONFIG({
//USE TYPESCRIPT FOR COMPILATION
TRANSPILER:'TYPESCRIPT',
//TYPESCRIPT COMPILER OPTIONS
TYPESCRIPTOPTIONS:{
EMITDECORATORMETADATA:TRUE
}
});
aboutUs.html
<H2>ABOUT US</H2>

Thanks
www.codeandyou.com
http://www.codeandyou.com/2015/11/understand-
routing-in-angular-2.html
Keywords - Understand Routing in Angular 2, How to use Routing in Angular 2,
routing in Angular 2, Angular 2 Routing

Understand routing in angular 2

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Understand routing in angular 2

Similar to Understand routing in angular 2 (20)

More from codeandyou forums

More from codeandyou forums (17)

Recently uploaded

Recently uploaded (20)

Understand routing in angular 2