alvipeo/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Angular2 Starter Gist Run


## 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/store@1.3.3/dist/index.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

## 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>

## 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$
            .mergeMap(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]);

## style.css
/* Styles go here */
body{
    font-family: sans-serif;
}
	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/store@1.3.3/dist/index.js'
	},
	//packages defines our app package
	packages: {
	app: {
	main: './main.ts',
	defaultExtension: 'ts'
	}
	}
	});
	<!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>
	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$
	.mergeMap(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]);