12 May 2017

Router Example in Angular2

Hi All,

In this blog I am going to show you how you can implement the Routing in Angular2 application.

To Starts with this we need to create following files in your application:

1. home.component.ts (under home folder)
2. login.component.ts (under login folder)
3. app.component.ts
4. main.ts
5. index.html


create a folder with name home and then create a file with name  home.component.ts with below contents:

====================================================================
home.component.ts
====================================================================

import {Component} from 'angular2/core';

@Component({
  selector: 'home',
  template: `
      <h1>My Home Page</h1>
  `
})
export class Home {
  constructor() {

  }
}


create a folder with name login and then create a file with name  login.component.ts with below contents:

====================================================================
login.component.ts
=====================================================================
import {Component} from 'angular2/core';

@Component({
  selector: 'login',
  template: `
      <h1>My Login Page</h1>
  `
})
export class Login {
  constructor() {

  }
}




 Now create the app.component.ts in the parent folder of your application with following content:
======================================================================
app.component.ts
===================================================================== 
 import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Home} from './home/home.component.ts';
import {Login} from './login/login.component.ts';

@Component({
  selector: 'my-app',
  template: `
    <div class="app">
      Hello world!
      <nav>
        <ul>
          <li>
            <a [routerLink]=" ['Home'] ">Home</a>
          </li>
          <li>
            <a [routerLink]=" ['Login'] ">Login</a>
          </li>
        </ul>
      </nav>
      <main>
        <router-outlet></router-outlet>
      </main>
    </div>
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/', name: 'Home', component: Home, useAsDefault: true },
  { path: '/login', name: 'Login', component: Login }
])
export class AppComponent {
 
}


Now create the file with name main.ts with following contents:

=====================================================================
main.ts
=====================================================================
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {ROUTER_PROVIDERS} from 'angular2/router';

bootstrap(AppComponent, [
  ROUTER_PROVIDERS
]);


Now create the index.html file in parent folder with the following content:

======================================================================
index.html
======================================================================
 <!doctype html>
<html>
  <head>
    <title>Superfast Angular 2 setup</title>
    <base href="."/>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.3.2/typescript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/Rx.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/router.js"></script>
    <script>
    System.config({
      transpiler: 'typescript',
      typescriptOptions: {
        emitDecoratorMetadata: true
      },
      map: {
        app: './js'
      },
      packages: {
        app: {
          main: './main.ts',
          defaultExtension: 'ts'
        }
      }
    });
    System
      .import('app')
      .catch(console.error.bind(console));
    </script>
  </head>
  <body>
    <my-app>
      Loading...
    </my-app>
  </body>
</html>


at the end you will have following directory structure. Since I have created it in a IDE other than eclipse so the directory structure will be little bit may be different in your case.


Once you run the application it will be rendered as follows:



0 on: "Router Example in Angular2"