robertpenner/config.js

## 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': 'https://npmcdn.com/@ngrx',
        'store-saga': 'https://npmcdn.com/store-saga@1.0.0-beta.4',
        'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.2'
    },
    //packages defines our app package
    packages: {
        app: {
            main: './main.ts',
            defaultExtension: 'ts'
        },
        '@ngrx/store': {
            main: 'dist/index.js',
            defaultExtension: 'js'
        },
        '@ngrx/devtools': {
            main: 'dist/index.js',
            defaultExtension: 'js'
        },
        'store-saga': {
            main: 'index.js',
            defaultExtension: 'js'
        },
        'rxjs': {
            main: 'index.js',
            defaultExtension: 'js'
        }
    }
});

## index.html
<!DOCTYPE html>
<html>

<head>
    <title>angular2 playground</title>
    <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/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 'rxjs/Rx';
import {HTTP_PROVIDERS, Http} from 'angular2/http';
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Observable} from 'rxjs/Rx';
import {installSagaMiddleware, createSaga, whenAction} from 'store-saga';
import {provideStore} from '@ngrx/store';
import {Store} from '@ngrx/store/dist/store';

const LOAD = 'LOAD';
const LOADED = 'LOADED';


@Component({
    selector: 'app',
    template: `<div>
        <button (click)="load('rxjs')">RxJS</button>
        <button (click)="load('angular')">Angular</button>
        Custom search: <input #i type="text" (keyup.enter)="load(i.value)">
        <button (click)="load(i.value)">Custom</button>

        <ul *ngFor="#item of (results | async)">
            {{item.title}}
        </ul>


</div>`
})
export class App {
    results = this.store.select('questions');

    load(payload){
        this.store.dispatch({type: LOAD, payload});
    };

    constructor(private store:Store) {}
}

//reducers
const questions = (state = [], {type, payload})=> {
    switch (type) {
        case LOADED:
            return payload.items;

        default:
            return state;
    }
};

//sagas
const load = createSaga((http:Http)=> {
    const url$ = Observable.of('https://api.stackexchange.com/2.2/search?site=stackoverflow');

    return saga$ => saga$
        .filter(whenAction(LOAD))
        .combineLatest(url$, ({action:{payload}}, url)=> `${url}&intitle=${payload}`)
        .switchMap(url => http.get(url))
        .map(res => ({
                type: LOADED,
                payload: res.json()
            })
        )

}, [Http]);

bootstrap(App, [
    HTTP_PROVIDERS,
    provideStore({questions}),
    installSagaMiddleware(load)
]);
	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': 'https://npmcdn.com/@ngrx',
	'store-saga': 'https://npmcdn.com/store-saga@1.0.0-beta.4',
	'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.2'
	},
	//packages defines our app package
	packages: {
	app: {
	main: './main.ts',
	defaultExtension: 'ts'
	},
	'@ngrx/store': {
	main: 'dist/index.js',
	defaultExtension: 'js'
	},
	'@ngrx/devtools': {
	main: 'dist/index.js',
	defaultExtension: 'js'
	},
	'store-saga': {
	main: 'index.js',
	defaultExtension: 'js'
	},
	'rxjs': {
	main: 'index.js',
	defaultExtension: 'js'
	}
	}
	});
	<!DOCTYPE html>
	<html>

	<head>
	<title>angular2 playground</title>
	<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/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 'rxjs/Rx';
	import {HTTP_PROVIDERS, Http} from 'angular2/http';
	import {Component} from 'angular2/core';
	import {bootstrap} from 'angular2/platform/browser';
	import {Observable} from 'rxjs/Rx';
	import {installSagaMiddleware, createSaga, whenAction} from 'store-saga';
	import {provideStore} from '@ngrx/store';
	import {Store} from '@ngrx/store/dist/store';

	const LOAD = 'LOAD';
	const LOADED = 'LOADED';


	@Component({
	selector: 'app',
	template: `<div>
	<button (click)="load('rxjs')">RxJS</button>
	<button (click)="load('angular')">Angular</button>
	Custom search: <input #i type="text" (keyup.enter)="load(i.value)">
	<button (click)="load(i.value)">Custom</button>

	<ul *ngFor="#item of (results \| async)">
	{{item.title}}
	</ul>


	</div>`
	})
	export class App {
	results = this.store.select('questions');

	load(payload){
	this.store.dispatch({type: LOAD, payload});
	};

	constructor(private store:Store) {}
	}

	//reducers
	const questions = (state = [], {type, payload})=> {
	switch (type) {
	case LOADED:
	return payload.items;

	default:
	return state;
	}
	};

	//sagas
	const load = createSaga((http:Http)=> {
	const url$ = Observable.of('https://api.stackexchange.com/2.2/search?site=stackoverflow');

	return saga$ => saga$
	.filter(whenAction(LOAD))
	.combineLatest(url$, ({action:{payload}}, url)=> `${url}&intitle=${payload}`)
	.switchMap(url => http.get(url))
	.map(res => ({
	type: LOADED,
	payload: res.json()
	})
	)

	}, [Http]);

	bootstrap(App, [
	HTTP_PROVIDERS,
	provideStore({questions}),
	installSagaMiddleware(load)
	]);