Angular2 Wikipedia Demo

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2 Wikipedia Demo</title>
    <link rel="stylesheet" href="style.css" />
    <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.0/http.min.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-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: './app.ts',
      defaultExtension: 'ts'
    }
  }
});

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {JSONP_PROVIDERS} from 'angular2/http';
import {App} from './app';
import {WikipediaService} from './wikipedia-service'
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Wikipedia Search</h2>
      <input #term type="text" (keyup)="search(term.value)">
      <ul>
        <li *ngFor="#item of items">{{item}}</li>
      </ul>
    </div>
  `
})
export class App {
  items: Array<string>;
  constructor(private wikipediaService: WikipediaService) {
  }
  
  search (term) {
    this.wikipediaService.search(term).then(items => this.items = items);
  }
}

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

import {Injectable} from 'angular2/core';
import {URLSearchParams, Jsonp} from 'angular2/http';
 
@Injectable()
export class WikipediaService {
  constructor(private jsonp: Jsonp) {
    
  }
  
  search (term: string) {
    var search = new URLSearchParams()
    search.set('action', 'opensearch');
    search.set('search', term);
    search.set('format', 'json');
    return this.jsonp
                .get('http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', { search })
                .toPromise()
                .then((request) => request.json()[1]);
  }
}