feat: AppStore

Author: PatrickJS

package.json

@@ -37,7 +37,7 @@
     "@angularclass/resolve-angular-routes": "^1.0.3",
     "@types/core-js": "^0.9.28",
     "@types/node": "^4.0.30",
-    "awesome-typescript-loader": "^2.0.1",
+    "awesome-typescript-loader": "^2.1.1",
     "es6-promise": "^3.1.2",
     "es6-shim": "^0.35.0",
     "ignore-loader": "^0.1.1",

src/app/app-store.ts

@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+export interface State {
+  // include your state here
+  counter: number;
+}
+
+const defaultState = {
+  // include your initial state here
+  counter: 0
+}
+
+const _store = new BehaviorSubject<State>(defaultState);
+
+@Injectable()
+export class AppStore {
+  private _store = _store;
+  changes = this._store
+    .asObservable()
+    .distinctUntilChanged()
+
+  setState(state: State) {
+    this._store.next(state);
+  }
+
+  getState(): State {
+    return this._clone(this._store.value);
+  }
+
+  getValue(prop?: string): any {
+    var state = this._clone(this._store.value);
+    return prop ? state[prop] : state;
+  }
+
+  setValue(prop?: string, value?: any): any {
+    var state = this._clone(this._store.value);
+    state[prop] = value;
+    this._store.next(state);
+  }
+
+  purge() {
+    this._store.next(defaultState);
+  }
+
+  _clone(obj) {
+    return JSON.parse(JSON.stringify(obj));
+  }
+
+  toJSON() {
+    return this._store.value;
+  }
+}

src/app/app.html

@@ -11,6 +11,8 @@ <h1>Hello Angular 2 and Webpack 2</h1>
   <div>Your Content Here</div>
   <router-outlet></router-outlet>
 
+  <pre>this.appStore = {{ appStore | json }}</pre>
+
 </main>
 
 <footer>AngularClass</footer>

src/app/app.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-
+import { AppStore } from './app-store';
 
 @Component({})
 export class App {
-  constructor() {
+  constructor(public appStore: AppStore) {
     console.log('Hello Angular 2 Webpack 2');
   }
 }

src/app/index.ts

@@ -5,6 +5,7 @@ import homeModule from './home';
 import reactiveModule from './reactive';
 
 import { App } from './app';
+import { AppStore } from './app-store';
 import { ROUTES, ROUTE_PROVIDERS } from './routes';
 
 export * from './app';
@@ -21,7 +22,8 @@ export default exportNgModules({
   ],
   directives: [],
   providers: [
-    ...ROUTE_PROVIDERS
+    ...ROUTE_PROVIDERS,
+    AppStore
   ],
   pipes: []
 });

src/app/reactive/reactive.ts

@@ -2,6 +2,8 @@ import { Component, ViewChild, Output, Input, EventEmitter } from '@angular/core
 import { ObserveViewChild }  from '@angularclass/observe-decorators';
 import { Observable } from 'rxjs/Rx'
 
+import { AppStore } from '../app-store';
+
 //normal component with @Output event
 @Component({
   selector: 'incrementer',
@@ -22,7 +24,7 @@ class Incrementer {
   ],
   template: `
     <div>
-      <h4>Child Total Count: {{ counterChange | async }}</h4>
+      <h4>Child Total Count: {{ appStore.changes.pluck('counter') | async }}</h4>
       <incrementer></incrementer>
       <button #decrement>decrement</button>
     </div>
@@ -44,6 +46,10 @@ export class AngularclassApp {
   .startWith(0)
   .scan((total: number, value: number) => total + value, 0);
 
+  constructor(public appStore: AppStore) {
+
+  }
+
 }
 
 @Component({
@@ -81,10 +87,16 @@ export class AcApp {
   `
 })
 export class App {
-  counter = 0;
-  // who needs |async
+  get counter() {
+    return this.appStore.getValue('counter');
+  }
+  @ObserveViewChild(AcApp) counterChange = new EventEmitter();
+  constructor(public appStore: AppStore) {
+
+
+    this.counterChange.subscribe(data => this.appStore.setValue('counter', data));
+  }
   ngOnInit() {
-    // where are all of my subscribes? ;)
   }
 
 }