Refactor on-demand express example to beef it up and demonstrate abil…

…ity to use HTTP

client/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@angular-ssr/client",
+  "version": "0.1.98",
+  "description": "Browser companion library for angular-ssr",
+  "main": "build/index.js",
+  "typings": "build/index.d.ts",
+  "engines": {
+    "node": ">=6.9",
+    "npm": ">=3.10"
+  },
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/clbond/angular-ssr.git"
+  },
+  "author": {
+    "name": "Christopher Bond",
+    "email": "cb@clbond.org",
+    "url": "https://clbond.org/"
+  },
+
+  "contributors": [
+    {
+      "name": "rangle.io",
+      "url": "https://rangle.io/"
+    }
+  ]
+}

examples/cli/src/app/app.module.ts

@@ -1,18 +1,20 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule, NgZone } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
-import { MaterialModule } from '@angular/material';
+import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {CommonModule} from '@angular/common';
+import {NgModule, NgZone} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {HttpModule} from '@angular/http';
+import {MaterialModule} from '@angular/material';
 
-import { Subscription } from 'rxjs/Subscription';
+import {Subscription} from 'rxjs/Subscription';
 
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
 
 @NgModule({
   imports: [
     BrowserAnimationsModule,
     BrowserModule,
+    CommonModule,
     FormsModule,
     HttpModule,
     MaterialModule.forRoot(),

examples/cli/src/main.ts

@@ -1,10 +1,10 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import {AppModule} from './app/app.module';
+import {environment} from './environments/environment';
 
-import { prebootClient } from 'preboot/__build/src/browser/preboot_browser';
+import {prebootClient} from 'preboot/__build/src/browser/preboot_browser';
 
 import 'hammerjs';
 

examples/demand-express/app/blog/blog.component.html

@@ -3,8 +3,7 @@
     {{blog.author.name}}
     <span class="email"><a [href]="'mailto:' + blog.author.email">{{blog.author.email}}</a></span>
   </div>
-  <div class="content">
+  <blockquote class="content">
     <div>{{blog.content}}</div>
-  </div>
-  <div class="id">(Note: Blog ID: <span style="font-family: monospace">{{id | async}}</span>)</div>
+  </blockquote>
 </div>

examples/demand-express/app/blog/blog.component.ts

@@ -6,9 +6,9 @@ import {Observable} from 'rxjs';
 
 import 'rxjs/add/operator/map';
 
-import {Blog} from './blog.model';
-import {BlogService} from './blog.service';
-import {LocaleService} from '../locale/locale.service';
+import {Blog} from './model';
+import {BlogService} from './service';
+import {LocaleService} from '../locale';
 
 @Component({
   selector: 'blog-component',
@@ -23,14 +23,26 @@ export class BlogComponent {
   private blogs: Observable<Array<Blog>>;
 
   constructor(
-    blogService: BlogService,
+    private blogService: BlogService,
     localeService: LocaleService,
     route: ActivatedRoute
   ) {
+    this.blogs = this.blogService.load('en-US');
+
     this.locale = localeService.locale();
 
-    this.locale.subscribe(locale => this.blogs = blogService.load(locale));
+    this.locale.subscribe(locale => this.update(locale));
+
+    this.id = route.params.map(p => {
+       const id = parseInt(p.id, 10);
+       if (isNaN(id)) {
+         return null;
+       }
+       return id;
+    });
+  }
 
-    this.id = route.params.map(p => +p['id']);
+  private update(locale: string) {
+    this.blogs = this.blogService.load(locale || 'en-US');
   }
 }

examples/demand-express/app/blog/index.ts

@@ -1,3 +1,5 @@
 export * from './blog.component';
-export * from './blog.model';
-export * from './blog.service';
+export * from './model';
+export * from './module';
+export * from './service';
+export * from './schema';

examples/demand-express/app/blog/module.ts

@@ -0,0 +1,21 @@
+import {RouterModule} from '@angular/router';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+
+import {HttpModule} from '@angular/http';
+
+import {BlogService} from './service';
+import {BlogComponent} from './blog.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HttpModule,
+    RouterModule.forChild([
+      {path: ':id', component: BlogComponent}
+    ])
+  ],
+  declarations: [BlogComponent],
+  providers: [{provide: BlogService, useClass: BlogService}]
+})
+export class BlogModule {}

examples/demand-express/app/blog/schema.ts

@@ -0,0 +1,24 @@
+import {Validator, ValidatorResult, Schema} from 'jsonschema';
+
+const blogsSchema: Schema = {
+  $schema: 'http://json-schema.org/draft-04/schema#',
+  type: 'object',
+  properties: {
+    ".*$": {
+      type: 'array',
+      properties: {
+        title: {type: 'string'},
+        content: {type: 'string'},
+        author: {type: 'object',
+          properties: {
+            name: {type: 'string'},
+            email: {type: 'string'}
+          }
+        }
+      }
+    },
+  }
+};
+
+export const validateBlogsAgainstSchema = (blogs): ValidatorResult =>
+  new Validator().validate(blogs, blogsSchema);

examples/demand-express/app/blog/service.ts

@@ -0,0 +1,16 @@
+import {Injectable} from '@angular/core';
+
+import {Http} from '@angular/http';
+
+import {Observable} from 'rxjs';
+
+import {Blog} from './model';
+
+@Injectable()
+export class BlogService {
+  constructor(private http: Http) {}
+
+  load(locale: string): Observable<ArrayLike<Blog>> {
+    return this.http.get('https://raw.githubusercontent.com/clbond/angular-ssr/master/examples/demand-express/mock-content.json').map(r => r.json()).map(c => c[locale]);
+  }
+}

examples/demand-express/app/cookie/index.ts

@@ -0,0 +1,2 @@
+export * from './module';
+export * from './service';

examples/demand-express/app/cookie/module.ts

@@ -0,0 +1,8 @@
+import {NgModule} from '@angular/core';
+
+import {CookieService} from './service';
+
+@NgModule({
+  providers: [CookieService]
+})
+export class CookieModule {}

examples/demand-express/app/dialog/index.ts

@@ -0,0 +1,2 @@
+export * from './dialog-content.component';
+export * from './module';

examples/demand-express/app/dialog/module.ts

@@ -0,0 +1,9 @@
+import {NgModule} from '@angular/core';
+
+import {DialogContent} from './dialog-content.component';
+
+@NgModule({
+  declarations: [DialogContent],
+  exports: [DialogContent]
+})
+export class DialogModule {}

examples/demand-express/app/locale/index.ts

@@ -1,2 +1,3 @@
-export * from './locale.component';
-export * from './locale.service';
+export * from './selector.component';
+export * from './module';
+export * from './service';

examples/demand-express/app/locale/module.ts

@@ -0,0 +1,16 @@
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {NgModule} from '@angular/core';
+import {MdSelectModule} from '@angular/material';
+
+import {LocaleSelectorComponent} from './selector.component';
+
+import {LocaleService} from './service';
+
+@NgModule({
+  declarations: [LocaleSelectorComponent],
+  exports: [LocaleSelectorComponent],
+  imports: [CommonModule, FormsModule, MdSelectModule],
+  providers: [LocaleService]
+})
+export class LocaleModule {}

examples/demand-express/app/locale/locale.component.html → examples/demand-express/app/locale/selector.component.html

@@ -1,4 +1,4 @@
-<md-select placeholder="Language" [ngModel]="locale | async" (ngModelChange)="service.locale($event)">
+<md-select [ngModel]="locale | async" (ngModelChange)="service.locale($event)">
   <md-option value="en-US">
     English
   </md-option>

examples/demand-express/app/locale/locale.component.ts → examples/demand-express/app/locale/selector.component.ts

@@ -2,11 +2,11 @@ import {Component} from '@angular/core';
 
 import {Observable} from 'rxjs';
 
-import {LocaleService} from './locale.service';
+import {LocaleService} from './service';
 
 @Component({
   selector: 'locale-selector',
-  templateUrl: './locale.component.html',
+  templateUrl: './selector.component.html',
   styles: [`
     :host {
       margin: 2em;
@@ -16,7 +16,7 @@ import {LocaleService} from './locale.service';
     }`
   ]
 })
-export class LocaleComponent {
+export class LocaleSelectorComponent {
   public locale: Observable<string>;
 
   constructor(public service: LocaleService) {

examples/demand-express/app/locale/locale.service.ts → examples/demand-express/app/locale/service.ts

@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 
 import {Observable, ReplaySubject} from 'rxjs';
 
-import {CookieService} from '../cookie/cookie.service';
+import {CookieService} from '../cookie';
 
 @Injectable()
 export class LocaleService {

examples/demand-express/app/main.ts

@@ -6,6 +6,6 @@ import 'hammerjs';
 
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'
 
-import {AppModule} from './app.module';
+import {RootModule} from './root.module';
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(RootModule);

examples/demand-express/app/root.component.ts

@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component, NgZone, ViewEncapsulation} from '@angular/core';
 
 import {MdDialog, MdSnackBar} from '@angular/material';
 
@@ -24,10 +24,16 @@ export class RootComponent {
 
   private timer;
 
-  constructor(private dialog: MdDialog, private snackbar: MdSnackBar) {}
+  constructor(
+    private dialog: MdDialog,
+    private snackbar: MdSnackBar,
+    private zone: NgZone
+  ) {}
 
   ngOnInit() {
-    const update = () => this.progress = (this.progress + Math.floor(Math.random() * 4) + 1) % 100;
+    const update = () => this.zone.run(() => {
+      this.progress = (this.progress + Math.floor(Math.random() * 4) + 1) % 100;
+    });
 
     this.timer = setInterval(() => update, 200);
   }