feature(StorageService): demo local Storage per platform

StorageService used and implemented as localStorage on the browser & in
memory variable on the server.

Added information on how to stay updated with the repository.

Closes TrilonIO#35
Closes TrilonIO#34

Author: MarkPieszak

CHANGELOG.md

@@ -1,9 +1,31 @@
 # Changelog
 
+> This is a manual changelog at the moment to track the Major changes in the Repo.
+
+## How do I stay up to date when Updates happen in this Starter?
+
+Typically when you want to update your App with the latest from this repo, you should be able to get the latest from here
+ and (depending on what has changed), you should be able to just drop in your Client & Server folders on top.
+
+My goal is to point out the more **"Major"** issues & changes below, that might have affected the application in Client/Server aspects. 
+For example, some additions made to each platform to add a new Feature (such as Storage that's using dependeny injection). 
+Of course if some feature like that isn't important to you, there's no need to copy it over! A lot examples here are to get you up & 
+running with a lot of the eco-system of .NET Core & Angular (v2+).
+
+Don't hesitate to create an Issue with anything you run into, and Pull-Requests are always welcome for basic implementations of new features & fixes 
+you think others would benefit from as well!
+
+### 1.0.0-beta.3 - 1/23/2017
+
+- [Closes #35](https://github.com/MarkPieszak/aspnetcore-angular2-universal/issues/35) Implemented Storage service for Browser (localStorage) & Server (in memory variable) 
+
+- [Closes #34](https://github.com/MarkPieszak/aspnetcore-angular2-universal/issues/45) Fix karma to handle Angular testing [commit](https://github.com/MarkPieszak/aspnetcore-angular2-universal/commit/1777f43ca23ede6c46d3cd37c1a2d35605a1355d)
+
+
 ### 1.0.0-beta.2 - 1/14/2017
 
 - Update AppComponent to be `<app-root />` to satisfy TSLint. `bootstrap-server.ts` updated as well.
 
 - Partial revert of ng2-bootstrap dependency down to **1.1.16**, 1.1.20+ require ng 2.4.x (unsupported by Universal atm) [commit](https://github.com/MarkPieszak/aspnetcore-angular2-universal/commit/524df2df00113d0ee2953b44ae40167112192f89)
 
-- [#33](https://github.com/MarkPieszak/aspnetcore-angular2-universal/issues/33) Update CSS for bootstrap4 & fix ng2-bootstrap API changes  [commit](https://github.com/MarkPieszak/aspnetcore-angular2-universal/commit/d0c0e7d98b9ac043be9880ba2656ddf0f0f2222d)
+- [Closes #33](https://github.com/MarkPieszak/aspnetcore-angular2-universal/issues/33) Update CSS for bootstrap4 & fix ng2-bootstrap API changes  [commit](https://github.com/MarkPieszak/aspnetcore-angular2-universal/commit/d0c0e7d98b9ac043be9880ba2656ddf0f0f2222d)

Client/app/platform-modules/app.browser.module.ts

@@ -8,7 +8,7 @@ import { UniversalModule, isBrowser, isNode, AUTO_PREBOOT } from 'angular2-unive
 import { AppCommonModule } from './app.common.module';
 import { AppComponent } from 'app';
 // Universal : XHR Cache 
-import { CacheService } from 'app-shared';
+import { CacheService, StorageService, BrowserStorage } from 'app-shared';
 
 export const UNIVERSAL_KEY = 'UNIVERSAL_CACHE';
 
@@ -25,7 +25,7 @@ export function getResponse() {
         // "UniversalModule" Must be first import.
         // ** NOTE ** : This automatically imports BrowserModule, HttpModule, and JsonpModule for Browser,
         // and NodeModule, NodeHttpModule etc for the server.
-        UniversalModule, 
+        UniversalModule,
 
         AppCommonModule,
 
@@ -40,7 +40,11 @@ export function getResponse() {
         { provide: 'isNode', useValue: isNode },
 
         { provide: 'req', useFactory: getRequest },
-        { provide: 'res', useFactory: getResponse }
+        { provide: 'res', useFactory: getResponse },
+
+        // We're using Dependency Injection here to use a Browser specific "Storage" (localStorage here) through the empty shell class StorageService
+        // The server will use a different one, since window & localStorage do not exist there
+        { provide: StorageService, useClass: BrowserStorage }
 
         // Universal concept. Uncomment this if you want to Turn OFF auto preboot complete
         // { provide: AUTO_PREBOOT, useValue: false } 

Client/app/platform-modules/app.server.module.ts

@@ -9,7 +9,7 @@ import { UniversalModule, isBrowser, isNode } from 'angular2-universal/node';
 import { AppCommonModule } from './app.common.module';
 import { AppComponent } from 'app';
 // Universal : XHR Cache 
-import { CacheService } from 'app-shared';
+import { CacheService, StorageService, ServerStorage } from 'app-shared';
 
 export function getRequest() {
   return Zone.current.get('req') || {};
@@ -36,7 +36,10 @@ export function getResponse() {
         { provide: 'isNode', useValue: isNode },
 
         { provide: 'req', useFactory: getRequest },
-        { provide: 'res', useFactory: getResponse }
+        { provide: 'res', useFactory: getResponse },
+
+        // We're using Dependency Injection here to use a Server/Node specific "Storage" through the empty shell class StorageService
+        { provide: StorageService, useClass: ServerStorage }
 
 
         // Other providers you want to add that you don't want shared in "Common" but are browser only

Client/containers/platform-examples/examples.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { isBrowser } from 'angular2-universal';
 import { Observable } from 'rxjs/Rx';
+import { StorageService } from 'app-shared';
 
 @Component({
     selector: 'app-examples',
@@ -31,7 +32,7 @@ export class ExamplesComponent implements OnInit {
     browserPlatformInterval: Observable<any>;
 
     // Use "constructor"s only for dependency injection
-    constructor () {}
+    constructor (private storage: StorageService) {}
 
     // Here you want to handle anything with @Input()'s @Output()'s
     // Data retrieval / etc - this is when the Component is "ready" and wired up
@@ -44,6 +45,18 @@ export class ExamplesComponent implements OnInit {
         if (isBrowser) {
             this.browserPlatformInterval = Observable.interval(300);
         }
+
+        // ************
+        // Now let's play around with "Storage", but on a Platform level 
+        // Node will use in memory variable, while the Browser uses "localStorage"
+        // Both are abstracted out use Dependency Injection to provide different classes for each use-case.
+        // [high-five] :)
+
+        this.storage.setItem('test', 'This came from Storage within each Platform !!');
+
+        let storedItem = this.storage.getItem('test');
+
+        console.log('Platform [Storage] test :: ' + storedItem);
     }
 
 }

Client/shared/cache/storage/index.ts

@@ -0,0 +1,4 @@
+
+export * from './storage.browser';
+export * from './storage.node';
+export * from './storage.service';

Client/shared/cache/storage/storage.browser.ts

@@ -0,0 +1,29 @@
+import { StorageService } from './storage.service';
+
+export class BrowserStorage implements StorageService {
+    getItem (key: string): any {
+        let storedItem = window.localStorage.getItem(key);
+        try {
+            return JSON.parse(storedItem);
+        } catch (ex) {
+            return storedItem;
+        }
+    } 
+
+    setItem (key: string, value: any) {
+        // We need to try and stringify it first (we can't save Objects/etc or it'll error out)
+        if (typeof value !== 'string') {
+            window.localStorage.setItem(key, JSON.stringify(value));
+        } else {
+            window.localStorage.setItem(key, value);
+        }
+    }
+    
+    removeItem (key: string) {
+        window.localStorage.removeItem(key);
+    }
+
+    clear () {
+        window.localStorage.clear();
+    }
+}

Client/shared/cache/storage/storage.node.ts

@@ -0,0 +1,23 @@
+import { StorageService } from './storage.service';
+
+// Our pseudo server Storage we'll use on the server to replace localStorage
+// This can handle most scenarios, but if you truly needed a server Memory Cache
+// you'd want to use Redis or something here
+let fakeInMemoryStore = {};
+
+export class ServerStorage implements StorageService {
+    getItem(key) {
+        return fakeInMemoryStore[key] || undefined;
+    }
+    setItem(key, value) {
+        return fakeInMemoryStore[key] = value;
+    }
+    removeItem(key) {
+        try {
+            delete fakeInMemoryStore[key];
+        } catch (ex) { }
+    }
+    clear() {
+        fakeInMemoryStore = {};
+    }
+}

Client/shared/cache/storage/storage.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+
+// This is our "shell" Service that will be used through out the application
+
+// Each "platform" will inject its own implementation (storage.browser & storage.node)
+// Browser is using window.localStorage
+// Node is using inMemory variable Object (which can work for most scenarios),
+// If you needed a true cache you'd need to implement Redis or similar here.
+
+// Useage within the app:
+//    constructor (private storage: StorageService) {}
+
+// this.storage.setItem('someKey', 123);
+
+@Injectable()
+export class StorageService {
+    getItem = (key) : any => {};
+    setItem = (key, value) => {};
+    removeItem = (key) => {};
+    clear = () => {};
+}

Client/shared/index.ts

@@ -16,7 +16,9 @@
 
 export * from './cache/api';
 export * from './cache/universal-cache';
+export * from './cache/storage';
 
 export * from './http/http-gateway.service';
 
 export * from './rx/rx-context.directive';
+

README.md

@@ -10,6 +10,7 @@ This repository is maintained by [Angular Universal](https://github.com/angular/
 Angular2, not only for the client-side, but to be rendered on the *server* for instant application paints 
 (*Note*: If you don't need Universal (SSR) [read here](https://github.com/MarkPieszak/aspnetcore-angular2-universal#faq) on how to disable it). 
 
+**How do I stay up-to-date with the latest updates & changes of the repo?** [Check out the CHANGELOG here](https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/master/CHANGELOG.md)
 
 This is meant to be a Feature-Rich Starter application containing all of the latest technologies, best build systems available, and include many real-world examples and libraries needed in todays Single Page Applications (SPAs).
 
@@ -93,7 +94,8 @@ to: `ASPNETCORE_ENVIRONMENT=Production`, then run `webpack` manually. Then you c
   - [ ] Example of NgRx (redux) transfering App State from server to client - track [#29](https://github.com/MarkPieszak/aspnetcore-angular2-universal/issues/29)
   - [ ] AoT (Ahead-of-time compilation) production builds - track [#10](https://github.com/MarkPieszak/aspnetcore-angular2-universal/issues/10)
   - [ ] SignalR (Websockets) example - track [#39](https://github.com/MarkPieszak/aspnetcore-angular2-universal/issues/39)
-  - [ ] Update components real unit & e2e tests - track [#45](https://github.com/MarkPieszak/aspnetcore-angular2-universal/issues/45)
+  - [x] Update components real unit & e2e tests - track [#45](https://github.com/MarkPieszak/aspnetcore-angular2-universal/issues/45)
+  - [x] ~~Storage Service (localStorage) showcasing Dependency Injection per-platform - [#35](https://github.com/MarkPieszak/aspnetcore-angular2-universal/issues/35)~~
   - [x] ~~NgRx (reactive Redux application state management)~~
   - [x] ~~HMR State management (hold state when hot reload occurs)~~
   - [x] ~~Unit testing with Karma/Jasmine~~