Angularjs Routing – Angular1 vs Angular2


Before we start and to make sure we are in line on the terminology, I will use the name AngularJS to define AngularJS 1.x and Angular2 to define AngularJS 2.x.


To enable Hash (#) urls,  set the following configuration. This will shift within two nodes.(HTML5 enable mode or not)



In Angular2 , same modes are called as PathLocationStrategy and HashLocationStrategy

PathLocationStrategy is the default strategy which is used by Angular2. This is equivalent to HTML5 mode in AngularJS.

import {ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
bootstrap(yourApp, [
  ROUTER_PROVIDERS, // includes binding to PathLocationStrategy
  provide(APP_BASE_HREF, {useValue: '/my/prefix/here'})

HashLocationStrategy will add hash fragment to URL.

import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';  // works only for rc6 ,
// for others  import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
 //  import {LocationStrategy,HashLocationStrategy }from '@angular/common';
bootstrap(yourApp, [
  provide(LocationStrategy, {useClass: HashLocationStrategy})

Define Routes


$stateProvider.state('home', {
    url: '/',
    templateUrl: 'home.html',
    controller: 'HomeCtrl'
}).state('about', {
    url: '/about',
    templateUrl: 'about.html',
    controller: 'AboutCtrl'


import {RouteConfig, Route} from 'angular2/router';
import {MyComponentHome, MyComponentAbout} from './myComponents';
    selector: "app"
    new Route({ path: '/', component: MyComponentHome, name: 'Home' }),
    new Route({ path: '/about', component: MyComponentAbout, name: 'About' })
export class App {...}

Template Update


        <i>Some content will load here!</i>


import {RouterOutlet} from 'angular2/router';
    selector: "app"
    directives: [RouterOutlet]
    template: `

Navigate through views


<a ui-sref="home">Home page</a>
<a ui-sref="about">About page</a>


import {RouterLink} from 'angular2/router';
  selector: "menu",
  directives: [RouterLink],
  template: `
     <a [routerLink]="['./Home']">Home page</a>
     <a [routerLink]="['./About']">About page</a>
export class Menu {...}

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s