docs(inheritance): sample

Author: wardbell

public/docs/_examples/inheritance/ts/.gitignore

@@ -0,0 +1,6 @@
+**/*.ngfactory.ts
+**/*.ngsummary.json
+**/*.metadata.json
+dist
+!app/tsconfig.json
+!rollup-config.js

public/docs/_examples/inheritance/ts/README.md

@@ -0,0 +1,40 @@
+# Angular Inheritance Sample (draft)
+
+The AOT Cookbook sample was the starting point.  
+This sample runs in both JIT and AOT
+
+With AOT you have to re-build after each change.
+With JIT you can develop on the fly as we usually do.
+
+## Inheritance experiments
+Look at `sub.component.ts` to see the experiments in metadata inheritance.
+
+
+## Building it
+
+The original source is in https://github.com/angular/angular.io/pull/3096 along with 
+tools and configs to build it in JIT and AOT.
+You'll need knowledge of the Angular docs sample development practices to do it.
+
+Commands to run:
+
+```
+# compile with AOT, then rollup. Noisy.
+npm run build:aot
+
+# start server and JIT/TS watching as usual
+npm start
+```
+The browser displays the JIT version (`index.html`) by default.
+You can tell by looking at the browser tab (it says "JIT:..."), in the console, and in the page header.
+
+To see the AOT version, put `index-aot.html` in the address bar.
+You can tell by looking at the browser tab (it says "AOT:..."), in the console, and in the page header.
+
+## Running it
+
+I like to have two console windows open:
+
+1. Running `npm start` (after once having run `npm run build:aot`)
+
+1. Where I periodically re-run either `npm run tsc` or `npm run build:aot` after a change that works in JIT

public/docs/_examples/inheritance/ts/aot/app/base.component.css.shim.ngstyle.ts

@@ -0,0 +1,8 @@
+/**
+ * @fileoverview This file is generated by the Angular 2 template compiler.
+ * Do not edit.
+ * @suppress {suspiciousCode,uselessCode,missingProperties}
+ */
+ /* tslint:disable */
+
+export const styles:any[] = ['#speak[_ngcontent-%COMP%] { font-style: italic;  color: blue; }'];

public/docs/_examples/inheritance/ts/app/app.component.html

@@ -0,0 +1,5 @@
+<!-- #docregion -->
+<h1>Angular Inheritance ({{buildMode}})</h1>
+<base-comp speaker="Paul"></base-comp>
+<sub-comp  speaker="Helen"></sub-comp>
+

public/docs/_examples/inheritance/ts/app/app.component.ts

@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'my-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  buildMode = document['aot'] ? 'AOT' : 'JIT';
+}
+

public/docs/_examples/inheritance/ts/app/app.module.ts

@@ -0,0 +1,18 @@
+// #docregion
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent }  from './app.component';
+import { BaseComponent } from './base.component';
+import { SubComponent }  from './sub.component';
+
+@NgModule({
+  imports:      [ BrowserModule ],
+  declarations: [
+    AppComponent,
+    BaseComponent,
+    SubComponent
+  ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }

public/docs/_examples/inheritance/ts/app/base.component.css

@@ -0,0 +1 @@
+#speak { font-style: italic;  color: blue; }

public/docs/_examples/inheritance/ts/app/base.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input, Injectable } from '@angular/core';
+
+@Injectable()
+export class ServiceA {
+  name = 'Service A';
+}
+
+@Injectable()
+export class ServiceB {
+  name = 'Service B';
+}
+
+export const BASE_PROVIDERS = [ ServiceA, ServiceB ];
+
+export const BASE_METADATA = {
+  moduleId: module.id,
+  selector: 'base-comp',
+  template: `
+    <h3>{{speaker}} sez:</h3>
+    <p id="speak">I am the base component. Koo-koo-ka-choo.</p>
+    <p>{{services}}</p>
+  `,
+  styleUrls: [ './base.component.css'] ,
+  providers: [BASE_PROVIDERS]
+};
+
+@Component(BASE_METADATA)
+export class BaseComponent {
+  @Input() speaker: string;
+  services: string;
+
+  constructor(private a: ServiceA, private b: ServiceB) {
+    this.services = `ServiceA is ${a.name}; Service B is ${b.name}`;
+  }
+}

public/docs/_examples/inheritance/ts/app/main-aot.ts

@@ -0,0 +1,7 @@
+// #docregion
+import { platformBrowser }    from '@angular/platform-browser';
+import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
+
+console.log('Running AOT version');
+document['aot'] = true;
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

public/docs/_examples/inheritance/ts/app/main.ts

@@ -0,0 +1,7 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule }              from './app.module';
+
+console.log('Running JIT version');
+document['aot'] = false;
+platformBrowserDynamic().bootstrapModule(AppModule);