<!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,[]);