angularjs - Get data to template from Service -

i need bind template data variables own service. service uses http retrieve data in json format. data right, because request asynchronous return of service undefined.

how can sell asynchronous data template? without use of callback?

appcomponent:

    import {component} 'angular2/core';     import {routeconfig, router, router_directives} 'angular2/router';     import {systemcomponent} "./system.component";     import {menuprovider} "./providers/menuprovider";     import {menu} "./entity/menu";     import {http, headers, http_providers} 'angular2/http';      @component({         selector: 'app',         templateurl: '/templates/layout',         directives: [router_directives]     })      @routeconfig([         {             path: '/',             redirectto: ['/system'],             useasdefault: true         },         {             path: '/-1/...',             name: 'system',             component: systemcomponent         }     ])        export class appcomponent {          menusitems:array<menu>;          constructor(router: router, menuprovider:menuprovider){             this.menusitems = menuprovider.getmenuitems(1);             router.navigate(['/system']);         }     } 

menuprovider:

    import {menu} "../entity/menu";     import {indexedcollection} "../collections/indexedcollection";     import {injectable}    'angular2/core'     import {http, headers, http_providers} 'angular2/http';      @injectable()     export class menuprovider{          _menuitems:array<menu>;          private _http:http;          constructor(http:http){             this._http = http;         }          getmenuitems(shopid:number){             this.loadmenuforshopid(shopid);             return this._menuitems;         }          private loadmenuforshopid(shopid:number){             var base = this;             this._http.get('/services/menu/list/' + shopid)                 .subscribe(                   function(res){                       res = res.json();                       for(index in res['menuitems']){                           var menu = res['menuitems'][index];                           base._menuitems.push(new menu(menu['url'], menu['name']));                       }                   }                 );         }     } 

menuentity:

     export class menu{          private _url;          private _name;          constructor(url:string,name:string){             this._url = url;             this._name = name;         }          url() {             return this._url;         }          name() {             return this._name;         }     } 

template:

        <ul>             <li  *ngfor="#menu of menusitems">                 <a>{{menu.getname()}}</a>             </li>         </ul> 

take @ observable; it's new best friend (;

you can make "cold" observable (just describe should do):

getmenuitems(shopid:number){   return this._http     .get('/services/menu/list/' + shopid)     .map(res => res.json())     .map(res => {       let menu = res.menuitems;       return new menu(menu.url, menu.name)     }) } 

... , let angular subscribe using asyncpipe:

<ul>   <li  *ngfor="#menu of menusitems |async">     <a>{{menu.getname()}}</a>   </li> </ul> 

asyncpipe works on observables, promises , events...

transform(obj: observable<any>| promise<any>| eventemitter<any>, args?: any[]) :