AngularJS 2 and Laravel 5 http.get

I'm new at Angular JS. There are many examples etc. for AngularJS1 and Laravel but there are less for AngularJS 2.

I'm doing AngularJS 2's quickstart example, but i wanna do it with Laravel in the backend. I'm making a request to my UserController, i see the response in the developer tools in Chrome, but i can't see the response on the page.

hero-service.ts (making http request)

import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
import { Hero } from './hero';
import 'rxjs/add/operator/toPromise';

import {Http, Response} from '@angular/http';

@Injectable()
export class HeroService {
    constructor(private http: Http) { }

    getHeroes(): Promise<Hero[]> {
    return this.http.get('/home')
               .toPromise()
               .then(response => response.json().data);
    }
    ...
    //Is this return `heroes` in HeroesComponent?

heroes.component.ts (calling the getHeroes method)

import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroService } from './hero.service';
import { Router } from '@angular/router-deprecated';

@Component({
    selector: 'my-heroes',
    templateUrl:'app/heroes.component.html',
    directives: [HeroDetailComponent],
    providers: [HeroService]
})
export class HeroesComponent implements OnInit {
    heroes: Hero[];
    selectedHero: Hero;
    constructor(
        private router: Router,
        private heroService: HeroService) { }
    getHeroes() {
        this.heroService.getHeroes().then(heroes => this.heroes = heroes);
    }
    ngOnInit() {
        this.getHeroes();
    }
    onSelect(hero: Hero) { this.selectedHero = hero; }
    gotoDetail() {
        this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
    }
}

app.component.ts (routes etc.) import { Component } from '@angular/core'; import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';

import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroService } from './hero.service';
@Component({
    selector: 'my-app',
    template: `
    <h1></h1>
    <nav>
      <a [routerLink]="['Dashboard']">Dashboard</a>
      <a [routerLink]="['Heroes']">Heroes</a>
    </nav>
    <router-outlet></router-outlet>
  `,
    directives: [ROUTER_DIRECTIVES],
    providers: [
        ROUTER_PROVIDERS,
        HeroService
    ]
})
@RouteConfig([
    {
        path: '/dashboard',
        name: 'Dashboard',
        component: DashboardComponent,
        useAsDefault: true
    },
    {
        path: '/detail/:id',
        name: 'HeroDetail',
        component: HeroDetailComponent
    },
    {
        path: '/heroes',
        name: 'Heroes',
        component: HeroesComponent
    }
])
export class AppComponent {
    title = 'Tour of Heroes';
}

and in the routes.php /home calling UserController/index method which is returns User::all();

Does my approach completly wrong or i just missing somethings? And please if you have any advise for learning Angular2 with Laravel tell me.

via Chebli Mohamed