Angular2 Flux - Tim's original plunk

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/tools/traceur-runtime.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-alpha.46/angular2.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.46/http.min.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */

## Angular2 Aurelia-Like Flux Plugin - Typescript - Alpha .46
---

#####An [aurelia-flux like](https://github.com/tfrydrychewicz/aurelia-flux) simple plunker demonstrating the same decorator pattern for Angular2:
* Simple Angular2 Application with a pubsub'ish implimentation
  * @handles decorator registers methods that handle messages
  * Injectable Dispatcher class with dispatch(message:string, payload:object) metthod for sending messages

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"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

//main entry point
import {bootstrap} from 'angular2/angular2';
import {HTTP_BINDINGS} from 'angular2/http';
import {App} from './app';

bootstrap(App, [HTTP_BINDINGS])
  .catch(err => console.error(err));

//our root app component
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'
import {PeopleService} from './peopleService'
import {Person} from './person'

@Component({
  selector: 'my-app',
  providers: [PeopleService]
})
@View({
  template: `
    <div>
      <h2>Hello Angular2!</h2>
      <my-person 
        *ng-for="#person of people" 
        [name]="person.name"
        (hello)="saidHello($event)">
      </my-person>
    </div>
  `,
  directives: [CORE_DIRECTIVES, Person]
})
export class App {
  constructor(public peopleService:PeopleService) {
    peopleService.people
      .subscribe(people => this.people = people);
  }
  saidHello($event){
    alert(`You said hello to ${$event}`)
  }
}

//a simple service
import {Injectable} from 'angular2/angular2';
import {Http} from 'angular2/http';

@Injectable()
export class PeopleService {
  constructor(http:Http) {
    this.people = http.get('api/people.json').map(res => res.json());
  }
}

//a simple person component
import {Component, View, EventEmitter} from 'angular2/angular2'
import {Dispatcher} from './flux';
import PersonStore from './personStore';

@Component({
  selector: 'my-person',
  inputs: ['name'],
  outputs: ['hello'],
  providers: [Dispatcher, PersonStore]
})
@View({
  template: `
    <div>
      <span>{{name}}</span>
      <button (click)="sayHello()">Say Hello</button>
      <button (click)="sendMessage()">Send Messages</button>
    </div>
  `
})
export class Person {
  hello = new EventEmitter();
  
  constructor(dispatcher: Dispatcher, store: PersonStore) {
    this.dispatcher = dispatcher;
    this.store = store;
  }
  
  sayHello(e) {
    this.hello.next(this.name);
    //console.log('sayHello() called');
  }
  
  sayGoodbye() {
    //console.log('sayGoodbye() called');
  }
  
  sendMessage() {
    this.dispatcher.dispatch('view.done', {txt:'boooo'});
  }
}

[
  {"id": 1, "name": "Brad"},
  {"id": 2, "name": "Jules"},
  {"id": 3, "name": "Jeff"}
]

var messageHandlers;

export function handles(message: string) {
    return (target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<any>) => {
        if(messageHandlers === undefined)
          messageHandlers = new Map();
          
        let func = messageHandlers.get(message) || [];
        func.push(descriptor.value);
        
        messageHandlers.set(message, func);
        
        descriptor.message = message;
        return descriptor;
    };
}

export class Dispatcher {
  
  dispatch(message: string, payload: any) {
    if(messageHandlers !== undefined) {
      toBeCalled = messageHandlers.get(message) || [];
      toBeCalled.forEach(func => func(payload));
    }
  }
  
}

import {handles, Dispatcher} from './flux';

export default class PersonStore {
  
  @handles('view.done')
  sayHello(e) {
    //this.hello.next(this.name);
    console.log('sayHello() called', e);
  }
  
  @handles('view.done')
  sayGoodbye() {
    console.log('sayGoodbye() called');
  }
}