Angular2 AJAX Promises Example

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="config.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.8/http.dev.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

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

</html>

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

//main entry point
import {bootstrap} from 'angular2/platform/browser';
import 'rxjs/Rx';
import {App} from './app';

bootstrap(App, [])
  .catch(err => console.error(err));

import {Component, OnInit} from 'angular2/core';

import {HTTP_PROVIDERS}    from 'angular2/http';
import {provide}           from 'angular2/core';
import {XHRBackend}        from 'angular2/http';

import {Todo}              from './todo';
import {TodoService}       from './todo.service';

@Component({
  selector: 'pr-app',
  providers: [
    HTTP_PROVIDERS, 
    TodoService
  ],
  template: `
  <h3>List of Todos:</h3>
  <ul>
    <li *ngFor="#todo of todos">
      <input type="checkbox" />{{ todo.desc }}
    </li>
  </ul>
  <hr />
  <div class="error" *ngIf="errorMessage">{{errorMessage}}</div>
  `,
  directives: [],
  styles: ['ul {  }']
})
export class App {
  
  constructor (private _todoService: TodoService) {}
  
  errorMessage: string;
  
  todos:Todo[];
  
  ngOnInit() { this.getTodos(); }
  
  getTodos() {
    this._todoService.getTodos()
       .then(
         todos => this.todos = todos,
         error => this.errorMessage = <any>error);
  }

}

import {Injectable}               from 'angular2/core';
import {Http, Response}           from 'angular2/http';
import {Headers, RequestOptions}  from 'angular2/http';
import {Observable}               from 'rxjs/Observable';

import {Todo}                     from './todo';

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

  private _todosUrl = 'src/todos.json';

  getTodos () {
    return this.http.get(this._todosUrl)
              .toPromise()
              .then(res => <Todo[]> res.json().data)
              .then(data => { console.log(data); return data; }); // eyeball results in the console
  }

  private handleError (error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
  }
}

export class Todo {
  constructor(
    public id:number,
    public desc:string,
    public done: boolean) { }
}

{
  "data": [
    { "id": "1", "desc": "Eat Breakfast", "done": false },
    { "id": "2", "desc": "Eat Lunch", "done": false },
    { "id": "3", "desc": "Eat Dinner", "done": false },
    { "id": "4", "desc": "Go to Bed", "done": false }
  ]
}