Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit b4dc858

Browse files
wardbellwardbell
committed
docs(inheritance): sample
1 parent 4253378 commit b4dc858

17 files changed

+318
-0
lines changed

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
**/*.ngfactory.ts
2+
**/*.ngsummary.json
3+
**/*.metadata.json
4+
dist
5+
!app/tsconfig.json
6+
!rollup-config.js

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

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Angular Inheritance Sample (draft)
2+
3+
The AOT Cookbook sample was the starting point.
4+
This sample runs in both JIT and AOT
5+
6+
With AOT you have to re-build after each change.
7+
With JIT you can develop on the fly as we usually do.
8+
9+
## Inheritance experiments
10+
Look at `sub.component.ts` to see the experiments in metadata inheritance.
11+
12+
13+
## Building it
14+
15+
The original source is in https://github.com/angular/angular.io/pull/3096 along with
16+
tools and configs to build it in JIT and AOT.
17+
You'll need knowledge of the Angular docs sample development practices to do it.
18+
19+
Commands to run:
20+
21+
```
22+
# compile with AOT, then rollup. Noisy.
23+
npm run build:aot
24+
25+
# start server and JIT/TS watching as usual
26+
npm start
27+
```
28+
The browser displays the JIT version (`index.html`) by default.
29+
You can tell by looking at the browser tab (it says "JIT:..."), in the console, and in the page header.
30+
31+
To see the AOT version, put `index-aot.html` in the address bar.
32+
You can tell by looking at the browser tab (it says "AOT:..."), in the console, and in the page header.
33+
34+
## Running it
35+
36+
I like to have two console windows open:
37+
38+
1. Running `npm start` (after once having run `npm run build:aot`)
39+
40+
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

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

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<!-- #docregion -->
2+
<h1>Angular Inheritance ({{buildMode}})</h1>
3+
<base-comp speaker="Paul"></base-comp>
4+
<sub-comp speaker="Helen"></sub-comp>
5+

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

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
moduleId: module.id,
6+
selector: 'my-app',
7+
templateUrl: './app.component.html'
8+
})
9+
export class AppComponent {
10+
buildMode = document['aot'] ? 'AOT' : 'JIT';
11+
}
12+

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

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// #docregion
2+
import { NgModule } from '@angular/core';
3+
import { BrowserModule } from '@angular/platform-browser';
4+
5+
import { AppComponent } from './app.component';
6+
import { BaseComponent } from './base.component';
7+
import { SubComponent } from './sub.component';
8+
9+
@NgModule({
10+
imports: [ BrowserModule ],
11+
declarations: [
12+
AppComponent,
13+
BaseComponent,
14+
SubComponent
15+
],
16+
bootstrap: [ AppComponent ]
17+
})
18+
export class AppModule { }

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

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
#speak { font-style: italic; color: blue; }

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

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Component, Input, Injectable } from '@angular/core';
2+
3+
@Injectable()
4+
export class ServiceA {
5+
name = 'Service A';
6+
}
7+
8+
@Injectable()
9+
export class ServiceB {
10+
name = 'Service B';
11+
}
12+
13+
export const BASE_PROVIDERS = [ ServiceA, ServiceB ];
14+
15+
export const BASE_METADATA = {
16+
moduleId: module.id,
17+
selector: 'base-comp',
18+
template: `
19+
<h3>{{speaker}} sez:</h3>
20+
<p id="speak">I am the base component. Koo-koo-ka-choo.</p>
21+
<p>{{services}}</p>
22+
`,
23+
styleUrls: [ './base.component.css'] ,
24+
providers: [BASE_PROVIDERS]
25+
};
26+
27+
@Component(BASE_METADATA)
28+
export class BaseComponent {
29+
@Input() speaker: string;
30+
services: string;
31+
32+
constructor(private a: ServiceA, private b: ServiceB) {
33+
this.services = `ServiceA is ${a.name}; Service B is ${b.name}`;
34+
}
35+
}

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// #docregion
2+
import { platformBrowser } from '@angular/platform-browser';
3+
import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
4+
5+
console.log('Running AOT version');
6+
document['aot'] = true;
7+
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// #docregion
2+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3+
import { AppModule } from './app.module';
4+
5+
console.log('Running JIT version');
6+
document['aot'] = false;
7+
platformBrowserDynamic().bootstrapModule(AppModule);

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

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { Component, Injectable } from '@angular/core';
2+
3+
import { BaseComponent, BASE_METADATA, BASE_PROVIDERS, ServiceA } from './base.component';
4+
5+
///////// SubComponent service substitution ////
6+
@Injectable()
7+
export class ServiceASub {
8+
name = 'A-sub';
9+
}
10+
11+
///////// SubComponent Metadata Trials ////
12+
13+
// The intended, fully specified SubComponent metadat. We know this works
14+
const subMeta = {
15+
moduleId: module.id,
16+
selector: 'sub-comp',
17+
template: `
18+
<h3>{{speaker}} sez:</h3>
19+
<p id="speak">I am the SUB component. Hear me roar.</p>
20+
<p>{{services}}</p>
21+
`,
22+
styleUrls: [ './base.component.css'] ,
23+
providers: [
24+
BASE_PROVIDERS,
25+
{provide: ServiceA, useClass: ServiceASub}
26+
]
27+
};
28+
29+
////////////////////
30+
// This works in JIT but not AOT
31+
export function blendMetadata() {
32+
return Object.assign({}, BASE_METADATA, subMeta);
33+
}
34+
35+
//////////////////////////
36+
// Manual inheritance
37+
const inheritMetadata = {
38+
// inherit (silly)
39+
moduleId: BASE_METADATA.moduleId,
40+
41+
// Override
42+
selector: 'sub-comp',
43+
template: `
44+
<h3>{{speaker}} sez:</h3>
45+
<p id="speak">I am the SUB component. Hear me roar.</p>
46+
<p>{{services}}</p>
47+
`,
48+
49+
// Extend providers (actually overrides)
50+
providers: [
51+
BASE_METADATA.providers, // inherit
52+
{provide: ServiceA, useClass: ServiceASub}
53+
],
54+
55+
// Inherit
56+
styleUrls: BASE_METADATA.styleUrls // inherit
57+
};
58+
59+
////////////// SubComponent ////////////////////////
60+
61+
// This works in JIT and AOT
62+
// @Component(subMeta)
63+
64+
// This works in JIT but not AOT
65+
// @Component(blendMetadata())
66+
67+
// This works in JIT and AOT
68+
@Component(inheritMetadata)
69+
export class SubComponent extends BaseComponent { }

‎public/docs/_examples/inheritance/ts/example-config.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"build": "build:aot",
3+
"run": "http-server:e2e"
4+
}

‎public/docs/_examples/inheritance/ts/index-aot.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!-- #docregion -->
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<title>AOT: Angular Inheritance</title>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="styles.css">
9+
10+
<script src="node_modules/core-js/client/shim.min.js"></script>
11+
<script src="node_modules/zone.js/dist/zone.js"></script>
12+
<!-- #docregion moduleId -->
13+
<script>window.module = 'aot';</script>
14+
<!-- #enddocregion moduleId -->
15+
</head>
16+
17+
<!-- #docregion bundle -->
18+
<body>
19+
<my-app>Loading...</my-app>
20+
</body>
21+
22+
<script src="dist/build.js"></script>
23+
<!-- #enddocregion bundle -->
24+
</html>

‎public/docs/_examples/inheritance/ts/index.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>JIT: Angular Inheritance</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="styles.css">
8+
9+
<!-- Polyfills for older browsers -->
10+
<script src="node_modules/core-js/client/shim.min.js"></script>
11+
12+
<script src="node_modules/zone.js/dist/zone.js"></script>
13+
<script src="node_modules/systemjs/dist/system.src.js"></script>
14+
<script src="systemjs.config.js"></script>
15+
<script>
16+
System.import('app').catch(function(err){ console.error(err); });
17+
</script>
18+
</head>
19+
20+
<body>
21+
<my-app>Loading AppComponent content here ...</my-app>
22+
</body>
23+
24+
</html>

‎public/docs/_examples/inheritance/ts/plnkr.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"description": "App",
3+
"files":[
4+
"!**/*.d.ts",
5+
"!**/*.js",
6+
"!app/main-aot.ts",
7+
"!README.md"
8+
],
9+
"tags": ["inheritance"]
10+
}

‎public/docs/_examples/inheritance/ts/rollup-config.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// #docregion
2+
import rollup from 'rollup'
3+
import nodeResolve from 'rollup-plugin-node-resolve'
4+
import commonjs from 'rollup-plugin-commonjs';
5+
import uglify from 'rollup-plugin-uglify'
6+
7+
// #docregion config
8+
export default {
9+
entry: 'app/main-aot.js',
10+
dest: 'dist/build.js', // output a single application bundle
11+
sourceMap: false,
12+
format: 'iife',
13+
plugins: [
14+
nodeResolve({jsnext: true, module: true}),
15+
// #docregion commonjs
16+
commonjs({
17+
include: 'node_modules/rxjs/**',
18+
}),
19+
// #enddocregion commonjs
20+
// #docregion uglify
21+
uglify()
22+
// #enddocregion uglify
23+
]
24+
}
25+
// #enddocregion config

‎public/docs/_examples/inheritance/ts/tsconfig-aot.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"module": "es2015",
5+
"moduleResolution": "node",
6+
"sourceMap": true,
7+
"emitDecoratorMetadata": true,
8+
"experimentalDecorators": true,
9+
"lib": ["es2015", "dom"],
10+
"noImplicitAny": true,
11+
"suppressImplicitAnyIndexErrors": true
12+
},
13+
14+
"files": [
15+
"app/app.module.ts",
16+
"app/main-aot.ts"
17+
],
18+
19+
"angularCompilerOptions": {
20+
"genDir": "aot",
21+
"skipMetadataEmit" : true
22+
}
23+
}

0 commit comments

Comments
 (0)