ForkJoin

<!DOCTYPE html>
<html>

  <head>
   
   

    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/Rx.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/router.dev.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/http.dev.js"></script>
    
        <script>
         
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'src': {defaultExtension: 'ts'}}
      });
    
      System.import('src/boot.ts')
            .then(null, console.error.bind(console));
    </script>
  </head>

    <body>
    <my-app>loading...</my-app>
  </body>

</html>

// Code goes here

/* Styles go here */

import {Component,bind} from 'angular2/core';
import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
import {bootstrap}        from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/Rx';
    
import{ComponentOne} from 'src/cone';
import{ComponentTwo} from 'src/ctwo';
import{FriendsList} from 'src/myfriends';
    
@Component({
  selector: 'my-app',
  template: `
    <h1>Component Router</h1>
    <nav>
      <a [routerLink]="['ComponentOne']">One</a><hr/>
      <a [routerLink]="['ComponentTwo']">Two</a><hr/>
      <a [routerLink]="['FriendsList']">Friends</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {path:'/component-one', name: 'ComponentOne', component: ComponentOne},
  {path:'/component-two', name: 'ComponentTwo', component: ComponentTwo}
  {path:'/myfriends', name: 'FriendsList', component:FriendsList}
])
export class AppComponent { }
   
    bootstrap(AppComponent, [HTTP_PROVIDERS,
      ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
    ]);

 import {Component,View} from 'angular2/core';
 
 @Component({
    template: `
    <h1>first Component</h1>
    `
  })
  
  export class ComponentOne{
    constructor(){
      
      console.log("first component being called");
    }
    }

 import {Component,View} from 'angular2/core';
 
 @Component({
    template: `
    <h1>Second Component</h1>
    `
  })
  
  export class ComponentTwo{
    constructor(){
      
      console.log("Second component being called");
    }
    }

 import {Component,View,CORE_DIRECTIVES} from 'angular2/core';
 import {Http, Response,HTTP_PROVIDERS} from 'angular2/http';
 import 'rxjs/Rx';
 import {Observable} from 'rxjs/Observable';
 @Component({
    template: `
    <h1>My Friends</h1>
    <ul>
      <li *ngFor="#frnd of result">
          {{frnd.name}} is {{frnd.age}} years old.
      </li>
    </ul>
    `,
    directive:[CORE_DIRECTIVES]
  })
  
  export class FriendsList{
    
      result:Array<Object>; 
      constructor(http: Http) { 
        console.log("Friends are being called");
        
        /*
        
        http.get('friends.json')
                  .map(res => res.json())
                  .flatMap(res => {
                     return Observable.forkJoin([
                             Observable.of(res),
                             this.http.get('products.json')
                           });
                   })
                   .map(res => {
                       res.json();
                     })
                   .subscribe(
                     (data) => {
                       console.log(data);
                     }
                   );
        
          */   
          
          http.get('friends.json')
                  .map(res => res.json())
                  .subscribe(
                     (data) => {
                       this.result=data;
                     },
                     err=>console.log(err),
                     ()=>console.log('done')
                   );
                      
       }
  }

[
  {"name":"Jonny","age":20},
  {"name":"John","age":22},
  {"name":"Jonathan","age":24}
]

[
  {"name":"Computer","price":20000},
  {"name":"Laptop","price":35000},
  {"name":"Keyboard","price":1000}
]