<!DOCTYPE html>
<html>

  <head>
    <title>Anglar2 + TypeScript Starter</title>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.6/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="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.6/http.dev.js"></script>    <script src="config.js"></script>
  
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

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

</html>
/* Styles go here */

Simple Http Request with Angular2
--
Logging in to Kinvey and getting data back from a collection

You will need to setup your own Kinvey Account, and then set appropriate variables in code to make it work for you
console.clear();

System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  map: {
    app: "./src"
  },
  packages: {
    app: {
      main: './app.ts',
      defaultExtension: 'ts'
    }
  }
});
import {bootstrap}         from 'angular2/platform/browser';
import {Component, View} from 'angular2/core';
import {HTTP_PROVIDERS, Http, Headers } from 'angular2/http';


// Add all operators to Observable
import 'rxjs/Rx';

@Component({  
  selector: 'kbop-list-form'
})
@View({
  template:`<div>Here is your data kbop: <pre>{{kbopData | json}}</pre></div>`
})
class KBopListForm {
  /**
  * inject the HTTP service into the component
  */
  constructor(http: Http) {
    this.http = http
    this.getSongs().subscribe(
        (data) => {
          console.log('kbop', data)
          this.kbopData = data
        },
        (err) =>  console.log("Error Loging In:",err),
        () => { console.log("All Good With The Data")  }
      );
  }
  
    getSongs () {
    return this.http.get("http://kbop.herokuapp.com/songs")
    .map(res =>  res.json())

  }
  
}



@Component({
  selector: 'my-app',
  template: `
    <h1>hello</h1>
    <kbop-list-form></kbop-list-form>
  `,
  directives:[KBopListForm],
  providers: [HTTP_PROVIDERS]
})
class AppComponent {
  constructor(){}
}



bootstrap(AppComponent,[]);