Skip to content

Instantly share code, notes, and snippets.

@johnlindquist

johnlindquist/README.md

Created March 17, 2016 20:39
Show Gist options
  • Save johnlindquist/80c06fbf2daa0cb12793 to your computer and use it in GitHub Desktop.
Save johnlindquist/80c06fbf2daa0cb12793 to your computer and use it in GitHub Desktop.
Download ZIP
Angular 2 Automated Autocomplete
Raw
README.md

Angular2 Starter Gist Run

Raw
config.js
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',
'@ngrx/store': 'https://npmcdn.com/@ngrx/[email protected]/dist/index.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/2.0.0-beta.9/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.9/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/router.dev.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<app></app>
</body>
</html>
Raw
src\main.ts
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Observable} from 'rxjs/Rx';
import {Jsonp, JSONP_PROVIDERS} from 'angular2/http';
@Component({
selector: 'app',
template: `
<input type="text" [value]="term$ | async">
<ul *ngFor="#result of results$ | async">
{{result}}
</ul>
`
})
export class App {
text = `Beginning fish, firmament give have make years. Divide you're. Fill light, him firmament cattle face Lights tree forth subdue beginning every, give signs itself likeness second whose there years abundantly the, given can't together yielding midst was place that fruitful meat.
And night. Kind spirit won't meat it, third fifth may. Lights can't he, was all have divided. Two.
Man second his shall to she'd whose. Image you meat bearing one of herb living called waters he seasons his have him. God multiply one multiply their. His air gathered kind bearing fowl One years fruit days to living place and.`;
term$ = Observable.from(this.text)
.zip(
Observable.interval(1000),
(x)=> x
)
.scan((a, c)=> (c === " ") ? "" : a + c)
.share();
results$ =
this.term$
.switchMap(term => this.jsonp.get(`https://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK&action=opensearch&format=json&search=${term}`))
.map(res => res.json()[1]);
constructor(public jsonp:Jsonp) {}
}
bootstrap(App, [JSONP_PROVIDERS]);
Raw
style.css
/* Styles go here */
body{
font-family: sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment