robwormald/app.ts

## app.ts
import {Component, View, bootstrap, CORE_DIRECTIVES, ON_PUSH, LifecycleEvent, ElementRef} from 'angular2/angular2';
import {NgFormModel, NgControl,FormBuilder, FORM_BINDINGS, FORM_DIRECTIVES} from 'angular2/forms'
import {RxPipe} from './rxPipe'
import {Observable} from 'rx.all'


@Component({
    selector: 'hello',
    lifecycle: ON_PUSH
})
@View({
  template: `
   <div>
     <h3>angular2</h3>
     <ul>
       <li *ng-for="#item of items | rx">{{item.id}}</li>
     </ul>
   </div>
  `,
  directives: [CORE_DIRECTIVES],
  pipes: [RxPipe]
})
export class Hello {
  constructor(){
    this.items = Observable.interval(1000).map(id => ({id})).scan((all,obj) => all.concat(obj),[])
  }
}


bootstrap(Hello,[FORM_BINDINGS]);

## config.js
System.config({
  defaultJSExtensions: true,
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  map: {
    typescript: 'https://cdn.rawgit.com/robwormald/9883afae87bffa2f4e00/raw/8bca570a696c47a4f8dd03a52c98734676e94cea/typescript.js',
    'rx.all': 'https://cdnjs.cloudflare.com/ajax/libs/rxjs/3.1.1/rx.all.js'
  },
  paths: {
    app: 'src'
  },
  packages: {
    app: {
      main: 'app.ts',
      defaultExtension: 'ts',
    }
  }
});

## index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular2 playground</title>
</head>

<body>
    <hello>Loading...</hello>
</body>

<!-- ES6-related imports -->
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
<script src="config.js"></script>
<!-- Angular2 import -->
<script src="http://code.angularjs.org/2.0.0-alpha.35/angular2.dev.js"></script>

<script>
    //bootstrap the Angular2 application
    System.import('app').catch(console.log.bind(console));
</script>

</html>

## rxPipe.ts
/// https://gist.github.com/jashmenn/d8f5cbf5fc20640bac30
/// <reference path="../../typings/app.d.ts" />
//
//  Creates a pipe suitable for a RxJS observable:
//
//        @View({
//          template: '{{ someObservable | rx}}'
//          pipes: [RxPipe]
//        })
//
// Originally written by @gdi2290 but updated for 2.0.0.alpha-35 and use AsyncPipe
// (Soon the Angular team will be using RxJS natively and this pipe will be
// unnecessary because we'll be able to use the `async` pipe.)
//
// References:
// * rxPipeRegistry.ts https://gist.github.com/gdi2290/e9b2880a1d13057197d7 by @gdi2290
// * AsyncPipe https://github.com/angular/angular/blob/master/modules/angular2/src/pipes/async_pipe.ts

import {PipeFactory, Pipe, Injectable, bind, ChangeDetectorRef} from "angular2/angular2";
import {AsyncPipe} from "angular2/pipes";
import * as Rx from 'rx';
import {Observable} from 'rx';

function isObservable(obs) {
  return obs && typeof obs.subscribe === 'function';
}

class RxStrategy {
  createSubscription(async: any, updateLatestValue: any): any {
    return async.subscribe(updateLatestValue, e => { throw e; });
  }
  dispose(subscription: any): void { subscription.dispose(); }
  onDestroy(subscription: any): void { subscription.dispose(); }
}

var _rxStrategy = new RxStrategy();

@Pipe({name: 'rx'})
export class RxPipe extends AsyncPipe {
  constructor(public _ref: ChangeDetectorRef) { super(_ref); }

  supports(obs) { return isObservable(obs); }

  _selectStrategy(obj: Observable<any>): any {
    return _rxStrategy;
  }
}

export var rxPipeInjectables: Array<any> = [
  bind(RxPipe).toValue(RxPipe)
];
	import {Component, View, bootstrap, CORE_DIRECTIVES, ON_PUSH, LifecycleEvent, ElementRef} from 'angular2/angular2';
	import {NgFormModel, NgControl,FormBuilder, FORM_BINDINGS, FORM_DIRECTIVES} from 'angular2/forms'
	import {RxPipe} from './rxPipe'
	import {Observable} from 'rx.all'


	@Component({
	selector: 'hello',
	lifecycle: ON_PUSH
	})
	@View({
	template: `
	<div>
	<h3>angular2</h3>
	<ul>
	<li *ng-for="#item of items \| rx">{{item.id}}</li>
	</ul>
	</div>
	`,
	directives: [CORE_DIRECTIVES],
	pipes: [RxPipe]
	})
	export class Hello {
	constructor(){
	this.items = Observable.interval(1000).map(id => ({id})).scan((all,obj) => all.concat(obj),[])
	}
	}


	bootstrap(Hello,[FORM_BINDINGS]);
	System.config({
	defaultJSExtensions: true,
	transpiler: 'typescript',
	typescriptOptions: {
	emitDecoratorMetadata: true
	},
	map: {
	typescript: 'https://cdn.rawgit.com/robwormald/9883afae87bffa2f4e00/raw/8bca570a696c47a4f8dd03a52c98734676e94cea/typescript.js',
	'rx.all': 'https://cdnjs.cloudflare.com/ajax/libs/rxjs/3.1.1/rx.all.js'
	},
	paths: {
	app: 'src'
	},
	packages: {
	app: {
	main: 'app.ts',
	defaultExtension: 'ts',
	}
	}
	});
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Angular2 playground</title>
	</head>

	<body>
	<hello>Loading...</hello>
	</body>

	<!-- ES6-related imports -->
	<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
	<script src="config.js"></script>
	<!-- Angular2 import -->
	<script src="http://code.angularjs.org/2.0.0-alpha.35/angular2.dev.js"></script>

	<script>
	//bootstrap the Angular2 application
	System.import('app').catch(console.log.bind(console));
	</script>

	</html>
	/// https://gist.github.com/jashmenn/d8f5cbf5fc20640bac30
	/// <reference path="../../typings/app.d.ts" />
	//
	// Creates a pipe suitable for a RxJS observable:
	//
	// @View({
	// template: '{{ someObservable \| rx}}'
	// pipes: [RxPipe]
	// })
	//
	// Originally written by @gdi2290 but updated for 2.0.0.alpha-35 and use AsyncPipe
	// (Soon the Angular team will be using RxJS natively and this pipe will be
	// unnecessary because we'll be able to use the `async` pipe.)
	//
	// References:
	// * rxPipeRegistry.ts https://gist.github.com/gdi2290/e9b2880a1d13057197d7 by @gdi2290
	// * AsyncPipe https://github.com/angular/angular/blob/master/modules/angular2/src/pipes/async_pipe.ts

	import {PipeFactory, Pipe, Injectable, bind, ChangeDetectorRef} from "angular2/angular2";
	import {AsyncPipe} from "angular2/pipes";
	import * as Rx from 'rx';
	import {Observable} from 'rx';

	function isObservable(obs) {
	return obs && typeof obs.subscribe === 'function';
	}

	class RxStrategy {
	createSubscription(async: any, updateLatestValue: any): any {
	return async.subscribe(updateLatestValue, e => { throw e; });
	}
	dispose(subscription: any): void { subscription.dispose(); }
	onDestroy(subscription: any): void { subscription.dispose(); }
	}

	var _rxStrategy = new RxStrategy();

	@Pipe({name: 'rx'})
	export class RxPipe extends AsyncPipe {
	constructor(public _ref: ChangeDetectorRef) { super(_ref); }

	supports(obs) { return isObservable(obs); }

	_selectStrategy(obj: Observable<any>): any {
	return _rxStrategy;
	}
	}

	export var rxPipeInjectables: Array<any> = [
	bind(RxPipe).toValue(RxPipe)
	];