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

Commit 6813ced

Browse files
thelgevoldwardbell
thelgevold
authored and
wardbell
committed
docs(cookbook - aot compiler) (#2161)
docs(cb-aot-compiler): new cookbook on AoT compiler
1 parent 97736ad commit 6813ced

File tree

14 files changed

+470
-2
lines changed

14 files changed

+470
-2
lines changed

‎public/docs/_examples/cb-aot-compiler/e2e-spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/// <reference path='../_protractor/e2e.d.ts' />
2+
'use strict';
3+
/* tslint:disable:quotemark */
4+
describe('AOT Compilation', function () {
5+
6+
beforeAll(function () {
7+
browser.get('');
8+
});
9+
10+
it('should load page and click button', function (done) {
11+
let headingSelector = element.all(by.css('h1')).get(0);
12+
expect(headingSelector.getText()).toEqual('My First Angular 2 App');
13+
14+
expect(element.all(by.xpath('//div[text()="Magneta"]')).get(0).isPresent()).toBe(true);
15+
expect(element.all(by.xpath('//div[text()="Bombasto"]')).get(0).isPresent()).toBe(true);
16+
expect(element.all(by.xpath('//div[text()="Magma"]')).get(0).isPresent()).toBe(true);
17+
expect(element.all(by.xpath('//div[text()="Tornado"]')).get(0).isPresent()).toBe(true);
18+
19+
let toggleButton = element.all(by.css('button')).get(0);
20+
toggleButton.click().then(function() {
21+
expect(headingSelector.isPresent()).toBe(false);
22+
done();
23+
});
24+
});
25+
});

‎public/docs/_examples/cb-aot-compiler/ts/.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
**/*.ngfactory.ts
2+
**/*.metadata.json
3+
dist
4+
!app/tsconfig.json
5+
!rollup.js

‎public/docs/_examples/cb-aot-compiler/ts/app/app.component.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!-- #docregion -->
2+
<button (click)="toggleHeading()">Toggle Heading</button>
3+
<h1 *ngIf="showHeading">My First Angular 2 App</h1>
4+
5+
<h3>List of Heroes</h3>
6+
<div *ngFor="let hero of heroes">{{hero}}</div>
7+

‎public/docs/_examples/cb-aot-compiler/ts/app/app.component.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// #docregion
2+
// #docregion
3+
import { Component } from '@angular/core';
4+
5+
@Component({
6+
selector: 'my-app',
7+
templateUrl: 'app.component.html'
8+
})
9+
export class AppComponent {
10+
showHeading = true;
11+
heroes = ['Magneta', 'Bombasto', 'Magma', 'Tornado'];
12+
13+
toggleHeading() {
14+
this.showHeading = !this.showHeading;
15+
}
16+
17+
}

‎public/docs/_examples/cb-aot-compiler/ts/app/app.module.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// #docregion
2+
import { NgModule } from '@angular/core';
3+
import { BrowserModule } from '@angular/platform-browser';
4+
5+
import { AppComponent } from './app.component';
6+
7+
@NgModule({
8+
imports: [ BrowserModule ],
9+
declarations: [ AppComponent ],
10+
bootstrap: [ AppComponent ]
11+
})
12+
export class AppModule { }

‎public/docs/_examples/cb-aot-compiler/ts/app/main-jit.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// #docregion
2+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3+
4+
import { AppModule } from './app.module';
5+
6+
platformBrowserDynamic().bootstrapModule(AppModule);

‎public/docs/_examples/cb-aot-compiler/ts/app/main.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// #docregion
2+
import { platformBrowser } from '@angular/platform-browser';
3+
4+
import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
5+
6+
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

‎public/docs/_examples/cb-aot-compiler/ts/example-config.json

Lines changed: 4 additions & 0 deletions
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/cb-aot-compiler/ts/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!-- #docregion -->
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<title>Ahead of time compilation</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+
<script src="node_modules/reflect-metadata/Reflect.js"></script>
13+
14+
</head>
15+
16+
<!-- #docregion bundle -->
17+
<body>
18+
<my-app>Loading...</my-app>
19+
</body>
20+
21+
<script src="dist/build.js"></script>
22+
<!-- #enddocregion bundle -->
23+
</html>

‎public/docs/_examples/cb-aot-compiler/ts/rollup.js

Lines changed: 25 additions & 0 deletions
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/cb-aot-compiler/ts/tsconfig-aot.json

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

‎public/docs/_examples/package.json

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"start:webpack": "webpack-dev-server --inline --progress --port 8080",
2020
"test:webpack": "karma start karma.webpack.conf.js",
2121
"build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
22-
"build:cli": "ng build"
22+
"build:cli": "ng build",
23+
"build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup.js"
2324
},
2425
"keywords": [],
2526
"author": "",
@@ -33,12 +34,16 @@
3334
"@angular/http": "2.0.0-rc.7",
3435
"@angular/platform-browser": "2.0.0-rc.7",
3536
"@angular/platform-browser-dynamic": "2.0.0-rc.7",
37+
"@angular/platform-server": "2.0.0-rc.7",
3638
"@angular/router": "3.0.0-rc.3",
3739
"@angular/upgrade": "2.0.0-rc.7",
3840
"angular2-in-memory-web-api": "0.0.19",
3941
"bootstrap": "^3.3.6",
4042
"core-js": "^2.4.1",
4143
"reflect-metadata": "^0.1.3",
44+
"rollup": "^0.34.13",
45+
"rollup-plugin-node-resolve": "^2.0.0",
46+
"rollup-plugin-uglify": "^1.0.1",
4247
"rxjs": "5.0.0-beta.12",
4348
"systemjs": "0.19.27",
4449
"zone.js": "^0.6.21"
@@ -71,11 +76,12 @@
7176
"protractor": "^3.3.0",
7277
"raw-loader": "^0.5.1",
7378
"rimraf": "^2.5.2",
79+
"rollup-plugin-commonjs": "^4.1.0",
7480
"style-loader": "^0.13.1",
7581
"ts-loader": "^0.8.2",
7682
"ts-node": "^0.7.3",
7783
"tslint": "^3.15.1",
78-
"typescript": "^1.8.10",
84+
"typescript": "2.0.2",
7985
"typings": "^1.3.2",
8086
"webpack": "^1.13.0",
8187
"webpack-dev-server": "^1.14.1",

‎public/docs/ts/latest/cookbook/_data.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@
55
"description": "A collection of recipes for common Angular application scenarios"
66
},
77

8+
"aot-compiler": {
9+
"title": "Ahead of Time Compiler",
10+
"intro": "Learn how to use the Ahead of Time Compiler"
11+
},
12+
813
"a1-a2-quick-reference": {
914
"title": "Angular 1 to 2 Quick Reference",
1015
"navTitle": "Angular 1 to 2 Quick Ref",

0 commit comments

Comments
 (0)