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

Commit ed99894

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

16 files changed

+242
-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

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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+
## Building it
10+
11+
```
12+
# compile with AOT, then rollup. Noisy.
13+
npm run build:aot
14+
15+
# start server and JIT/TS watching as usual
16+
npm start
17+
```
18+
The browser displays the AOT version (`index.html`) by default.
19+
You can tell by looking at the browser tab (it says "AOT:...") and in the console.
20+
21+
To see the JIT version, put `index-jit.html` in the address bar.
22+
You can tell by looking at the browser tab (it says "JIT:...") and in the console.

‎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</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

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
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+

‎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

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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+
@Component({
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+
export class BaseComponent {
27+
@Input() speaker: string;
28+
services: string;
29+
30+
constructor(private a: ServiceA, private b: ServiceB) {
31+
this.services = `ServiceA is ${a.name}; Service B is ${b.name}`;
32+
}
33+
}

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

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

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
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+
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

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

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Component, Injectable } from '@angular/core';
2+
3+
import { BaseComponent, BASE_PROVIDERS, ServiceA } from './base.component';
4+
5+
@Injectable()
6+
export class ServiceASub {
7+
name = 'A-sub';
8+
}
9+
10+
@Component({
11+
moduleId: module.id,
12+
selector: 'sub-comp',
13+
template: `
14+
<h3>{{speaker}} sez:</h3>
15+
<p id="speak">I am the SUB component. Hear me roar.</p>
16+
<p>{{services}}</p>
17+
`,
18+
styleUrls: [ './base.component.css'] ,
19+
providers: [
20+
BASE_PROVIDERS,
21+
{provide: ServiceA, useClass: ServiceASub}
22+
]
23+
})
24+
export class SubComponent extends BaseComponent {
25+
}

‎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-jit.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
<style>
8+
body {color:#369;font-family: Arial,Helvetica,sans-serif;}
9+
</style>
10+
11+
<!-- Polyfills for older browsers -->
12+
<script src="node_modules/core-js/client/shim.min.js"></script>
13+
14+
<script src="node_modules/zone.js/dist/zone.js"></script>
15+
<script src="node_modules/systemjs/dist/system.src.js"></script>
16+
<script src="systemjs.config.js"></script>
17+
<script>
18+
System.import('app/main-jit').catch(function(err){ console.error(err); });
19+
</script>
20+
</head>
21+
22+
<body>
23+
<my-app>Loading AppComponent content here ...</my-app>
24+
</body>
25+
26+
</html>

‎public/docs/_examples/inheritance/ts/index.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/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.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.ts"
17+
],
18+
19+
"angularCompilerOptions": {
20+
"genDir": "aot",
21+
"skipMetadataEmit" : true
22+
}
23+
}

0 commit comments

Comments
 (0)