;
+
+ activate() {
+ this.active = !this.active;
+ this.views.forEach(
+ view => view.activate()
+ );
+ }
+
+ // #docregion defined-property
+ get buttonLabel() {
+ return this.active ? 'Deactivate' : 'Activate';
+ }
+ // #enddocregion defined-property
+}
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.html
new file mode 100644
index 0000000000..164683cb7c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.html
@@ -0,0 +1,4 @@
+
+{{titlePrefix}} {{title}}
+OK
+{{ msg }}
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.ts
new file mode 100644
index 0000000000..48aaae7d44
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.ts
@@ -0,0 +1,21 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+// #docregion templateUrl
+@Component({
+ selector: 'hero-title',
+ templateUrl: './hero-title.component.html'
+})
+// #enddocregion templateUrl
+export class HeroTitleComponent {
+ msg: string = '';
+ constructor(
+ @Inject('titlePrefix') @Optional() private titlePrefix: string,
+ @Attribute('title') private title: string
+ ) { }
+
+ ok() {
+ this.msg = 'OK!';
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero.component.ts
new file mode 100644
index 0000000000..2976ec605e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero.component.ts
@@ -0,0 +1,15 @@
+// #docregion
+// #docregion metadata
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'hero-view',
+ template: '{{title}}: {{getName()}} '
+})
+// #docregion appexport, class
+export class HeroComponent {
+ title = 'Hero Detail';
+ getName() {return 'Windstorm'; }
+}
+// #enddocregion appexport, class
+// #enddocregion metadata
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/index.html b/public/docs/_examples/cb-ts-to-js/ts/src/index.html
new file mode 100644
index 0000000000..d9ad1f7aef
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/index.html
@@ -0,0 +1,26 @@
+
+
+
+ TypeScript to JavaScript
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/main.ts b/public/docs/_examples/cb-ts-to-js/ts/src/main.ts
new file mode 100644
index 0000000000..f22933ba8e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/main.ts
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-visual-studio-2015/ts/.gitignore b/public/docs/_examples/cb-visual-studio-2015/ts/.gitignore
new file mode 100644
index 0000000000..ca3f2dbd5e
--- /dev/null
+++ b/public/docs/_examples/cb-visual-studio-2015/ts/.gitignore
@@ -0,0 +1 @@
+!tsconfig.json
diff --git a/public/docs/_examples/cb-visual-studio-2015/ts/tsconfig.json b/public/docs/_examples/cb-visual-studio-2015/ts/tsconfig.json
new file mode 100644
index 0000000000..2624488890
--- /dev/null
+++ b/public/docs/_examples/cb-visual-studio-2015/ts/tsconfig.json
@@ -0,0 +1,17 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "module": "commonjs",
+ "moduleResolution": "node",
+ "sourceMap": true,
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "removeComments": false,
+ "noImplicitAny": true,
+ "suppressImplicitAnyIndexErrors": true,
+ "typeRoots": [
+ "node_modules/@types"
+ ]
+ },
+ "compileOnSave": true
+}
diff --git a/public/docs/_examples/cli-quickstart/e2e-spec.ts b/public/docs/_examples/cli-quickstart/e2e-spec.ts
new file mode 100644
index 0000000000..59816e13c2
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/e2e-spec.ts
@@ -0,0 +1,14 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('cli-quickstart App', () => {
+ beforeEach(() => {
+ return browser.get('/');
+ });
+
+ it('should display message saying app works', () => {
+ let pageTitle = element(by.css('app-root h1')).getText();
+ expect(pageTitle).toEqual('My First Angular App');
+ });
+});
diff --git a/public/docs/_examples/cli-quickstart/ts/.angular-cli.json b/public/docs/_examples/cli-quickstart/ts/.angular-cli.json
new file mode 100644
index 0000000000..49a6b93bd0
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/.angular-cli.json
@@ -0,0 +1,57 @@
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "project": {
+ "name": "master-project"
+ },
+ "apps": [
+ {
+ "root": "src",
+ "outDir": "dist",
+ "assets": [
+ "assets",
+ "favicon.ico"
+ ],
+ "index": "index.html",
+ "main": "main.ts",
+ "polyfills": "polyfills.ts",
+ "test": "test.ts",
+ "tsconfig": "tsconfig.app.json",
+ "testTsconfig": "tsconfig.spec.json",
+ "prefix": "app",
+ "styles": [
+ "styles.css"
+ ],
+ "scripts": [],
+ "environmentSource": "environments/environment.ts",
+ "environments": {
+ "dev": "environments/environment.ts",
+ "prod": "environments/environment.prod.ts"
+ }
+ }
+ ],
+ "e2e": {
+ "protractor": {
+ "config": "./protractor.conf.js"
+ }
+ },
+ "lint": [
+ {
+ "project": "src/tsconfig.app.json"
+ },
+ {
+ "project": "src/tsconfig.spec.json"
+ },
+ {
+ "project": "e2e/tsconfig.e2e.json"
+ }
+ ],
+ "test": {
+ "karma": {
+ "config": "./karma.conf.js"
+ }
+ },
+ "defaults": {
+ "styleExt": "css",
+ "component": {}
+ }
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/.editorconfig b/public/docs/_examples/cli-quickstart/ts/.editorconfig
new file mode 100644
index 0000000000..6e87a003da
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/public/docs/_examples/cli-quickstart/ts/.gitignore b/public/docs/_examples/cli-quickstart/ts/.gitignore
new file mode 100644
index 0000000000..04a48dc643
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/.gitignore
@@ -0,0 +1,45 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage/*
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+#System Files
+.DS_Store
+Thumbs.db
+
+!src/styles.css
+!karma.conf.js
+!protractor.conf.js
diff --git a/public/docs/_examples/cli-quickstart/ts/README.md b/public/docs/_examples/cli-quickstart/ts/README.md
new file mode 100644
index 0000000000..efe9ec67ae
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/README.md
@@ -0,0 +1,27 @@
+# MasterProject
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.0.
+
+## Development server
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/public/docs/_examples/cli-quickstart/ts/bs-config.cli.json b/public/docs/_examples/cli-quickstart/ts/bs-config.cli.json
new file mode 100644
index 0000000000..ac61d35f83
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/bs-config.cli.json
@@ -0,0 +1,11 @@
+{
+ "open": false,
+ "logLevel": "silent",
+ "port": 8080,
+ "server": {
+ "baseDir": "dist",
+ "middleware": {
+ "0": null
+ }
+ }
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/e2e/app.e2e-spec.ts b/public/docs/_examples/cli-quickstart/ts/e2e/app.e2e-spec.ts
new file mode 100644
index 0000000000..4346d120c8
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/e2e/app.e2e-spec.ts
@@ -0,0 +1,14 @@
+import { MyAppPage } from './app.po';
+
+describe('my-app App', function() {
+ let page: MyAppPage;
+
+ beforeEach(() => {
+ page = new MyAppPage();
+ });
+
+ it('should display message saying app works', () => {
+ page.navigateTo();
+ expect(page.getParagraphText()).toEqual('app works!');
+ });
+});
diff --git a/public/docs/_examples/cli-quickstart/ts/e2e/app.po.ts b/public/docs/_examples/cli-quickstart/ts/e2e/app.po.ts
new file mode 100644
index 0000000000..5d82157326
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/e2e/app.po.ts
@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class MyAppPage {
+ navigateTo() {
+ return browser.get('/');
+ }
+
+ getParagraphText() {
+ return element(by.css('app-root h1')).getText();
+ }
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/e2e/tsconfig.e2e.json b/public/docs/_examples/cli-quickstart/ts/e2e/tsconfig.e2e.json
new file mode 100644
index 0000000000..74c2bca131
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/e2e/tsconfig.e2e.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "sourceMap": true,
+ "declaration": false,
+ "moduleResolution": "node",
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": [
+ "es2016"
+ ],
+ "outDir": "../dist/out-tsc-e2e",
+ "module": "commonjs",
+ "target": "es6",
+ "types":[
+ "jasmine",
+ "node"
+ ]
+ }
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/example-config.json b/public/docs/_examples/cli-quickstart/ts/example-config.json
new file mode 100644
index 0000000000..313764c3c6
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/example-config.json
@@ -0,0 +1,4 @@
+{
+ "build": "build:cli",
+ "run": "serve:cli"
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/karma.conf.js b/public/docs/_examples/cli-quickstart/ts/karma.conf.js
new file mode 100644
index 0000000000..84b4cd5aca
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/karma.conf.js
@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+ config.set({
+ basePath: '',
+ frameworks: ['jasmine', '@angular/cli'],
+ plugins: [
+ require('karma-jasmine'),
+ require('karma-chrome-launcher'),
+ require('karma-jasmine-html-reporter'),
+ require('karma-coverage-istanbul-reporter'),
+ require('@angular/cli/plugins/karma')
+ ],
+ client:{
+ clearContext: false // leave Jasmine Spec Runner output visible in browser
+ },
+ files: [
+ { pattern: './src/test.ts', watched: false }
+ ],
+ preprocessors: {
+ './src/test.ts': ['@angular/cli']
+ },
+ mime: {
+ 'text/x-typescript': ['ts','tsx']
+ },
+ coverageIstanbulReporter: {
+ reports: [ 'html', 'lcovonly' ],
+ fixWebpackSourcePaths: true
+ },
+ angularCli: {
+ environment: 'dev'
+ },
+ reporters: config.angularCli && config.angularCli.codeCoverage
+ ? ['progress', 'coverage-istanbul']
+ : ['progress', 'kjhtml'],
+ port: 9876,
+ colors: true,
+ logLevel: config.LOG_INFO,
+ autoWatch: true,
+ browsers: ['Chrome'],
+ singleRun: false
+ });
+};
diff --git a/public/docs/_examples/cli-quickstart/ts/protractor.conf.js b/public/docs/_examples/cli-quickstart/ts/protractor.conf.js
new file mode 100644
index 0000000000..2cbc329391
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/protractor.conf.js
@@ -0,0 +1,31 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+/*global jasmine */
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+ allScriptsTimeout: 11000,
+ specs: [
+ './e2e/**/*.e2e-spec.ts'
+ ],
+ capabilities: {
+ 'browserName': 'chrome'
+ },
+ directConnect: true,
+ baseUrl: 'http://localhost:4200/',
+ framework: 'jasmine',
+ jasmineNodeOpts: {
+ showColors: true,
+ defaultTimeoutInterval: 30000,
+ print: function() {}
+ },
+ beforeLaunch: function() {
+ require('ts-node').register({
+ project: 'e2e/tsconfig.e2e.json'
+ });
+ },
+ onPrepare() {
+ jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+ }
+};
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/app.component.css b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.css
new file mode 100644
index 0000000000..a2b21fae82
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.css
@@ -0,0 +1,6 @@
+/* #docregion */
+h1 {
+ color: #369;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 250%;
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/app.component.html b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.html
new file mode 100644
index 0000000000..b6931b538a
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.html
@@ -0,0 +1,3 @@
+
+ {{title}}
+
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/app.component.spec.ts b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.spec.ts
new file mode 100644
index 0000000000..c740bcd745
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [
+ AppComponent
+ ],
+ }).compileComponents();
+ }));
+
+ it('should create the app', async(() => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.debugElement.componentInstance;
+ expect(app).toBeTruthy();
+ }));
+
+ it(`should have as title 'app works!'`, async(() => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.debugElement.componentInstance;
+ expect(app.title).toEqual('app works!');
+ }));
+
+ it('should render title in a h1 tag', async(() => {
+ const fixture = TestBed.createComponent(AppComponent);
+ fixture.detectChanges();
+ const compiled = fixture.debugElement.nativeElement;
+ expect(compiled.querySelector('h1').textContent).toContain('app works!');
+ }));
+});
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/app.component.ts b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..4c1b4a9bf7
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/app/app.component.ts
@@ -0,0 +1,16 @@
+// #docregion import
+import { Component } from '@angular/core';
+// #enddocregion import
+
+// #docregion metadata
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.css']
+})
+// #enddocregion metadata
+// #docregion title, class
+export class AppComponent {
+ title = 'My First Angular App';
+}
+// #enddocregion title, class
diff --git a/public/docs/_examples/cli-quickstart/ts/src/app/app.module.ts b/public/docs/_examples/cli-quickstart/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..67ae49119b
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/app/app.module.ts
@@ -0,0 +1,20 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ declarations: [
+ AppComponent
+ ],
+ imports: [
+ BrowserModule,
+ FormsModule,
+ HttpModule
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/cli-quickstart/ts/src/assets/.gitkeep b/public/docs/_examples/cli-quickstart/ts/src/assets/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cli-quickstart/ts/src/environments/environment.prod.ts b/public/docs/_examples/cli-quickstart/ts/src/environments/environment.prod.ts
new file mode 100644
index 0000000000..3612073bc3
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: true
+};
diff --git a/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts b/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts
new file mode 100644
index 0000000000..b7f639aeca
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/environments/environment.ts
@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+ production: false
+};
diff --git a/public/docs/_examples/cli-quickstart/ts/src/favicon.ico b/public/docs/_examples/cli-quickstart/ts/src/favicon.ico
new file mode 100644
index 0000000000..8081c7ceaf
Binary files /dev/null and b/public/docs/_examples/cli-quickstart/ts/src/favicon.ico differ
diff --git a/public/docs/_examples/cli-quickstart/ts/src/index.html b/public/docs/_examples/cli-quickstart/ts/src/index.html
new file mode 100644
index 0000000000..8a1a7b32b3
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/index.html
@@ -0,0 +1,14 @@
+
+
+
+ MyApp
+ Loading...
+
+
diff --git a/public/docs/_examples/cli-quickstart/ts/src/main.ts b/public/docs/_examples/cli-quickstart/ts/src/main.ts
new file mode 100644
index 0000000000..a9ca1caf8c
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+ enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts b/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts
new file mode 100644
index 0000000000..53bdaf1b86
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/polyfills.ts
@@ -0,0 +1,68 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ * file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js'; // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl'; // Run `npm install --save intl`.
diff --git a/public/docs/_examples/cli-quickstart/ts/src/styles.css b/public/docs/_examples/cli-quickstart/ts/src/styles.css
new file mode 100644
index 0000000000..d81835d0cd
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/styles.css
@@ -0,0 +1,116 @@
+/* #docregion , quickstart, toh */
+/* Master Styles */
+h1 {
+ color: #369;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 250%;
+}
+h2, h3 {
+ color: #444;
+ font-family: Arial, Helvetica, sans-serif;
+ font-weight: lighter;
+}
+body {
+ margin: 2em;
+}
+/* #enddocregion quickstart */
+body, input[text], button {
+ color: #888;
+ font-family: Cambria, Georgia;
+}
+/* #enddocregion toh */
+a {
+ cursor: pointer;
+ cursor: hand;
+}
+button {
+ font-family: Arial;
+ background-color: #eee;
+ border: none;
+ padding: 5px 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ cursor: hand;
+}
+button:hover {
+ background-color: #cfd8dc;
+}
+button:disabled {
+ background-color: #eee;
+ color: #aaa;
+ cursor: auto;
+}
+
+/* Navigation link styles */
+nav a {
+ padding: 5px 10px;
+ text-decoration: none;
+ margin-right: 10px;
+ margin-top: 10px;
+ display: inline-block;
+ background-color: #eee;
+ border-radius: 4px;
+}
+nav a:visited, a:link {
+ color: #607D8B;
+}
+nav a:hover {
+ color: #039be5;
+ background-color: #CFD8DC;
+}
+nav a.active {
+ color: #039be5;
+}
+
+/* items class */
+.items {
+ margin: 0 0 2em 0;
+ list-style-type: none;
+ padding: 0;
+ width: 24em;
+}
+.items li {
+ cursor: pointer;
+ position: relative;
+ left: 0;
+ background-color: #EEE;
+ margin: .5em;
+ padding: .3em 0;
+ height: 1.6em;
+ border-radius: 4px;
+}
+.items li:hover {
+ color: #607D8B;
+ background-color: #DDD;
+ left: .1em;
+}
+.items li.selected {
+ background-color: #CFD8DC;
+ color: white;
+}
+.items li.selected:hover {
+ background-color: #BBD8DC;
+}
+.items .text {
+ position: relative;
+ top: -3px;
+}
+.items .badge {
+ display: inline-block;
+ font-size: small;
+ color: white;
+ padding: 0.8em 0.7em 0 0.7em;
+ background-color: #607D8B;
+ line-height: 1em;
+ position: relative;
+ left: -1px;
+ top: -4px;
+ height: 1.8em;
+ margin-right: .8em;
+ border-radius: 4px 0 0 4px;
+}
+/* #docregion toh */
+/* everywhere else */
+* {
+ font-family: Arial, Helvetica, sans-serif;
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/src/test.ts b/public/docs/_examples/cli-quickstart/ts/src/test.ts
new file mode 100644
index 0000000000..9bf72267e9
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/test.ts
@@ -0,0 +1,32 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();
diff --git a/public/docs/_examples/cli-quickstart/ts/src/tsconfig.app.json b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.app.json
new file mode 100644
index 0000000000..9f12c4b849
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.app.json
@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "sourceMap": true,
+ "declaration": false,
+ "moduleResolution": "node",
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": [
+ "es2016",
+ "dom"
+ ],
+ "outDir": "../out-tsc/app",
+ "target": "es5",
+ "module": "es2015",
+ "baseUrl": "",
+ "types": []
+ },
+ "exclude": [
+ "test.ts",
+ "**/*.spec.ts"
+ ]
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/src/tsconfig.spec.json b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.spec.json
new file mode 100644
index 0000000000..6c5160e12e
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/src/tsconfig.spec.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "sourceMap": true,
+ "declaration": false,
+ "moduleResolution": "node",
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": [
+ "es2016"
+ ],
+ "outDir": "../out-tsc/spec",
+ "module": "commonjs",
+ "target": "es6",
+ "baseUrl": "",
+ "types": [
+ "jasmine",
+ "node"
+ ]
+ },
+ "files": [
+ "test.ts"
+ ],
+ "include": [
+ "**/*.spec.ts"
+ ]
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/tsconfig.json b/public/docs/_examples/cli-quickstart/ts/tsconfig.json
new file mode 100644
index 0000000000..cde5e35054
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/tsconfig.json
@@ -0,0 +1,14 @@
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "outDir": "./dist/out-tsc",
+ "sourceMap": true,
+ "declaration": false,
+ "moduleResolution": "node",
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": [
+ "es2016"
+ ]
+ }
+}
diff --git a/public/docs/_examples/cli-quickstart/ts/zipper.json b/public/docs/_examples/cli-quickstart/ts/zipper.json
new file mode 100644
index 0000000000..70bf41659e
--- /dev/null
+++ b/public/docs/_examples/cli-quickstart/ts/zipper.json
@@ -0,0 +1,11 @@
+{
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!**/*.[0-9].*",
+ ".angular-cli.json",
+ "protractor.conf.js"
+ ],
+ "removeSystemJsConfig": true,
+ "type": "cli"
+}
diff --git a/public/docs/_examples/component-styles/e2e-spec.ts b/public/docs/_examples/component-styles/e2e-spec.ts
new file mode 100644
index 0000000000..32bd30832c
--- /dev/null
+++ b/public/docs/_examples/component-styles/e2e-spec.ts
@@ -0,0 +1,68 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Component Style Tests', function () {
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ it('scopes component styles to component view', function() {
+ let componentH1 = element(by.css('hero-app > h1'));
+ let externalH1 = element(by.css('body > h1'));
+
+ expect(componentH1.getCssValue('fontWeight')).toEqual('normal');
+ expect(externalH1.getCssValue('fontWeight')).not.toEqual('normal');
+ });
+
+
+ it('allows styling :host element', function() {
+ let host = element(by.css('hero-details'));
+
+ expect(host.getCssValue('borderWidth')).toEqual('1px');
+ });
+
+ it('supports :host() in function form', function() {
+ let host = element(by.css('hero-details'));
+
+ host.element(by.buttonText('Activate')).click();
+ expect(host.getCssValue('borderWidth')).toEqual('3px');
+ });
+
+ it('allows conditional :host-context() styling', function() {
+ let h2 = element(by.css('hero-details h2'));
+
+ expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
+ });
+
+ it('styles both view and content children with /deep/', function() {
+ let viewH3 = element(by.css('hero-team h3'));
+ let contentH3 = element(by.css('hero-controls h3'));
+
+ expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
+ expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
+ });
+
+ it('includes styles loaded with CSS @import', function() {
+ let host = element(by.css('hero-details'));
+
+ expect(host.getCssValue('padding')).toEqual('10px');
+ });
+
+ it('processes template inline styles', function() {
+ let button = element(by.css('hero-controls button'));
+ let externalButton = element(by.css('body > button'));
+ expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
+ expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
+ });
+
+ it('processes template
+
+ `
+})
+export class HeroAppMainComponent {
+ @Input() hero: Hero;
+}
diff --git a/public/docs/_examples/component-styles/ts/src/app/hero-app.component.ts b/public/docs/_examples/component-styles/ts/src/app/hero-app.component.ts
new file mode 100644
index 0000000000..5f1923e6f3
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/src/app/hero-app.component.ts
@@ -0,0 +1,24 @@
+import { Component, HostBinding } from '@angular/core';
+import { Hero } from './hero';
+
+// #docregion
+@Component({
+ selector: 'hero-app',
+ template: `
+ Tour of Heroes
+ Controls
+ Activate
+ `
+})
+// #enddocregion inlinestyles
+export class HeroControlsComponent {
+ @Input() hero: Hero;
+
+ activate() {
+ this.hero.active = true;
+ }
+}
diff --git a/public/docs/_examples/component-styles/ts/src/app/hero-details-box.css b/public/docs/_examples/component-styles/ts/src/app/hero-details-box.css
new file mode 100644
index 0000000000..f240073005
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/src/app/hero-details-box.css
@@ -0,0 +1,3 @@
+:host {
+ padding: 10px;
+}
diff --git a/public/docs/_examples/component-styles/ts/src/app/hero-details.component.css b/public/docs/_examples/component-styles/ts/src/app/hero-details.component.css
new file mode 100644
index 0000000000..fd938ca55c
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/src/app/hero-details.component.css
@@ -0,0 +1,28 @@
+/* #docregion import */
+@import 'hero-details-box.css';
+/* #enddocregion import */
+
+/* #docregion host */
+:host {
+ display: block;
+ border: 1px solid black;
+}
+/* #enddocregion host */
+
+/* #docregion hostfunction */
+:host(.active) {
+ border-width: 3px;
+}
+/* #enddocregion hostfunction */
+
+/* #docregion hostcontext */
+:host-context(.theme-light) h2 {
+ background-color: #eef;
+}
+/* #enddocregion hostcontext */
+
+/* #docregion deep */
+:host /deep/ h3 {
+ font-style: italic;
+}
+/* #enddocregion deep */
diff --git a/public/docs/_examples/component-styles/ts/src/app/hero-details.component.ts b/public/docs/_examples/component-styles/ts/src/app/hero-details.component.ts
new file mode 100644
index 0000000000..bd86a63e04
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/src/app/hero-details.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { Hero } from './hero';
+
+// #docregion styleurls
+@Component({
+ selector: 'hero-details',
+ template: `
+ {{hero.name}}
+ Team
+ `
+})
+// #enddocregion stylelink
+export class HeroTeamComponent {
+ @Input() hero: Hero;
+}
diff --git a/public/docs/_examples/component-styles/ts/src/app/hero.ts b/public/docs/_examples/component-styles/ts/src/app/hero.ts
new file mode 100644
index 0000000000..7f8969e682
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/src/app/hero.ts
@@ -0,0 +1,7 @@
+export class Hero {
+ active: boolean;
+
+ constructor(public name: string,
+ public team: string[]) {
+ }
+}
diff --git a/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.css b/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.css
new file mode 100644
index 0000000000..207fa981dd
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.css
@@ -0,0 +1,5 @@
+:host {
+ display: block;
+ background-color: green;
+ color: white;
+}
diff --git a/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.html b/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.html
new file mode 100644
index 0000000000..ace27d2a1c
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.html
@@ -0,0 +1 @@
+No quests in progress
diff --git a/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.ts b/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.ts
new file mode 100644
index 0000000000..2a2dc65fe0
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.ts
@@ -0,0 +1,20 @@
+/* tslint:disable:no-unused-variable */
+// #docplaster
+import { Component, ViewEncapsulation } from '@angular/core';
+
+// #docregion
+@Component({
+ selector: 'quest-summary',
+ // #docregion urls
+ templateUrl: './quest-summary.component.html',
+ styleUrls: ['./quest-summary.component.css']
+ // #enddocregion urls
+})
+export class QuestSummaryComponent { }
+// #enddocregion
+/*
+ // #docregion encapsulation.native
+ // warning: few browsers support shadow DOM encapsulation at this time
+ encapsulation: ViewEncapsulation.Native
+ // #enddocregion encapsulation.native
+*/
diff --git a/public/docs/_examples/component-styles/ts/src/index.html b/public/docs/_examples/component-styles/ts/src/index.html
new file mode 100644
index 0000000000..6e9dc51b32
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/src/index.html
@@ -0,0 +1,31 @@
+
+
+
+ Component Styles
+ External H1 Title for E2E test
+ External button for E2E test
+
+ External list for E2E test
+
+
+
+
diff --git a/public/docs/_examples/component-styles/ts/src/main.ts b/public/docs/_examples/component-styles/ts/src/main.ts
new file mode 100644
index 0000000000..6b6532d428
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/src/main.ts
@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/dependency-injection/e2e-spec.ts b/public/docs/_examples/dependency-injection/e2e-spec.ts
new file mode 100644
index 0000000000..5b46dd77d9
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/e2e-spec.ts
@@ -0,0 +1,199 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by, ElementFinder } from 'protractor';
+
+describe('Dependency Injection Tests', function () {
+
+ let expectedMsg: string;
+ let expectedMsgRx: RegExp;
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ describe('Cars:', function() {
+
+ it('DI car displays as expected', function () {
+ expectedMsg = 'DI car with 4 cylinders and Flintstone tires.';
+ expect(element(by.css('#di')).getText()).toEqual(expectedMsg);
+ });
+
+ it('No DI car displays as expected', function () {
+ expectedMsg = 'No DI car with 4 cylinders and Flintstone tires.';
+ expect(element(by.css('#nodi')).getText()).toEqual(expectedMsg);
+ });
+
+ it('Injector car displays as expected', function () {
+ expectedMsg = 'Injector car with 4 cylinders and Flintstone tires.';
+ expect(element(by.css('#injector')).getText()).toEqual(expectedMsg);
+ });
+
+ it('Factory car displays as expected', function () {
+ expectedMsg = 'Factory car with 4 cylinders and Flintstone tires.';
+ expect(element(by.css('#factory')).getText()).toEqual(expectedMsg);
+ });
+
+ it('Simple car displays as expected', function () {
+ expectedMsg = 'Simple car with 4 cylinders and Flintstone tires.';
+ expect(element(by.css('#simple')).getText()).toEqual(expectedMsg);
+ });
+
+ it('Super car displays as expected', function () {
+ expectedMsg = 'Super car with 12 cylinders and Flintstone tires.';
+ expect(element(by.css('#super')).getText()).toEqual(expectedMsg);
+ });
+
+ it('Test car displays as expected', function () {
+ expectedMsg = 'Test car with 8 cylinders and YokoGoodStone tires.';
+ expect(element(by.css('#test')).getText()).toEqual(expectedMsg);
+ });
+ });
+
+ describe('Other Injections:', function() {
+ it('DI car displays as expected', function () {
+ expectedMsg = 'DI car with 4 cylinders and Flintstone tires.';
+ expect(element(by.css('#car')).getText()).toEqual(expectedMsg);
+ });
+
+ it('Hero displays as expected', function () {
+ expectedMsg = 'Mr. Nice';
+ expect(element(by.css('#hero')).getText()).toEqual(expectedMsg);
+ });
+
+ it('Optional injection displays as expected', function () {
+ expectedMsg = 'R.O.U.S.\'s? I don\'t think they exist!';
+ expect(element(by.css('#rodent')).getText()).toEqual(expectedMsg);
+ });
+ });
+
+ describe('Tests:', function() {
+
+ it('Tests display as expected', function () {
+ expectedMsgRx = /Tests passed/;
+ expect(element(by.css('#tests')).getText()).toMatch(expectedMsgRx);
+ });
+
+ });
+
+ describe('Provider variations:', function() {
+
+ it('P1 (class) displays as expected', function () {
+ expectedMsg = 'Hello from logger provided with Logger class';
+ expect(element(by.css('#p1')).getText()).toEqual(expectedMsg);
+ });
+
+ it('P3 (provide) displays as expected', function () {
+ expectedMsg = 'Hello from logger provided with useClass:Logger';
+ expect(element(by.css('#p3')).getText()).toEqual(expectedMsg);
+ });
+
+ it('P4 (useClass:BetterLogger) displays as expected', function () {
+ expectedMsg = 'Hello from logger provided with useClass:BetterLogger';
+ expect(element(by.css('#p4')).getText()).toEqual(expectedMsg);
+ });
+
+ it('P5 (useClass:EvenBetterLogger - dependency) displays as expected', function () {
+ expectedMsg = 'Message to Bob: Hello from EvenBetterlogger';
+ expect(element(by.css('#p5')).getText()).toEqual(expectedMsg);
+ });
+
+ it('P6a (no alias) displays as expected', function () {
+ expectedMsg = 'Hello OldLogger (but we want NewLogger)';
+ expect(element(by.css('#p6a')).getText()).toEqual(expectedMsg);
+ });
+
+ it('P6b (alias) displays as expected', function () {
+ expectedMsg = 'Hello from NewLogger (via aliased OldLogger)';
+ expect(element(by.css('#p6b')).getText()).toEqual(expectedMsg);
+ });
+
+ it('P7 (useValue) displays as expected', function () {
+ expectedMsg = 'Silent logger says "Shhhhh!". Provided via "useValue"';
+ expect(element(by.css('#p7')).getText()).toEqual(expectedMsg);
+ });
+
+ it('P8 (useFactory) displays as expected', function () {
+ expectedMsg = 'Hero service injected successfully via heroServiceProvider';
+ expect(element(by.css('#p8')).getText()).toEqual(expectedMsg);
+ });
+
+ it('P9 (OpaqueToken) displays as expected', function () {
+ expectedMsg = 'APP_CONFIG Application title is Dependency Injection';
+ expect(element(by.css('#p9')).getText()).toEqual(expectedMsg);
+ });
+
+ it('P10 (optional dependency) displays as expected', function () {
+ expectedMsg = 'Optional logger was not available';
+ expect(element(by.css('#p10')).getText()).toEqual(expectedMsg);
+ });
+ });
+
+ describe('User/Heroes:', function() {
+ it('User is Bob - unauthorized', function () {
+ expectedMsgRx = /Bob, is not authorized/;
+ expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx);
+ });
+
+ it('should have button', function () {
+ expect(element.all(by.cssContainingText('button', 'Next User'))
+ .get(0).isDisplayed()).toBe(true, '\'Next User\' button should be displayed');
+ });
+
+ it('unauthorized user should have multiple unauthorized heroes', function () {
+ let heroes = element.all(by.css('#unauthorized hero-list div'));
+ expect(heroes.count()).toBeGreaterThan(0);
+ });
+
+ it('unauthorized user should have no secret heroes', function () {
+ let heroes = element.all(by.css('#unauthorized hero-list div'));
+ expect(heroes.count()).toBeGreaterThan(0);
+
+ let filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
+ return elem.getText().then((text: string) => {
+ return /secret/.test(text);
+ });
+ });
+
+ expect(filteredHeroes.count()).toEqual(0);
+ });
+
+ it('unauthorized user should have no authorized heroes listed', function () {
+ expect(element.all(by.css('#authorized hero-list div')).count()).toEqual(0);
+ });
+
+ describe('after button click', function() {
+
+ beforeAll(function (done: any) {
+ let buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0);
+ buttonEle.click().then(done, done);
+ });
+
+ it('User is Alice - authorized', function () {
+ expectedMsgRx = /Alice, is authorized/;
+ expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx);
+ });
+
+ it('authorized user should have multiple authorized heroes ', function () {
+ let heroes = element.all(by.css('#authorized hero-list div'));
+ expect(heroes.count()).toBeGreaterThan(0);
+ });
+
+ it('authorized user should have secret heroes', function () {
+ let heroes = element.all(by.css('#authorized hero-list div'));
+ expect(heroes.count()).toBeGreaterThan(0);
+
+ let filteredHeroes = heroes.filter(function(elem: ElementFinder, index: number){
+ return elem.getText().then(function(text: string) {
+ return /secret/.test(text);
+ });
+ });
+
+ expect(filteredHeroes.count()).toBeGreaterThan(0);
+ });
+
+ it('authorized user should have no unauthorized heroes listed', function () {
+ expect(element.all(by.css('#unauthorized hero-list div')).count()).toEqual(0);
+ });
+ });
+ });
+});
diff --git a/public/docs/_examples/dependency-injection/ts/example-config.json b/public/docs/_examples/dependency-injection/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/dependency-injection/ts/plnkr.json b/public/docs/_examples/dependency-injection/ts/plnkr.json
new file mode 100644
index 0000000000..e8d1ab24b2
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/plnkr.json
@@ -0,0 +1,10 @@
+{
+ "description": "Dependency Injection",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!**/*.[1,2].*"
+ ],
+ "tags": ["dependency", "di"]
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/app.component.1.ts b/public/docs/_examples/dependency-injection/ts/src/app/app.component.1.ts
new file mode 100644
index 0000000000..b398ebeb57
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/app.component.1.ts
@@ -0,0 +1,17 @@
+// Early versions
+
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ template: `
+ {{title}}
+ {{title}}
+ {{title}}
+ User
+
+ {{userInfo}}
+ Next User
+
+ ('app.config');
+// #enddocregion token
+
+// #docregion config
+export interface AppConfig {
+ apiEndpoint: string;
+ title: string;
+}
+
+export const HERO_DI_CONFIG: AppConfig = {
+ apiEndpoint: 'api.heroes.com',
+ title: 'Dependency Injection'
+};
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/app.module.ts b/public/docs/_examples/dependency-injection/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..67ae8ae913
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/app.module.ts
@@ -0,0 +1,60 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { CarComponent } from './car/car.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroListComponent } from './heroes/hero-list.component';
+import { InjectorComponent } from './injector.component';
+import { TestComponent } from './test.component';
+import { APP_CONFIG, HERO_DI_CONFIG } from './app.config';
+import { UserService } from './user.service';
+import {
+ ProvidersComponent,
+ Provider1Component,
+ Provider3Component,
+ Provider4Component,
+ Provider5Component,
+ Provider6aComponent,
+ Provider6bComponent,
+ Provider7Component,
+ Provider8Component,
+ Provider9Component,
+ Provider10Component,
+} from './providers.component';
+
+// #docregion ngmodule
+@NgModule({
+ imports: [
+ BrowserModule
+ ],
+ declarations: [
+ AppComponent,
+ CarComponent,
+ HeroesComponent,
+ // #enddocregion ngmodule
+ HeroListComponent,
+ InjectorComponent,
+ TestComponent,
+ ProvidersComponent,
+ Provider1Component,
+ Provider3Component,
+ Provider4Component,
+ Provider5Component,
+ Provider6aComponent,
+ Provider6bComponent,
+ Provider7Component,
+ Provider8Component,
+ Provider9Component,
+ Provider10Component,
+ // #docregion ngmodule
+ ],
+ // #docregion ngmodule-providers
+ providers: [
+ UserService,
+ { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
+ ],
+ // #enddocregion ngmodule-providers
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/car/car-creations.ts b/public/docs/_examples/dependency-injection/ts/src/app/car/car-creations.ts
new file mode 100644
index 0000000000..c758c72951
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/car/car-creations.ts
@@ -0,0 +1,46 @@
+// Examples with car and engine variations
+
+// #docplaster
+import { Car, Engine, Tires } from './car';
+
+///////// example 1 ////////////
+export function simpleCar() {
+ // #docregion car-ctor-instantiation
+ // Simple car with 4 cylinders and Flintstone tires.
+ let car = new Car(new Engine(), new Tires());
+ // #enddocregion car-ctor-instantiation
+ car.description = 'Simple';
+ return car;
+}
+
+
+///////// example 2 ////////////
+// #docregion car-ctor-instantiation-with-param
+ class Engine2 {
+ constructor(public cylinders: number) { }
+ }
+// #enddocregion car-ctor-instantiation-with-param
+export function superCar() {
+// #docregion car-ctor-instantiation-with-param
+ // Super car with 12 cylinders and Flintstone tires.
+ let bigCylinders = 12;
+ let car = new Car(new Engine2(bigCylinders), new Tires());
+// #enddocregion car-ctor-instantiation-with-param
+ car.description = 'Super';
+ return car;
+}
+
+/////////// example 3 //////////
+ // #docregion car-ctor-instantiation-with-mocks
+ class MockEngine extends Engine { cylinders = 8; }
+ class MockTires extends Tires { make = 'YokoGoodStone'; }
+
+ // #enddocregion car-ctor-instantiation-with-mocks
+export function testCar() {
+ // #docregion car-ctor-instantiation-with-mocks
+ // Test car with 8 cylinders and YokoGoodStone tires.
+ let car = new Car(new MockEngine(), new MockTires());
+ // #enddocregion car-ctor-instantiation-with-mocks
+ car.description = 'Test';
+ return car;
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/car/car-factory.ts b/public/docs/_examples/dependency-injection/ts/src/app/car/car-factory.ts
new file mode 100644
index 0000000000..06daafe63b
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/car/car-factory.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { Engine, Tires, Car } from './car';
+
+// BAD pattern!
+export class CarFactory {
+ createCar() {
+ let car = new Car(this.createEngine(), this.createTires());
+ car.description = 'Factory';
+ return car;
+ }
+
+ createEngine() {
+ return new Engine();
+ }
+
+ createTires() {
+ return new Tires();
+ }
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/car/car-injector.ts b/public/docs/_examples/dependency-injection/ts/src/app/car/car-injector.ts
new file mode 100644
index 0000000000..4f7498ee4e
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/car/car-injector.ts
@@ -0,0 +1,27 @@
+import { ReflectiveInjector } from '@angular/core';
+
+import { Car, Engine, Tires } from './car';
+import { Logger } from '../logger.service';
+
+// #docregion injector
+export function useInjector() {
+ let injector: ReflectiveInjector;
+ // #enddocregion injector
+ /*
+ // #docregion injector-no-new
+ // Cannot instantiate an ReflectiveInjector like this!
+ let injector = new ReflectiveInjector([Car, Engine, Tires]);
+ // #enddocregion injector-no-new
+ */
+ // #docregion injector, injector-create-and-call
+ injector = ReflectiveInjector.resolveAndCreate([Car, Engine, Tires]);
+ // #docregion injector-call
+ let car = injector.get(Car);
+ // #enddocregion injector-call, injector-create-and-call
+ car.description = 'Injector';
+
+ injector = ReflectiveInjector.resolveAndCreate([Logger]);
+ let logger = injector.get(Logger);
+ logger.log('Injector car.drive() said: ' + car.drive());
+ return car;
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/car/car-no-di.ts b/public/docs/_examples/dependency-injection/ts/src/app/car/car-no-di.ts
new file mode 100644
index 0000000000..9026edebc2
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/car/car-no-di.ts
@@ -0,0 +1,24 @@
+// Car without DI
+import { Engine, Tires } from './car';
+
+// #docregion car
+export class Car {
+
+ // #docregion car-ctor
+ public engine: Engine;
+ public tires: Tires;
+ public description = 'No DI';
+
+ constructor() {
+ this.engine = new Engine();
+ this.tires = new Tires();
+ }
+ // #enddocregion car-ctor
+
+ // Method using the engine and tires
+ drive() {
+ return `${this.description} car with ` +
+ `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;
+ }
+}
+// #enddocregion car
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/car/car.component.ts b/public/docs/_examples/dependency-injection/ts/src/app/car/car.component.ts
new file mode 100644
index 0000000000..9a835ef124
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/car/car.component.ts
@@ -0,0 +1,38 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { Car, Engine, Tires } from './car';
+import { Car as CarNoDi } from './car-no-di';
+import { CarFactory } from './car-factory';
+
+import { testCar,
+ simpleCar,
+ superCar } from './car-creations';
+
+import { useInjector } from './car-injector';
+
+
+@Component({
+ selector: 'my-car',
+ template: `
+ Cars
+ {{car.drive()}}
+ {{noDiCar.drive()}}
+ {{injectorCar.drive()}}
+ {{factoryCar.drive()}}
+ {{simpleCar.drive()}}
+ {{superCar.drive()}}
+ {{testCar.drive()}}
+ `,
+ providers: [Car, Engine, Tires]
+})
+export class CarComponent {
+ factoryCar = (new CarFactory).createCar();
+ injectorCar = useInjector();
+ noDiCar = new CarNoDi;
+ simpleCar = simpleCar();
+ superCar = superCar();
+ testCar = testCar();
+
+ constructor(public car: Car) {}
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/car/car.ts b/public/docs/_examples/dependency-injection/ts/src/app/car/car.ts
new file mode 100644
index 0000000000..37162c570b
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/car/car.ts
@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+
+export class Engine {
+ public cylinders = 4;
+}
+
+export class Tires {
+ public make = 'Flintstone';
+ public model = 'Square';
+}
+
+@Injectable()
+export class Car {
+ // #docregion car-ctor
+ public description = 'DI';
+
+ constructor(public engine: Engine, public tires: Tires) { }
+ // #enddocregion car-ctor
+
+ // Method using the engine and tires
+ drive() {
+ return `${this.description} car with ` +
+ `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;
+ }
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.1.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.1.ts
new file mode 100644
index 0000000000..ba32366aa9
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.1.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { HEROES } from './mock-heroes';
+
+@Component({
+ selector: 'hero-list',
+ template: `
+
+ {{hero.id}} - {{hero.name}}
+
+ `
+})
+export class HeroListComponent {
+ heroes = HEROES;
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.2.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.2.ts
new file mode 100644
index 0000000000..cb23d3257c
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.2.ts
@@ -0,0 +1,31 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+import { Hero } from './hero';
+// #enddocregion
+import { HeroService } from './hero.service.1';
+/*
+// #docregion
+import { HeroService } from './hero.service';
+// #enddocregion
+*/
+// #docregion
+
+@Component({
+ selector: 'hero-list',
+ template: `
+
+ {{hero.id}} - {{hero.name}}
+
+ `
+})
+export class HeroListComponent {
+ heroes: Hero[];
+
+ // #docregion ctor
+ constructor(heroService: HeroService) {
+ this.heroes = heroService.getHeroes();
+ }
+ // #enddocregion ctor
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.ts
new file mode 100644
index 0000000000..db3a325bdb
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero-list.component.ts
@@ -0,0 +1,26 @@
+/* tslint:disable:one-line */
+// #docregion
+import { Component } from '@angular/core';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+ selector: 'hero-list',
+ template: `
+
+ {{hero.id}} - {{hero.name}}
+ ({{hero.isSecret ? 'secret' : 'public'}})
+
+ `,
+})
+export class HeroListComponent {
+ heroes: Hero[];
+
+ // #docregion ctor-signature
+ constructor(heroService: HeroService)
+ // #enddocregion ctor-signature
+ {
+ this.heroes = heroService.getHeroes();
+ }
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.1.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.1.ts
new file mode 100644
index 0000000000..2e0e3ca734
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.1.ts
@@ -0,0 +1,9 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { HEROES } from './mock-heroes';
+
+@Injectable()
+export class HeroService {
+ getHeroes() { return HEROES; }
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.2.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.2.ts
new file mode 100644
index 0000000000..6b3a98306a
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.2.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { HEROES } from './mock-heroes';
+import { Logger } from '../logger.service';
+
+@Injectable()
+export class HeroService {
+
+ // #docregion ctor
+ constructor(private logger: Logger) { }
+ // #enddocregion ctor
+
+ getHeroes() {
+ this.logger.log('Getting heroes ...');
+ return HEROES;
+ }
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.provider.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.provider.ts
new file mode 100644
index 0000000000..6de4ebee90
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.provider.ts
@@ -0,0 +1,19 @@
+/* tslint:disable:one-line */
+// #docregion
+import { HeroService } from './hero.service';
+import { Logger } from '../logger.service';
+import { UserService } from '../user.service';
+
+// #docregion factory
+let heroServiceFactory = (logger: Logger, userService: UserService) => {
+ return new HeroService(logger, userService.user.isAuthorized);
+};
+// #enddocregion factory
+
+// #docregion provider
+export let heroServiceProvider =
+ { provide: HeroService,
+ useFactory: heroServiceFactory,
+ deps: [Logger, UserService]
+ };
+// #enddocregion provider
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.ts
new file mode 100644
index 0000000000..fb03ec1de6
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.service.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+import { HEROES } from './mock-heroes';
+import { Logger } from '../logger.service';
+
+@Injectable()
+export class HeroService {
+ // #docregion internals
+ constructor(
+ private logger: Logger,
+ private isAuthorized: boolean) { }
+
+ getHeroes() {
+ let auth = this.isAuthorized ? 'authorized ' : 'unauthorized';
+ this.logger.log(`Getting heroes for ${auth} user.`);
+ return HEROES.filter(hero => this.isAuthorized || !hero.isSecret);
+ }
+ // #enddocregion internals
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.ts
new file mode 100644
index 0000000000..5c49328241
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/hero.ts
@@ -0,0 +1,6 @@
+// #docregion
+export class Hero {
+ id: number;
+ name: string;
+ isSecret = false;
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/heroes/heroes.component.1.ts b/public/docs/_examples/dependency-injection/ts/src/app/heroes/heroes.component.1.ts
new file mode 100644
index 0000000000..e0e9deae08
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/heroes/heroes.component.1.ts
@@ -0,0 +1,21 @@
+// #docplaster
+// #docregion full, v1
+import { Component } from '@angular/core';
+// #enddocregion v1
+
+import { HeroService } from './hero.service';
+// #enddocregion full
+
+// #docregion full, v1
+
+@Component({
+ selector: 'my-heroes',
+ // #enddocregion v1
+ providers: [HeroService],
+ // #docregion v1
+ template: `
+ Heroes
+ Heroes
+ Other Injections
+ {{car.drive()}}
+ {{hero.name}}
+ {{rodent}}
+ `,
+ providers: [Car, Engine, Tires, heroServiceProvider, Logger]
+})
+export class InjectorComponent implements OnInit {
+ car: Car;
+
+ // #docregion get-hero-service
+ heroService: HeroService;
+ // #enddocregion get-hero-service
+ hero: Hero;
+
+ constructor(private injector: Injector) { }
+
+ ngOnInit() {
+ this.car = this.injector.get(Car);
+ this.heroService = this.injector.get(HeroService);
+ this.hero = this.heroService.getHeroes()[0];
+ }
+
+ get rodent() {
+ let rousDontExist = `R.O.U.S.'s? I don't think they exist!`;
+ return this.injector.get(ROUS, rousDontExist);
+ }
+}
+// #enddocregion injector
+
+/**
+ * R.O.U.S. - Rodents Of Unusual Size
+ * // https://www.youtube.com/watch?v=BOv5ZjAOpC8
+ */
+class ROUS { }
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/logger.service.ts b/public/docs/_examples/dependency-injection/ts/src/app/logger.service.ts
new file mode 100644
index 0000000000..e943523ad2
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/logger.service.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Logger {
+ logs: string[] = []; // capture logs for testing
+
+ log(message: string) {
+ this.logs.push(message);
+ console.log(message);
+ }
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/providers.component.ts b/public/docs/_examples/dependency-injection/ts/src/app/providers.component.ts
new file mode 100644
index 0000000000..a96bfce99e
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/providers.component.ts
@@ -0,0 +1,267 @@
+/* tslint:disable:one-line:check-open-brace*/
+// Examples of provider arrays
+// #docplaster
+import { Component, Inject, Injectable, OnInit } from '@angular/core';
+
+import { APP_CONFIG, AppConfig,
+ HERO_DI_CONFIG } from './app.config';
+
+import { HeroService } from './heroes/hero.service';
+import { heroServiceProvider } from './heroes/hero.service.provider';
+import { Logger } from './logger.service';
+import { UserService } from './user.service';
+
+let template = '{{log}}';
+
+//////////////////////////////////////////
+@Component({
+ selector: 'provider-1',
+ template: template,
+ // #docregion providers-1, providers-logger
+ providers: [Logger]
+ // #enddocregion providers-1, providers-logger
+})
+export class Provider1Component {
+ log: string;
+ constructor(logger: Logger) {
+ logger.log('Hello from logger provided with Logger class');
+ this.log = logger.logs[0];
+ }
+}
+
+//////////////////////////////////////////
+@Component({
+ selector: 'provider-3',
+ template: template,
+ providers:
+ // #docregion providers-3
+ [{ provide: Logger, useClass: Logger }]
+ // #enddocregion providers-3
+})
+export class Provider3Component {
+ log: string;
+ constructor(logger: Logger) {
+ logger.log('Hello from logger provided with useClass:Logger');
+ this.log = logger.logs[0];
+ }
+}
+
+//////////////////////////////////////////
+class BetterLogger extends Logger {}
+
+@Component({
+ selector: 'provider-4',
+ template: template,
+ providers:
+ // #docregion providers-4
+ [{ provide: Logger, useClass: BetterLogger }]
+ // #enddocregion providers-4
+})
+export class Provider4Component {
+ log: string;
+ constructor(logger: Logger) {
+ logger.log('Hello from logger provided with useClass:BetterLogger');
+ this.log = logger.logs[0];
+ }
+}
+
+//////////////////////////////////////////
+// #docregion EvenBetterLogger
+@Injectable()
+class EvenBetterLogger extends Logger {
+ constructor(private userService: UserService) { super(); }
+
+ log(message: string) {
+ let name = this.userService.user.name;
+ super.log(`Message to ${name}: ${message}`);
+ }
+}
+// #enddocregion EvenBetterLogger
+
+@Component({
+ selector: 'provider-5',
+ template: template,
+ providers:
+ // #docregion providers-5
+ [ UserService,
+ { provide: Logger, useClass: EvenBetterLogger }]
+ // #enddocregion providers-5
+})
+export class Provider5Component {
+ log: string;
+ constructor(logger: Logger) {
+ logger.log('Hello from EvenBetterlogger');
+ this.log = logger.logs[0];
+ }
+}
+
+//////////////////////////////////////////
+class NewLogger extends Logger {}
+class OldLogger {
+ logs: string[] = [];
+ log(message: string) {
+ throw new Error('Should not call the old logger!');
+ };
+}
+
+@Component({
+ selector: 'provider-6a',
+ template: template,
+ providers:
+ // #docregion providers-6a
+ [ NewLogger,
+ // Not aliased! Creates two instances of `NewLogger`
+ { provide: OldLogger, useClass: NewLogger}]
+ // #enddocregion providers-6a
+})
+export class Provider6aComponent {
+ log: string;
+ constructor(newLogger: NewLogger, oldLogger: OldLogger) {
+ if (newLogger === oldLogger){
+ throw new Error('expected the two loggers to be different instances');
+ }
+ oldLogger.log('Hello OldLogger (but we want NewLogger)');
+ // The newLogger wasn't called so no logs[]
+ // display the logs of the oldLogger.
+ this.log = newLogger.logs[0] || oldLogger.logs[0];
+ }
+}
+
+@Component({
+ selector: 'provider-6b',
+ template: template,
+ providers:
+ // #docregion providers-6b
+ [ NewLogger,
+ // Alias OldLogger w/ reference to NewLogger
+ { provide: OldLogger, useExisting: NewLogger}]
+ // #enddocregion providers-6b
+})
+export class Provider6bComponent {
+ log: string;
+ constructor(newLogger: NewLogger, oldLogger: OldLogger) {
+ if (newLogger !== oldLogger){
+ throw new Error('expected the two loggers to be the same instance');
+ }
+ oldLogger.log('Hello from NewLogger (via aliased OldLogger)');
+ this.log = newLogger.logs[0];
+ }
+}
+
+//////////////////////////////////////////
+// #docregion silent-logger
+// An object in the shape of the logger service
+let silentLogger = {
+ logs: ['Silent logger says "Shhhhh!". Provided via "useValue"'],
+ log: () => {}
+};
+// #enddocregion silent-logger
+
+@Component({
+ selector: 'provider-7',
+ template: template,
+ providers:
+ // #docregion providers-7
+ [{ provide: Logger, useValue: silentLogger }]
+ // #enddocregion providers-7
+})
+export class Provider7Component {
+ log: string;
+ constructor(logger: Logger) {
+ logger.log('Hello from logger provided with useValue');
+ this.log = logger.logs[0];
+ }
+}
+/////////////////
+
+@Component({
+ selector: 'provider-8',
+ template: template,
+ providers: [heroServiceProvider, Logger, UserService]
+})
+export class Provider8Component {
+ // must be true else this component would have blown up at runtime
+ log = 'Hero service injected successfully via heroServiceProvider';
+
+ // #docregion provider-8-ctor
+ constructor(heroService: HeroService) { }
+ // #enddocregion provider-8-ctor
+}
+
+/////////////////
+@Component({
+ selector: 'provider-9',
+ template: template,
+ /*
+ // #docregion providers-9-interface
+ // FAIL! Can't use interface as provider token
+ [{ provide: AppConfig, useValue: HERO_DI_CONFIG })]
+ // #enddocregion providers-9-interface
+ */
+ // #docregion providers-9
+ providers: [{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }]
+ // #enddocregion providers-9
+})
+export class Provider9Component implements OnInit {
+ log: string;
+ /*
+ // #docregion provider-9-ctor-interface
+ // FAIL! Can't inject using the interface as the parameter type
+ constructor(private config: AppConfig){ }
+ // #enddocregion provider-9-ctor-interface
+ */
+ // #docregion provider-9-ctor
+ constructor(@Inject(APP_CONFIG) private config: AppConfig) { }
+ // #enddocregion provider-9-ctor
+
+ ngOnInit() {
+ this.log = 'APP_CONFIG Application title is ' + this.config.title;
+ }
+}
+//////////////////////////////////////////
+// Sample providers 1 to 7 illustrate a required logger dependency.
+// Optional logger, can be null
+// #docregion import-optional
+import { Optional } from '@angular/core';
+// #enddocregion import-optional
+
+let some_message = 'Hello from the injected logger';
+
+@Component({
+ selector: 'provider-10',
+ template: template,
+ providers: [{ provide: Logger, useValue: null }]
+})
+export class Provider10Component implements OnInit {
+ log: string;
+ // #docregion provider-10-ctor
+ constructor(@Optional() private logger: Logger) {
+ if (this.logger) {
+ this.logger.log(some_message);
+ }
+ }
+ // #enddocregion provider-10-ctor
+
+ ngOnInit() {
+ this.log = this.logger ? this.logger.logs[0] : 'Optional logger was not available';
+ }
+}
+
+/////////////////
+@Component({
+ selector: 'my-providers',
+ template: `
+ Provider variations
+
+
+
+
+
+
+
+
+
+
+ `
+})
+export class ProvidersComponent { }
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/test.component.ts b/public/docs/_examples/dependency-injection/ts/src/app/test.component.ts
new file mode 100644
index 0000000000..fc0fef75a8
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/test.component.ts
@@ -0,0 +1,55 @@
+/* tslint:disable */
+// Simulate a simple test
+// Reader should look to the testing chapter for the real thing
+
+import { Component } from '@angular/core';
+
+import { HeroService } from './heroes/hero.service';
+import { HeroListComponent } from './heroes/hero-list.component';
+
+@Component({
+ selector: 'my-tests',
+ template: `
+ Tests
+ Tests {{results.pass}}: {{results.message}}
+ `
+})
+export class TestComponent {
+ results = runTests();
+}
+
+/////////////////////////////////////
+function runTests() {
+
+ // #docregion spec
+ let expectedHeroes = [{name: 'A'}, {name: 'B'}]
+ let mockService = {getHeroes: () => expectedHeroes }
+
+ it('should have heroes when HeroListComponent created', () => {
+ let hlc = new HeroListComponent(mockService);
+ expect(hlc.heroes.length).toEqual(expectedHeroes.length);
+ });
+ // #enddocregion spec
+
+ return testResults;
+}
+
+//////////////////////////////////
+// Fake Jasmine infrastructure
+var testName: string;
+var testResults: {pass: string; message: string};
+
+function expect(actual: any) {
+ return {
+ toEqual: function(expected: any){
+ testResults = actual === expected ?
+ {pass: 'passed', message: testName} :
+ {pass: 'failed', message: `${testName}; expected ${actual} to equal ${expected}.`};
+ }
+ };
+}
+
+function it(label: string, test: () => void) {
+ testName = label;
+ test();
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/app/user.service.ts b/public/docs/_examples/dependency-injection/ts/src/app/user.service.ts
new file mode 100644
index 0000000000..8fdda925db
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/app/user.service.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+export class User {
+ constructor(
+ public name: string,
+ public isAuthorized = false) { }
+}
+
+// Todo: get the user; don't 'new' it.
+let alice = new User('Alice', true);
+let bob = new User('Bob', false);
+
+@Injectable()
+export class UserService {
+ user = bob; // initial user is Bob
+
+ // swap users
+ getNewUser() {
+ return this.user = this.user === bob ? alice : bob;
+ }
+}
diff --git a/public/docs/_examples/dependency-injection/ts/src/index.html b/public/docs/_examples/dependency-injection/ts/src/index.html
new file mode 100644
index 0000000000..87a9d7e694
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+ Dependency Injection
+ Loading my-app ...
+
+
+
diff --git a/public/docs/_examples/dependency-injection/ts/src/main.ts b/public/docs/_examples/dependency-injection/ts/src/main.ts
new file mode 100644
index 0000000000..1a1d481719
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/src/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+// #docregion bootstrap
+platformBrowserDynamic().bootstrapModule(AppModule);
+// #enddocregion bootstrap
diff --git a/public/docs/_examples/deployment/ts/.gitignore b/public/docs/_examples/deployment/ts/.gitignore
new file mode 100644
index 0000000000..7f794a0b16
--- /dev/null
+++ b/public/docs/_examples/deployment/ts/.gitignore
@@ -0,0 +1 @@
+!systemjs.config.server.js
diff --git a/public/docs/_examples/deployment/ts/example-config.json b/public/docs/_examples/deployment/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/deployment/ts/src/app/app.component.ts b/public/docs/_examples/deployment/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..47731c13a4
--- /dev/null
+++ b/public/docs/_examples/deployment/ts/src/app/app.component.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ template: `
+ Simple Deployment
+
+ Crisis Center
+ Heroes
+
+ CRISIS CENTER
+ Get your crisis here
`
+})
+export class CrisisListComponent { }
diff --git a/public/docs/_examples/deployment/ts/src/app/hero-list.component.ts b/public/docs/_examples/deployment/ts/src/app/hero-list.component.ts
new file mode 100644
index 0000000000..479f73b508
--- /dev/null
+++ b/public/docs/_examples/deployment/ts/src/app/hero-list.component.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ template: `
+ HEROES
+ Get your heroes here
+ `
+})
+export class HeroListComponent { }
diff --git a/public/docs/_examples/deployment/ts/src/index.html b/public/docs/_examples/deployment/ts/src/index.html
new file mode 100644
index 0000000000..770e64bc4d
--- /dev/null
+++ b/public/docs/_examples/deployment/ts/src/index.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+ Simple Deployment
+ loading...
+
+
+
diff --git a/public/docs/_examples/deployment/ts/src/main.ts b/public/docs/_examples/deployment/ts/src/main.ts
new file mode 100644
index 0000000000..6f82bbc745
--- /dev/null
+++ b/public/docs/_examples/deployment/ts/src/main.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+// #docregion enableProdMode
+import { enableProdMode } from '@angular/core';
+
+// Enable production mode unless running locally
+if (!/localhost/.test(document.location.host)) {
+ enableProdMode();
+}
+// #enddocregion enableProdMode
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/deployment/ts/src/systemjs.config.server.js b/public/docs/_examples/deployment/ts/src/systemjs.config.server.js
new file mode 100644
index 0000000000..40c4426064
--- /dev/null
+++ b/public/docs/_examples/deployment/ts/src/systemjs.config.server.js
@@ -0,0 +1,46 @@
+// #docregion
+/**
+ * System configuration for deployment without installing node_modules
+ * Loads umd packages from the web instead
+ * Adjust as necessary for your application needs.
+ */
+(function (global) {
+ System.config({
+ // #docregion paths
+ paths: {
+ 'npm:': 'https://unpkg.com/' // path serves as alias
+ },
+ // #enddocregion paths
+ // map tells the System loader where to look for things
+ map: {
+ app: 'app', // location of transpiled app files
+
+ // angular minimized umd bundles
+ '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js',
+ '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js',
+ '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js',
+ '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js',
+ '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js',
+ '@angular/http': 'npm:@angular/http/bundles/http.umd.min.js',
+ '@angular/router': 'npm:@angular/router/bundles/router.umd.min.js',
+ '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.min.js',
+ '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js',
+ '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.min.js',
+ '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.min.js',
+
+ // other libraries
+ 'rxjs': 'npm:rxjs@5.0.1',
+ 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
+ },
+ // packages tells the System loader how to load when no filename and/or no extension
+ packages: {
+ app: {
+ main: './main.js',
+ defaultExtension: 'js'
+ },
+ rxjs: {
+ defaultExtension: 'js'
+ }
+ }
+ });
+ })(this);
diff --git a/public/docs/_examples/displaying-data/e2e-spec.ts b/public/docs/_examples/displaying-data/e2e-spec.ts
new file mode 100644
index 0000000000..96c52c5d00
--- /dev/null
+++ b/public/docs/_examples/displaying-data/e2e-spec.ts
@@ -0,0 +1,29 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Displaying Data Tests', function () {
+ let _title = 'Tour of Heroes';
+ let _defaultHero = 'Windstorm';
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ it('should display correct title: ' + _title, function () {
+ expect(element(by.css('h1')).getText()).toEqual(_title);
+ });
+
+ it('should have correct default hero: ' + _defaultHero, function () {
+ expect(element(by.css('h2')).getText()).toContain(_defaultHero);
+ });
+
+ it('should have heroes', function () {
+ let heroEls = element.all(by.css('li'));
+ expect(heroEls.count()).not.toBe(0, 'should have heroes');
+ });
+
+ it('should display "there are many heroes!"', function () {
+ expect(element(by.css('ul ~ p')).getText()).toContain('There are many heroes!');
+ });
+});
diff --git a/public/docs/_examples/displaying-data/ts/example-config.json b/public/docs/_examples/displaying-data/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/displaying-data/ts/plnkr.json b/public/docs/_examples/displaying-data/ts/plnkr.json
new file mode 100644
index 0000000000..b4572f0fb6
--- /dev/null
+++ b/public/docs/_examples/displaying-data/ts/plnkr.json
@@ -0,0 +1,11 @@
+{
+ "description": "Displaying Data",
+ "basePath": "src/",
+ "files": [
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!**/app-ctor.component.ts",
+ "!**/*.[1,2,3].*"
+ ],
+ "tags": ["Template"]
+}
diff --git a/public/docs/_examples/displaying-data/ts/src/app/app-ctor.component.ts b/public/docs/_examples/displaying-data/ts/src/app/app-ctor.component.ts
new file mode 100644
index 0000000000..b275baa8e6
--- /dev/null
+++ b/public/docs/_examples/displaying-data/ts/src/app/app-ctor.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app-ctor',
+ template: `
+ {{title}} [Ctor version]
+ My favorite hero is: {{myHero}}
+ `
+})
+// #docregion class
+export class AppCtorComponent {
+ title: string;
+ myHero: string;
+
+ constructor() {
+ this.title = 'Tour of Heroes';
+ this.myHero = 'Windstorm';
+ }
+}
diff --git a/public/docs/_examples/displaying-data/ts/src/app/app.component.1.ts b/public/docs/_examples/displaying-data/ts/src/app/app.component.1.ts
new file mode 100644
index 0000000000..1cbeb0f731
--- /dev/null
+++ b/public/docs/_examples/displaying-data/ts/src/app/app.component.1.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ // #docregion template
+ template: `
+ {{title}}
+ My favorite hero is: {{myHero}}
+ `
+ // #enddocregion template
+})
+export class AppComponent {
+ title = 'Tour of Heroes';
+ myHero = 'Windstorm';
+}
diff --git a/public/docs/_examples/displaying-data/ts/src/app/app.component.2.ts b/public/docs/_examples/displaying-data/ts/src/app/app.component.2.ts
new file mode 100644
index 0000000000..da7a653973
--- /dev/null
+++ b/public/docs/_examples/displaying-data/ts/src/app/app.component.2.ts
@@ -0,0 +1,26 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ // #docregion template
+ template: `
+ {{title}}
+ My favorite hero is: {{myHero}}
+ Heroes:
+
+ // #docregion li
+
+ {{ hero }}
+
+ // #enddocregion li
+
+ `
+ // #enddocregion template
+})
+// #docregion class
+export class AppComponent {
+ title = 'Tour of Heroes';
+ heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
+ myHero = this.heroes[0];
+}
diff --git a/public/docs/_examples/displaying-data/ts/src/app/app.component.3.ts b/public/docs/_examples/displaying-data/ts/src/app/app.component.3.ts
new file mode 100644
index 0000000000..06ab060557
--- /dev/null
+++ b/public/docs/_examples/displaying-data/ts/src/app/app.component.3.ts
@@ -0,0 +1,35 @@
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion import
+import { Hero } from './hero';
+// #enddocregion import
+
+@Component({
+ selector: 'my-app',
+ // #docregion template
+ template: `
+ {{title}}
+ My favorite hero is: {{myHero.name}}
+ Heroes:
+
+ `
+ // #enddocregion template
+})
+// #docregion class
+export class AppComponent {
+ title = 'Tour of Heroes';
+ // #docregion heroes
+ heroes = [
+ new Hero(1, 'Windstorm'),
+ new Hero(13, 'Bombasto'),
+ new Hero(15, 'Magneta'),
+ new Hero(20, 'Tornado')
+ ];
+ myHero = this.heroes[0];
+ // #enddocregion heroes
+}
diff --git a/public/docs/_examples/displaying-data/ts/src/app/app.component.ts b/public/docs/_examples/displaying-data/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..7234959265
--- /dev/null
+++ b/public/docs/_examples/displaying-data/ts/src/app/app.component.ts
@@ -0,0 +1,32 @@
+// #docplaster
+// #docregion final
+import { Component } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+ selector: 'my-app',
+ template: `
+ {{title}}
+ My favorite hero is: {{myHero.name}}
+ Heroes:
+
+ // #docregion message
+ There are many heroes!
+ // #enddocregion message
+`
+})
+export class AppComponent {
+ title = 'Tour of Heroes';
+ heroes = [
+ new Hero(1, 'Windstorm'),
+ new Hero(13, 'Bombasto'),
+ new Hero(15, 'Magneta'),
+ new Hero(20, 'Tornado')
+ ];
+ myHero = this.heroes[0];
+}
diff --git a/public/docs/_examples/displaying-data/ts/src/app/app.module.ts b/public/docs/_examples/displaying-data/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..362f3401fa
--- /dev/null
+++ b/public/docs/_examples/displaying-data/ts/src/app/app.module.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ BrowserModule
+ ],
+ declarations: [
+ AppComponent
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/displaying-data/ts/src/app/hero.ts b/public/docs/_examples/displaying-data/ts/src/app/hero.ts
new file mode 100644
index 0000000000..f89d26ad63
--- /dev/null
+++ b/public/docs/_examples/displaying-data/ts/src/app/hero.ts
@@ -0,0 +1,9 @@
+// #docregion
+export class Hero {
+ constructor(
+ // #docregion id
+ public id: number,
+ // #enddocregion id
+ public name: string) { }
+}
+// #enddocregion
diff --git a/public/docs/_examples/displaying-data/ts/src/index.html b/public/docs/_examples/displaying-data/ts/src/index.html
new file mode 100644
index 0000000000..ddcbade46b
--- /dev/null
+++ b/public/docs/_examples/displaying-data/ts/src/index.html
@@ -0,0 +1,28 @@
+
+
+
+ Displaying Data
+ loading...
+
+
+
+
diff --git a/public/docs/_examples/displaying-data/ts/src/main.ts b/public/docs/_examples/displaying-data/ts/src/main.ts
new file mode 100644
index 0000000000..f332d1d245
--- /dev/null
+++ b/public/docs/_examples/displaying-data/ts/src/main.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/forms/e2e-spec.ts b/public/docs/_examples/forms/e2e-spec.ts
new file mode 100644
index 0000000000..2afd370103
--- /dev/null
+++ b/public/docs/_examples/forms/e2e-spec.ts
@@ -0,0 +1,63 @@
+import { browser, element, by } from 'protractor';
+import { appLang, describeIf } from '../protractor-helpers';
+
+describeIf(appLang.appIsTs || appLang.appIsJs, 'Forms Tests', function () {
+
+ beforeEach(function () {
+ browser.get('');
+ });
+
+ it('should display correct title', function () {
+ expect(element.all(by.css('h1')).get(0).getText()).toEqual('Hero Form');
+ });
+
+
+ it('should not display message before submit', function () {
+ let ele = element(by.css('h2'));
+ expect(ele.isDisplayed()).toBe(false);
+ });
+
+ it('should hide form after submit', function () {
+ let ele = element.all(by.css('h1')).get(0);
+ expect(ele.isDisplayed()).toBe(true);
+ let b = element.all(by.css('button[type=submit]')).get(0);
+ b.click().then(function() {
+ expect(ele.isDisplayed()).toBe(false);
+ });
+ });
+
+ it('should display message after submit', function () {
+ let b = element.all(by.css('button[type=submit]')).get(0);
+ b.click().then(function() {
+ expect(element(by.css('h2')).getText()).toContain('You submitted the following');
+ });
+ });
+
+ it('should hide form after submit', function () {
+ let alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
+ expect(alterEgoEle.isDisplayed()).toBe(true);
+ let submitButtonEle = element.all(by.css('button[type=submit]')).get(0);
+ submitButtonEle.click().then(function() {
+ expect(alterEgoEle.isDisplayed()).toBe(false);
+ });
+ });
+
+ it('should reflect submitted data after submit', function () {
+ let test = 'testing 1 2 3';
+ let newValue: string;
+ let alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
+ alterEgoEle.getAttribute('value').then(function(value: string) {
+ alterEgoEle.sendKeys(test);
+ newValue = value + test;
+ expect(alterEgoEle.getAttribute('value')).toEqual(newValue);
+ let b = element.all(by.css('button[type=submit]')).get(0);
+ return b.click();
+ }).then(function() {
+ let alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego'));
+ expect(alterEgoTextEle.isPresent()).toBe(true, 'cannot locate "Alter Ego" label');
+ let divEle = element(by.cssContainingText('div', newValue));
+ expect(divEle.isPresent()).toBe(true, 'cannot locate div with this text: ' + newValue);
+ });
+ });
+});
+
diff --git a/public/docs/_examples/forms/js/example-config.json b/public/docs/_examples/forms/js/example-config.json
new file mode 100644
index 0000000000..81f31aaf0d
--- /dev/null
+++ b/public/docs/_examples/forms/js/example-config.json
@@ -0,0 +1,3 @@
+{
+ "build": "build:babel"
+}
diff --git a/public/docs/_examples/forms/js/plnkr.json b/public/docs/_examples/forms/js/plnkr.json
new file mode 100644
index 0000000000..946cbb88f6
--- /dev/null
+++ b/public/docs/_examples/forms/js/plnkr.json
@@ -0,0 +1,5 @@
+{
+ "description": "Forms",
+ "basePath": "src/",
+ "files":["app/**/*.js", "**/*.html", "**/*.css"]
+}
diff --git a/public/docs/_examples/forms/js/src/app/app.component.js b/public/docs/_examples/forms/js/src/app/app.component.js
new file mode 100644
index 0000000000..56bd982416
--- /dev/null
+++ b/public/docs/_examples/forms/js/src/app/app.component.js
@@ -0,0 +1,11 @@
+// #docregion
+(function(app) {
+ app.AppComponent = ng.core
+ .Component({
+ selector: 'my-app',
+ template: '
+
+
+
+
+
+
You submitted the following:
+
+
Name
+
{{ model.name }}
+
+
+
Alter Ego
+
{{ model.alterEgo }}
+
+
+
Power
+
{{ model.power }}
+
+
+
Edit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TODO: remove this: {{model.name}}
+
+
+
+
+ TODO: remove this: {{model.name}}
+
+
+
+
+
+
+
+
Hero Form
+ Loading...
+
+
+
diff --git a/public/docs/_examples/forms/js/src/main.js b/public/docs/_examples/forms/js/src/main.js
new file mode 100644
index 0000000000..785823fa84
--- /dev/null
+++ b/public/docs/_examples/forms/js/src/main.js
@@ -0,0 +1,8 @@
+// #docregion
+(function(app) {
+ document.addEventListener('DOMContentLoaded', function() {
+ ng.platformBrowserDynamic
+ .platformBrowserDynamic()
+ .bootstrapModule(app.AppModule);
+ });
+})(window.app || (window.app = {}));
diff --git a/public/docs/_examples/forms/ts/example-config.json b/public/docs/_examples/forms/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/forms/ts/plnkr.json b/public/docs/_examples/forms/ts/plnkr.json
new file mode 100644
index 0000000000..3f0abbfc3d
--- /dev/null
+++ b/public/docs/_examples/forms/ts/plnkr.json
@@ -0,0 +1,8 @@
+{
+ "description": "Forms",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js"
+ ]
+}
diff --git a/public/docs/_examples/forms/ts/src/app/app.component.ts b/public/docs/_examples/forms/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..454f7e03db
--- /dev/null
+++ b/public/docs/_examples/forms/ts/src/app/app.component.ts
@@ -0,0 +1,8 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ template: '
+
+
+
+
+
+
You submitted the following:
+
+
Name
+
{{ model.name }}
+
+
+
Alter Ego
+
{{ model.alterEgo }}
+
+
+
Power
+
{{ model.power }}
+
+
+
Edit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TODO: remove this: {{model.name}}
+
+
+
+
+ TODO: remove this: {{model.name}}
+
+
+
+
+
TODO: remove this: {{spy.className}}
+
+
+
Hero Form
+ Loading...
+
+
+
diff --git a/public/docs/_examples/forms/ts/src/main.ts b/public/docs/_examples/forms/ts/src/main.ts
new file mode 100644
index 0000000000..6b6532d428
--- /dev/null
+++ b/public/docs/_examples/forms/ts/src/main.ts
@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/gettingstarted/e2e-spec.js b/public/docs/_examples/gettingstarted/e2e-spec.js
deleted file mode 100644
index bbb8089d9f..0000000000
--- a/public/docs/_examples/gettingstarted/e2e-spec.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/*global browser, element, by */
-describe('Getting Started E2E Tests', function () {
-
- // #docregion shared
- var expectedMsg = 'My First Angular 2 App';
-
- // tests shared across languages
- function sharedTests(basePath) {
- beforeEach(function () {
- browser.get(basePath + 'index.html');
- });
-
- it('should display: ' + expectedMsg, function () {
- expect(element(by.id('output')).getText()).toEqual(expectedMsg);
- });
- }
- // #enddocregion
-
- describe('Getting Started in JavaScript', function () {
- sharedTests('gettingstarted/js/');
- });
-
- describe('Getting Started in TypeScript', function () {
- sharedTests('gettingstarted/ts/');
- });
-
-});
diff --git a/public/docs/_examples/gettingstarted/js/app.js b/public/docs/_examples/gettingstarted/js/app.js
deleted file mode 100644
index a590cd7ed7..0000000000
--- a/public/docs/_examples/gettingstarted/js/app.js
+++ /dev/null
@@ -1,46 +0,0 @@
-(function() {
-// #docregion
-// #docregion class-w-annotations
-var AppComponent = ng
- // #docregion component
- .Component({
- selector: 'my-app'
- })
- // #enddocregion
- // #docregion view
- .View({
- template: 'My First Angular 2 App '
- })
- // #enddocregion
- // #docregion class
- .Class({
- constructor: function () { }
- });
- // #enddocregion
-// #enddocregion
-
-// #docregion bootstrap
-document.addEventListener('DOMContentLoaded', function() {
- ng.bootstrap(AppComponent);
-});
-// #enddocregion
-// #enddocregion
-
-})();
-
-/* Non DSL Approach */
-(function() {
-
-// #docregion no-dsl
-function AppComponent () {}
-
-AppComponent.annotations = [
- new ng.ComponentAnnotation({
- selector: 'my-app'
- }),
- new ng.ViewAnnotation({
- template: 'My First Angular 2 App '
- })
-];
-// #enddocregion
-})();
diff --git a/public/docs/_examples/gettingstarted/js/index.html b/public/docs/_examples/gettingstarted/js/index.html
deleted file mode 100644
index 38ac797d74..0000000000
--- a/public/docs/_examples/gettingstarted/js/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
-
-
-
-
- My First Angular 2 App '
-})
-// #docregion class
-class AppComponent { }
-// #enddocregion
-// #enddocregion
-
-// #docregion bootstrap
-bootstrap(AppComponent);
-// #enddocregion
-// #enddocregion
\ No newline at end of file
diff --git a/public/docs/_examples/gettingstarted/ts/src/dummy.spec.ts b/public/docs/_examples/gettingstarted/ts/src/dummy.spec.ts
deleted file mode 100644
index fdf13c8cfc..0000000000
--- a/public/docs/_examples/gettingstarted/ts/src/dummy.spec.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-describe("Jasmine sample test", function() {
-
- it("1+1 should be 2", function() {
-
- var result = 1 + 1;
-
- expect(result).toBe(2);
- });
-});
\ No newline at end of file
diff --git a/public/docs/_examples/gettingstarted/ts/src/index.html b/public/docs/_examples/gettingstarted/ts/src/index.html
deleted file mode 100644
index fbd6880194..0000000000
--- a/public/docs/_examples/gettingstarted/ts/src/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
-
-
-
-
-
-
- Hierarchical Dependency Injection
+
+ C: {{description}}
`,
+ providers: [
+ { provide: CarService, useClass: CarService3 }
+ ]
+})
+export class CCarComponent {
+ description: string;
+ constructor(carService: CarService) {
+ this.description = `${carService.getCar().description} (${carService.name})`;
+ }
+}
+
+////////// BCarComponent ////////////
+@Component({
+ selector: 'b-car',
+ template: `
+ B: {{description}}
+ A: {{description}}
+ Cars
+
+
{{message}}
+
+ {{taxReturn.name}}
+ TID: {{taxReturn.tid}}
+
+
+
+ Income:
+
+
+ Tax: {{taxReturn.tax}}
+
+
+ Save
+ Cancel
+ Close
+
+
();
+
+ get taxReturn(): HeroTaxReturn {
+ return this.heroTaxReturnService.taxReturn;
+ }
+ @Input()
+ set taxReturn (htr: HeroTaxReturn) {
+ this.heroTaxReturnService.taxReturn = htr;
+ }
+
+ constructor(private heroTaxReturnService: HeroTaxReturnService ) { }
+
+ onCanceled() {
+ this.flashMessage('Canceled');
+ this.heroTaxReturnService.restoreTaxReturn();
+ };
+
+ onClose() { this.close.emit(); };
+
+ onSaved() {
+ this.flashMessage('Saved');
+ this.heroTaxReturnService.saveTaxReturn();
+ }
+
+ flashMessage(msg: string) {
+ this.message = msg;
+ setTimeout(() => this.message = '', 500);
+ }
+}
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.service.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.service.ts
new file mode 100644
index 0000000000..d6ff0f7fff
--- /dev/null
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.service.ts
@@ -0,0 +1,30 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { HeroTaxReturn } from './hero';
+import { HeroesService } from './heroes.service';
+
+@Injectable()
+export class HeroTaxReturnService {
+ private currentTaxReturn: HeroTaxReturn;
+ private originalTaxReturn: HeroTaxReturn;
+
+ constructor(private heroService: HeroesService) { }
+
+ set taxReturn (htr: HeroTaxReturn) {
+ this.originalTaxReturn = htr;
+ this.currentTaxReturn = htr.clone();
+ }
+
+ get taxReturn (): HeroTaxReturn {
+ return this.currentTaxReturn;
+ }
+
+ restoreTaxReturn() {
+ this.taxReturn = this.originalTaxReturn;
+ }
+
+ saveTaxReturn() {
+ this.taxReturn = this.currentTaxReturn;
+ this.heroService.saveTaxReturn(this.currentTaxReturn).subscribe();
+ }
+}
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/hero.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/hero.ts
new file mode 100644
index 0000000000..4ad6ccd8eb
--- /dev/null
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/hero.ts
@@ -0,0 +1,31 @@
+// #docregion
+
+export class Hero {
+ id: number;
+ name: string;
+ tid: string; // tax id
+}
+
+//// HeroTaxReturn ////
+let nextId = 100;
+
+export class HeroTaxReturn {
+ constructor(
+ public id = nextId++,
+ public hero: Hero,
+ public income = 0 ) {
+ if (id === 0) { id = nextId++; }
+ }
+
+ get name() { return this.hero.name; }
+ get tax() { return this.income ? .10 * this.income : 0; }
+ get tid() { return this.hero.tid; }
+
+ toString() {
+ return `${this.hero.name}`;
+ }
+
+ clone() {
+ return new HeroTaxReturn(this.id, this.hero, this.income);
+ }
+}
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/heroes-list.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/heroes-list.component.ts
new file mode 100644
index 0000000000..36cb5ec1c3
--- /dev/null
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/heroes-list.component.ts
@@ -0,0 +1,48 @@
+// #docregion
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import { Hero, HeroTaxReturn } from './hero';
+import { HeroesService } from './heroes.service';
+
+@Component({
+ selector: 'heroes-list',
+ template: `
+
+
Hero Tax Returns
+
+
+
+
;
+ selectedTaxReturns: HeroTaxReturn[] = [];
+
+ constructor(private heroesService: HeroesService) {
+ this.heroes = heroesService.getHeroes();
+ }
+
+ showTaxReturn(hero: Hero) {
+ this.heroesService.getTaxReturn(hero)
+ .subscribe(htr => {
+ // show if not currently shown
+ if (!this.selectedTaxReturns.find(tr => tr.id === htr.id)) {
+ this.selectedTaxReturns.push(htr);
+ }
+ });
+ }
+
+ closeTaxReturn(ix: number) {
+ this.selectedTaxReturns.splice(ix, 1);
+ }
+}
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/heroes.service.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/heroes.service.ts
new file mode 100644
index 0000000000..85b33c89a0
--- /dev/null
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/heroes.service.ts
@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import { Observer } from 'rxjs/Observer';
+
+import { Hero, HeroTaxReturn } from './hero';
+
+@Injectable()
+export class HeroesService {
+ heroes: Hero[] = [
+ { id: 1, name: 'RubberMan', tid: '082-27-5678'},
+ { id: 2, name: 'Tornado', tid: '099-42-4321'}
+ ];
+
+ heroTaxReturns: HeroTaxReturn[] = [
+ new HeroTaxReturn(10, this.heroes[0], 35000),
+ new HeroTaxReturn(20, this.heroes[1], 1250000)
+ ];
+
+ getHeroes(): Observable {
+ return new Observable((observer: Observer) => {
+ observer.next(this.heroes);
+ observer.complete();
+ });
+ }
+
+ getTaxReturn(hero: Hero): Observable {
+ return new Observable((observer: Observer) => {
+ const htr = this.heroTaxReturns.find(t => t.hero.id === hero.id);
+ observer.next(htr || new HeroTaxReturn(0, hero));
+ observer.complete();
+ });
+ }
+
+ saveTaxReturn(heroTaxReturn: HeroTaxReturn): Observable {
+ return new Observable((observer: Observer) => {
+ const htr = this.heroTaxReturns.find(t => t.id === heroTaxReturn.id);
+ if (htr) {
+ heroTaxReturn = Object.assign(htr, heroTaxReturn); // demo: mutate
+ } else {
+ this.heroTaxReturns.push(heroTaxReturn);
+ }
+ observer.next(heroTaxReturn);
+ observer.complete();
+ });
+ }
+}
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.html b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.html
new file mode 100644
index 0000000000..75e5ba3237
--- /dev/null
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.html
@@ -0,0 +1,6 @@
+
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.ts
new file mode 100644
index 0000000000..5226d4f2a9
--- /dev/null
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import { Villain, VillainsService } from './villains.service';
+
+// #docregion metadata
+@Component({
+ selector: 'villains-list',
+ templateUrl: './villains-list.component.html',
+ providers: [ VillainsService ]
+})
+// #enddocregion metadata
+export class VillainsListComponent {
+ villains: Observable;
+
+ constructor(private villainsService: VillainsService) {
+ this.villains = villainsService.getVillains();
+ }
+}
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/villains.service.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/villains.service.ts
new file mode 100644
index 0000000000..3d480c20af
--- /dev/null
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/villains.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+
+import { of } from 'rxjs/observable/of';
+
+export interface Villain { id: number; name: string; }
+
+@Injectable()
+export class VillainsService {
+ villains: Villain[] = [
+ { id: 1, name: 'Dr. Evil'},
+ { id: 2, name: 'Moriarty'}
+ ];
+
+ getVillains() {
+ return of(this.villains);
+ }
+}
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/src/index.html b/public/docs/_examples/hierarchical-dependency-injection/ts/src/index.html
new file mode 100644
index 0000000000..0ea32679e6
--- /dev/null
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/src/index.html
@@ -0,0 +1,26 @@
+
+
+
+ Hierarchical Injectors
+ loading...
+
+
+
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/src/main.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/src/main.ts
new file mode 100644
index 0000000000..6b6532d428
--- /dev/null
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/src/main.ts
@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/homepage-hello-world/e2e-spec.ts b/public/docs/_examples/homepage-hello-world/e2e-spec.ts
new file mode 100644
index 0000000000..c4c6464937
--- /dev/null
+++ b/public/docs/_examples/homepage-hello-world/e2e-spec.ts
@@ -0,0 +1,30 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Homepage Hello World', function () {
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ // Does it even launch?
+ let expectedLabel = 'Name:';
+ it(`should display the label: ${expectedLabel}`, function () {
+ expect(element(by.css('label')).getText()).toEqual(expectedLabel);
+ });
+
+ it('should display entered name', function () {
+ let testName = 'Bobby Joe';
+ let nameEle = element.all(by.css('input')).get(0);
+ nameEle.getAttribute('value').then(function(value: string) {
+ nameEle.sendKeys(testName);
+ let newValue = value + testName; // old input box value + new name
+ expect(nameEle.getAttribute('value')).toEqual(newValue);
+ }).then(function() {
+ // Check the interpolated message built from name
+ let helloEle = element.all(by.css('h1')).get(0);
+ expect(helloEle.getText()).toEqual('Hello ' + testName + '!');
+ });
+ });
+});
diff --git a/public/docs/_examples/homepage-hello-world/ts/example-config.json b/public/docs/_examples/homepage-hello-world/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/homepage-hello-world/ts/plnkr.json b/public/docs/_examples/homepage-hello-world/ts/plnkr.json
new file mode 100644
index 0000000000..bfe6aecc8b
--- /dev/null
+++ b/public/docs/_examples/homepage-hello-world/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+ "description": "Hello World",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!**/*.[1].*"
+ ]
+}
diff --git a/public/docs/_examples/homepage-hello-world/ts/src/app/app.module.ts b/public/docs/_examples/homepage-hello-world/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..55a2ef3693
--- /dev/null
+++ b/public/docs/_examples/homepage-hello-world/ts/src/app/app.module.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { HelloWorldComponent } from './hello_world';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule
+ ],
+ declarations: [ HelloWorldComponent ],
+ bootstrap: [ HelloWorldComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/homepage-hello-world/ts/src/app/hello_world.html b/public/docs/_examples/homepage-hello-world/ts/src/app/hello_world.html
new file mode 100644
index 0000000000..13af8fb34e
--- /dev/null
+++ b/public/docs/_examples/homepage-hello-world/ts/src/app/hello_world.html
@@ -0,0 +1,7 @@
+
+Name:
+
+Hello {{yourName}}!
\ No newline at end of file
diff --git a/public/docs/_examples/homepage-hello-world/ts/src/app/hello_world.ts b/public/docs/_examples/homepage-hello-world/ts/src/app/hello_world.ts
new file mode 100644
index 0000000000..145d22e1e9
--- /dev/null
+++ b/public/docs/_examples/homepage-hello-world/ts/src/app/hello_world.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ // Declare the tag name in index.html to where the component attaches
+ selector: 'hello-world',
+
+ // Location of the template for this component
+ templateUrl: './hello_world.html'
+})
+export class HelloWorldComponent {
+
+ // Declaring the variable for binding with initial value
+ yourName: string = '';
+}
diff --git a/public/docs/_examples/homepage-hello-world/ts/src/index.1.html b/public/docs/_examples/homepage-hello-world/ts/src/index.1.html
new file mode 100644
index 0000000000..37c1bf787c
--- /dev/null
+++ b/public/docs/_examples/homepage-hello-world/ts/src/index.1.html
@@ -0,0 +1,32 @@
+
+
+
+
+ Angular Hello World
+ Loading...
+
+
+
diff --git a/public/docs/_examples/homepage-hello-world/ts/src/index.html b/public/docs/_examples/homepage-hello-world/ts/src/index.html
new file mode 100644
index 0000000000..9dab660d10
--- /dev/null
+++ b/public/docs/_examples/homepage-hello-world/ts/src/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+ Angular Hello World
+ Loading...
+
+
+
diff --git a/public/docs/_examples/homepage-hello-world/ts/src/main.ts b/public/docs/_examples/homepage-hello-world/ts/src/main.ts
new file mode 100644
index 0000000000..6b6532d428
--- /dev/null
+++ b/public/docs/_examples/homepage-hello-world/ts/src/main.ts
@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/homepage-tabs/e2e-spec.ts b/public/docs/_examples/homepage-tabs/e2e-spec.ts
new file mode 100644
index 0000000000..2131d75906
--- /dev/null
+++ b/public/docs/_examples/homepage-tabs/e2e-spec.ts
@@ -0,0 +1,17 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Homepage Tabs', function () {
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ // Does it even launch?
+ let expectedAppTitle = 'Tabs Demo';
+ it(`should display app title: ${expectedAppTitle}`, function () {
+ expect(element(by.css('h4')).getText()).toEqual(expectedAppTitle);
+ });
+
+});
diff --git a/public/docs/_examples/homepage-tabs/ts/example-config.json b/public/docs/_examples/homepage-tabs/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/homepage-tabs/ts/plnkr.json b/public/docs/_examples/homepage-tabs/ts/plnkr.json
new file mode 100644
index 0000000000..c1a33dc8f0
--- /dev/null
+++ b/public/docs/_examples/homepage-tabs/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+ "description": "Tabs",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!**/*.[1].*"
+ ]
+}
diff --git a/public/docs/_examples/homepage-tabs/ts/src/app/app.module.ts b/public/docs/_examples/homepage-tabs/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..bd2193755c
--- /dev/null
+++ b/public/docs/_examples/homepage-tabs/ts/src/app/app.module.ts
@@ -0,0 +1,17 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { DiDemoComponent } from './di_demo';
+import { UiTabsComponent, UiPaneDirective } from './ui_tabs';
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [
+ DiDemoComponent,
+ UiTabsComponent,
+ UiPaneDirective
+ ],
+ bootstrap: [ DiDemoComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/homepage-tabs/ts/src/app/di_demo.ts b/public/docs/_examples/homepage-tabs/ts/src/app/di_demo.ts
new file mode 100644
index 0000000000..be72ae5c79
--- /dev/null
+++ b/public/docs/_examples/homepage-tabs/ts/src/app/di_demo.ts
@@ -0,0 +1,45 @@
+// #docregion
+import { Component } from '@angular/core';
+
+class Detail {
+ title: string;
+ text: string;
+}
+
+@Component({
+ selector: 'di-demo',
+ template: `
+ Tabs Demo
+
+
+ You have {{details.length}} details.
+
+
+ {{detail.text}} Remove
+
+
+ Next last ID is {{id}}.
+
+
+ Add Detail
+ `
+})
+export class DiDemoComponent {
+ details: Detail[] = [];
+ id: number = 0;
+
+ addDetail() {
+ this.id++;
+ this.details.push({
+ title: `Detail ${this.id}`,
+ text: `Some detail text for ${this.id}...`
+ });
+ }
+
+ removeDetail(detail: Detail) {
+ this.details = this.details.filter((d) => d !== detail);
+ }
+}
+
diff --git a/public/docs/_examples/homepage-tabs/ts/src/app/ui_tabs.ts b/public/docs/_examples/homepage-tabs/ts/src/app/ui_tabs.ts
new file mode 100644
index 0000000000..5e2f47b140
--- /dev/null
+++ b/public/docs/_examples/homepage-tabs/ts/src/app/ui_tabs.ts
@@ -0,0 +1,51 @@
+// #docregion
+import { Component, Directive, Input, QueryList,
+ ViewContainerRef, TemplateRef, ContentChildren } from '@angular/core';
+
+@Directive({
+ selector: '[uiPane]'
+})
+export class UiPaneDirective {
+ @Input() title: string;
+ private _active: boolean = false;
+
+ constructor(public viewContainer: ViewContainerRef,
+ public templateRef: TemplateRef) { }
+
+ @Input() set active(active: boolean) {
+ if (active === this._active) { return; }
+ this._active = active;
+ if (active) {
+ this.viewContainer.createEmbeddedView(this.templateRef);
+ } else {
+ this.viewContainer.remove(0);
+ }
+ }
+
+ get active(): boolean {
+ return this._active;
+ }
+}
+
+@Component({
+ selector: 'ui-tabs',
+ template: `
+
+ ;
+
+ select(pane: UiPaneDirective) {
+ this.panes.toArray().forEach((p: UiPaneDirective) => p.active = p === pane);
+ }
+}
+
diff --git a/public/docs/_examples/homepage-tabs/ts/src/index.1.html b/public/docs/_examples/homepage-tabs/ts/src/index.1.html
new file mode 100644
index 0000000000..a25071b484
--- /dev/null
+++ b/public/docs/_examples/homepage-tabs/ts/src/index.1.html
@@ -0,0 +1,33 @@
+
+
+
+
+ Angular Tabs
+ Loading...
+
+
+
diff --git a/public/docs/_examples/homepage-tabs/ts/src/index.html b/public/docs/_examples/homepage-tabs/ts/src/index.html
new file mode 100644
index 0000000000..d38b36e033
--- /dev/null
+++ b/public/docs/_examples/homepage-tabs/ts/src/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+ Angular Tabs
+ Loading...
+
+
+
diff --git a/public/docs/_examples/homepage-tabs/ts/src/main.ts b/public/docs/_examples/homepage-tabs/ts/src/main.ts
new file mode 100644
index 0000000000..f332d1d245
--- /dev/null
+++ b/public/docs/_examples/homepage-tabs/ts/src/main.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/homepage-todo/e2e-spec.ts b/public/docs/_examples/homepage-todo/e2e-spec.ts
new file mode 100644
index 0000000000..fb74e4e70f
--- /dev/null
+++ b/public/docs/_examples/homepage-todo/e2e-spec.ts
@@ -0,0 +1,17 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Homepage Todo', function () {
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ // Does it even launch?
+ let expectedAppTitle = 'Todo';
+ it(`should display app title: ${expectedAppTitle}`, function () {
+ expect(element(by.css('h2')).getText()).toEqual(expectedAppTitle);
+ });
+
+});
diff --git a/public/docs/_examples/homepage-todo/ts/example-config.json b/public/docs/_examples/homepage-todo/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/homepage-todo/ts/plnkr.json b/public/docs/_examples/homepage-todo/ts/plnkr.json
new file mode 100644
index 0000000000..8e69701221
--- /dev/null
+++ b/public/docs/_examples/homepage-todo/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+ "description": "Todo",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js",
+ "!**/*.[1].*"
+ ]
+}
diff --git a/public/docs/_examples/homepage-todo/ts/src/app/app.module.ts b/public/docs/_examples/homepage-todo/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..a77bb640ab
--- /dev/null
+++ b/public/docs/_examples/homepage-todo/ts/src/app/app.module.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { TodoAppComponent } from './todo_app';
+import { TodoListComponent } from './todo_list';
+import { TodoFormComponent } from './todo_form';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule
+ ],
+ declarations: [
+ TodoAppComponent,
+ TodoListComponent,
+ TodoFormComponent
+ ],
+ bootstrap: [ TodoAppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/homepage-todo/ts/src/app/todo.ts b/public/docs/_examples/homepage-todo/ts/src/app/todo.ts
new file mode 100644
index 0000000000..35faec9705
--- /dev/null
+++ b/public/docs/_examples/homepage-todo/ts/src/app/todo.ts
@@ -0,0 +1,6 @@
+// #docregion
+// Declare an interaface for type safety
+export interface Todo {
+ text: string;
+ done: boolean;
+}
diff --git a/public/docs/_examples/homepage-todo/ts/src/app/todo_app.ts b/public/docs/_examples/homepage-todo/ts/src/app/todo_app.ts
new file mode 100644
index 0000000000..e56bad95b6
--- /dev/null
+++ b/public/docs/_examples/homepage-todo/ts/src/app/todo_app.ts
@@ -0,0 +1,38 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { Todo } from './todo';
+
+@Component({
+ selector: 'todo-app',
+ template: `
+ Todo
+ {{remaining}} of {{todos.length}} remaining
+ [ archive ]
+
+ ();
+ task: string = '';
+
+ addTodo() {
+ if (this.task) {
+ this.newTask.emit({text: this.task, done: false});
+ }
+ this.task = '';
+ }
+}
+
diff --git a/public/docs/_examples/homepage-todo/ts/src/app/todo_list.ts b/public/docs/_examples/homepage-todo/ts/src/app/todo_list.ts
new file mode 100644
index 0000000000..b6495f37c2
--- /dev/null
+++ b/public/docs/_examples/homepage-todo/ts/src/app/todo_list.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+
+import { Todo } from './todo';
+
+@Component({
+ selector: 'todo-list',
+ styles: [`
+ .done-true {
+ text-decoration: line-through;
+ color: grey;
+ }`
+ ],
+ template: `
+ `
+})
+export class TodoListComponent {
+ @Input() todos: Todo[];
+}
diff --git a/public/docs/_examples/homepage-todo/ts/src/index.1.html b/public/docs/_examples/homepage-todo/ts/src/index.1.html
new file mode 100644
index 0000000000..4e8d034fd3
--- /dev/null
+++ b/public/docs/_examples/homepage-todo/ts/src/index.1.html
@@ -0,0 +1,33 @@
+
+
+
+
+ Angular Todos
+ Loading...
+
+
+
diff --git a/public/docs/_examples/homepage-todo/ts/src/index.html b/public/docs/_examples/homepage-todo/ts/src/index.html
new file mode 100644
index 0000000000..e7a656a106
--- /dev/null
+++ b/public/docs/_examples/homepage-todo/ts/src/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+ Angular Todos
+ Loading...
+
+
+
diff --git a/public/docs/_examples/homepage-todo/ts/src/main.ts b/public/docs/_examples/homepage-todo/ts/src/main.ts
new file mode 100644
index 0000000000..6b6532d428
--- /dev/null
+++ b/public/docs/_examples/homepage-todo/ts/src/main.ts
@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/jsconfig.json b/public/docs/_examples/jsconfig.json
index b3a1252357..82750484d1 100644
--- a/public/docs/_examples/jsconfig.json
+++ b/public/docs/_examples/jsconfig.json
@@ -3,4 +3,4 @@
"target": "ES5",
"module": "commonjs"
}
-}
\ No newline at end of file
+}
diff --git a/public/docs/_examples/karma.conf.js b/public/docs/_examples/karma.conf.js
deleted file mode 100644
index 44ec4e73af..0000000000
--- a/public/docs/_examples/karma.conf.js
+++ /dev/null
@@ -1,73 +0,0 @@
-// Karma configuration
-// Generated on Mon Aug 10 2015 11:36:40 GMT-0700 (Pacific Daylight Time)
-
-module.exports = function(config) {
- config.set({
-
- // base path that will be used to resolve all patterns (eg. files, exclude)
- basePath: '',
-
-
- // frameworks to use
- // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
- frameworks: ['jasmine'],
-
-
- // list of files / patterns to load in the browser
- files: [
- { pattern: 'https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js', watched: false },
- { pattern: 'https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js', watched: false },
- { pattern: 'https://jspm.io/system@0.16.js', watched: false },
- '**/spec.js',
- '**/*.spec.js',
- '**/js/*.js',
- { pattern: '**/ts/*.js', included: false },
- ],
-
-
- // list of files to exclude
- exclude: [
- '**/e2e-spec.js',
- '**/*.e2e-spec.js'
- ],
-
-
- // preprocess matching files before serving them to the browser
- // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
- preprocessors: {
- },
-
-
- // test results reporter to use
- // possible values: 'dots', 'progress'
- // available reporters: https://npmjs.org/browse/keyword/karma-reporter
- reporters: ['progress'],
-
-
- // web server port
- port: 9876,
-
-
- // enable / disable colors in the output (reporters and logs)
- colors: true,
-
-
- // level of logging
- // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
- logLevel: config.LOG_INFO,
-
-
- // enable / disable watching file and executing tests whenever any file changes
- autoWatch: true,
-
-
- // start these browsers
- // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
- browsers: ['Chrome'],
-
-
- // Continuous Integration mode
- // if true, Karma captures browsers, runs the tests and exits
- singleRun: false
- })
-}
diff --git a/public/docs/_examples/karma.js.conf.js b/public/docs/_examples/karma.js.conf.js
deleted file mode 100644
index e55127f0f0..0000000000
--- a/public/docs/_examples/karma.js.conf.js
+++ /dev/null
@@ -1,68 +0,0 @@
-// Karma configuration
-// Generated on Mon Aug 10 2015 11:36:40 GMT-0700 (Pacific Daylight Time)
-
-module.exports = function(config) {
- config.set({
-
- // base path that will be used to resolve all patterns (eg. files, exclude)
- basePath: '',
-
-
- // frameworks to use
- // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
- frameworks: ['jasmine'],
-
-
- // list of files / patterns to load in the browser
- files: [
- { pattern: 'https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js', watched: false },
-
- '**/js/*.js',
- ],
-
-
- // list of files to exclude
- exclude: [
- '**/*.e2e-spec.js'
- ],
-
-
- // preprocess matching files before serving them to the browser
- // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
- preprocessors: {
- },
-
-
- // test results reporter to use
- // possible values: 'dots', 'progress'
- // available reporters: https://npmjs.org/browse/keyword/karma-reporter
- reporters: ['progress'],
-
-
- // web server port
- port: 9876,
-
-
- // enable / disable colors in the output (reporters and logs)
- colors: true,
-
-
- // level of logging
- // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
- logLevel: config.LOG_INFO,
-
-
- // enable / disable watching file and executing tests whenever any file changes
- autoWatch: true,
-
-
- // start these browsers
- // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
- browsers: ['Chrome'],
-
-
- // Continuous Integration mode
- // if true, Karma captures browsers, runs the tests and exits
- singleRun: false
- })
-}
diff --git a/public/docs/_examples/karma.ts.conf.js b/public/docs/_examples/karma.ts.conf.js
deleted file mode 100644
index 5b2d176b56..0000000000
--- a/public/docs/_examples/karma.ts.conf.js
+++ /dev/null
@@ -1,70 +0,0 @@
-// Karma configuration
-// Generated on Mon Aug 10 2015 11:36:40 GMT-0700 (Pacific Daylight Time)
-
-module.exports = function(config) {
- config.set({
-
- // base path that will be used to resolve all patterns (eg. files, exclude)
- basePath: '',
-
-
- // frameworks to use
- // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
- frameworks: ['jasmine'],
-
-
- // list of files / patterns to load in the browser
- files: [
- { pattern: 'https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js', watched: false },
- { pattern: 'https://jspm.io/system@0.16.js', watched: false },
- { pattern: 'https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js', watched: false },
-
- '**/ts/**/*.spec.js'
- ],
-
-
- // list of files to exclude
- exclude: [
- '**/*.e2e-spec.js'
- ],
-
-
- // preprocess matching files before serving them to the browser
- // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
- preprocessors: {
- },
-
-
- // test results reporter to use
- // possible values: 'dots', 'progress'
- // available reporters: https://npmjs.org/browse/keyword/karma-reporter
- reporters: ['progress'],
-
-
- // web server port
- port: 9876,
-
-
- // enable / disable colors in the output (reporters and logs)
- colors: true,
-
-
- // level of logging
- // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
- logLevel: config.LOG_INFO,
-
-
- // enable / disable watching file and executing tests whenever any file changes
- autoWatch: true,
-
-
- // start these browsers
- // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
- browsers: ['Chrome'],
-
-
- // Continuous Integration mode
- // if true, Karma captures browsers, runs the tests and exits
- singleRun: false
- })
-}
diff --git a/public/docs/_examples/lifecycle-hooks/e2e-spec.ts b/public/docs/_examples/lifecycle-hooks/e2e-spec.ts
new file mode 100644
index 0000000000..8e9acb1c76
--- /dev/null
+++ b/public/docs/_examples/lifecycle-hooks/e2e-spec.ts
@@ -0,0 +1,178 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Lifecycle hooks', function () {
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ it('should open correctly', function () {
+ expect(element.all(by.css('h2')).get(0).getText()).toEqual('Peek-A-Boo');
+ });
+
+ it('should support peek-a-boo', function () {
+ let pabComp = element(by.css('peek-a-boo-parent peek-a-boo'));
+ expect(pabComp.isPresent()).toBe(false, 'should not be able to find the "peek-a-boo" component');
+ let pabButton = element.all(by.css('peek-a-boo-parent button')).get(0);
+ let updateHeroButton = element.all(by.css('peek-a-boo-parent button')).get(1);
+ expect(pabButton.getText()).toContain('Create Peek');
+ pabButton.click().then(function () {
+ expect(pabButton.getText()).toContain('Destroy Peek');
+ expect(pabComp.isDisplayed()).toBe(true, 'should be able to see the "peek-a-boo" component');
+ expect(pabComp.getText()).toContain('Windstorm');
+ expect(pabComp.getText()).not.toContain('Windstorm!');
+ expect(updateHeroButton.isPresent()).toBe(true, 'should be able to see the update hero button');
+ return updateHeroButton.click();
+ }).then(function () {
+ expect(pabComp.getText()).toContain('Windstorm!');
+ return pabButton.click();
+ }).then(function () {
+ expect(pabComp.isPresent()).toBe(false, 'should no longer be able to find the "peek-a-boo" component');
+ });
+ });
+
+ it('should support OnChanges hook', function () {
+ let onChangesViewEle = element.all(by.css('on-changes div')).get(0);
+ let inputEles = element.all(by.css('on-changes-parent input'));
+ let heroNameInputEle = inputEles.get(1);
+ let powerInputEle = inputEles.get(0);
+ let titleEle = onChangesViewEle.element(by.css('p'));
+ let changeLogEles = onChangesViewEle.all(by.css('div'));
+
+ expect(titleEle.getText()).toContain('Windstorm can sing');
+ expect(changeLogEles.count()).toEqual(2, 'should start with 2 messages');
+ heroNameInputEle.sendKeys('-foo-');
+ expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
+ expect(changeLogEles.count()).toEqual(2, 'should still have 2 messages');
+ powerInputEle.sendKeys('-bar-');
+ expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
+ // 7 == 2 previously + length of '-bar-'
+ expect(changeLogEles.count()).toEqual(7, 'should have 7 messages now');
+ });
+
+ it('should support DoCheck hook', function () {
+ let doCheckViewEle = element.all(by.css('do-check div')).get(0);
+ let inputEles = element.all(by.css('do-check-parent input'));
+ let heroNameInputEle = inputEles.get(1);
+ let powerInputEle = inputEles.get(0);
+ let titleEle = doCheckViewEle.element(by.css('p'));
+ let changeLogEles = doCheckViewEle.all(by.css('div'));
+ let logCount: number;
+
+ expect(titleEle.getText()).toContain('Windstorm can sing');
+ changeLogEles.count().then(function(count: number) {
+ // 3 messages to start
+ expect(count).toEqual(3, 'should start with 3 messages');
+ logCount = count;
+ return heroNameInputEle.sendKeys('-foo-');
+ }).then(function () {
+ expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
+ return changeLogEles.count();
+ }).then(function(count: number) {
+ // one more for each keystroke
+ expect(count).toEqual(logCount + 5, 'should add 5 more messages');
+ logCount = count;
+ return powerInputEle.sendKeys('-bar-');
+ }).then(function () {
+ expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
+ expect(changeLogEles.count()).toEqual(logCount + 6, 'should add 6 more messages');
+ });
+ });
+
+ it('should support AfterView hooks', function () {
+ let parentEle = element(by.tagName('after-view-parent'));
+ let buttonEle = parentEle.element(by.tagName('button')); // Reset
+ let commentEle = parentEle.element(by.className('comment'));
+ let logEles = parentEle.all(by.css('h4 ~ div'));
+ let childViewInputEle = parentEle.element(by.css('my-child-view input'));
+ let logCount: number;
+
+ expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
+ expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
+
+ logEles.count().then(function(count: number) {
+ logCount = count;
+ return childViewInputEle.sendKeys('-test-');
+ }).then(function() {
+ expect(childViewInputEle.getAttribute('value')).toContain('-test-');
+ expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
+ expect(commentEle.getText()).toContain('long name');
+ return logEles.count();
+ }).then(function(count: number) {
+ expect(logCount + 7).toEqual(count, '7 additional log messages should have been added');
+ logCount = count;
+ return buttonEle.click();
+ }).then(function() {
+ expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
+ });
+ });
+
+
+ it('should support AfterContent hooks', function () {
+ let parentEle = element(by.tagName('after-content-parent'));
+ let buttonEle = parentEle.element(by.tagName('button')); // Reset
+ let commentEle = parentEle.element(by.className('comment'));
+ let logEles = parentEle.all(by.css('h4 ~ div'));
+ let childViewInputEle = parentEle.element(by.css('my-child input'));
+ let logCount: number;
+
+ expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
+ expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
+
+ logEles.count().then(function(count: number) {
+ logCount = count;
+ return childViewInputEle.sendKeys('-test-');
+ }).then(function() {
+ expect(childViewInputEle.getAttribute('value')).toContain('-test-');
+ expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
+ expect(commentEle.getText()).toContain('long name');
+ return logEles.count();
+ }).then(function(count: number) {
+ expect(logCount + 5).toEqual(count, '5 additional log messages should have been added');
+ logCount = count;
+ return buttonEle.click();
+ }).then(function() {
+ expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
+ });
+ });
+
+ it('should support spy\'s OnInit & OnDestroy hooks', function () {
+ let inputEle = element(by.css('spy-parent input'));
+ let addHeroButtonEle = element(by.cssContainingText('spy-parent button', 'Add Hero'));
+ let resetHeroesButtonEle = element(by.cssContainingText('spy-parent button', 'Reset Heroes'));
+ let heroEles = element.all(by.css('spy-parent div[mySpy'));
+ let logEles = element.all(by.css('spy-parent h4 ~ div'));
+ expect(heroEles.count()).toBe(2, 'should have two heroes displayed');
+ expect(logEles.count()).toBe(2, 'should have two log entries');
+ inputEle.sendKeys('-test-').then(function() {
+ return addHeroButtonEle.click();
+ }).then(function() {
+ expect(heroEles.count()).toBe(3, 'should have added one hero');
+ expect(heroEles.get(2).getText()).toContain('-test-');
+ expect(logEles.count()).toBe(3, 'should now have 3 log entries');
+ return resetHeroesButtonEle.click();
+ }).then(function() {
+ expect(heroEles.count()).toBe(0, 'should no longer have any heroes');
+ expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 orig + 1 reset + 3 removeall');
+ });
+ });
+
+ it('should support "spy counter"', function () {
+ let updateCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Update'));
+ let resetCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Reset'));
+ let textEle = element(by.css('counter-parent my-counter > div'));
+ let logEles = element.all(by.css('counter-parent h4 ~ div'));
+ expect(textEle.getText()).toContain('Counter = 0');
+ expect(logEles.count()).toBe(2, 'should start with two log entries');
+ updateCounterButtonEle.click().then(function() {
+ expect(textEle.getText()).toContain('Counter = 1');
+ expect(logEles.count()).toBe(3, 'should now have 3 log entries');
+ return resetCounterButtonEle.click();
+ }).then(function() {
+ expect(textEle.getText()).toContain('Counter = 0');
+ expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 prev + 1 reset + 2 destroy + 1 init');
+ });
+ });
+});
diff --git a/public/docs/_examples/lifecycle-hooks/ts/example-config.json b/public/docs/_examples/lifecycle-hooks/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/lifecycle-hooks/ts/plnkr.json b/public/docs/_examples/lifecycle-hooks/ts/plnkr.json
new file mode 100644
index 0000000000..49290aa804
--- /dev/null
+++ b/public/docs/_examples/lifecycle-hooks/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+ "description": "Lifecycle Hooks",
+ "basePath": "src/",
+ "files":["!**/*.d.ts", "!**/*.js"],
+ "tags": ["lifecycle", "hooks",
+ "OnInit", "OnDestroy", "OnChange", "DoCheck",
+ "AfterContentInit", "AfterContentChecked",
+ "AfterViewInit", "AfterViewChecked"]
+}
diff --git a/public/docs/_examples/lifecycle-hooks/ts/src/app/after-content.component.ts b/public/docs/_examples/lifecycle-hooks/ts/src/app/after-content.component.ts
new file mode 100644
index 0000000000..dfd2b80d24
--- /dev/null
+++ b/public/docs/_examples/lifecycle-hooks/ts/src/app/after-content.component.ts
@@ -0,0 +1,116 @@
+// #docplaster
+// #docregion
+import { AfterContentChecked, AfterContentInit, Component, ContentChild } from '@angular/core';
+
+import { LoggerService } from './logger.service';
+
+//////////////////
+@Component({
+ selector: 'my-child',
+ template: '-- projected content begins --
+ -- projected content ends --
`
+// #enddocregion template
+ + `
+
+ `
+})
+// #docregion hooks
+export class AfterContentComponent implements AfterContentChecked, AfterContentInit {
+ private prevHero = '';
+ comment = '';
+
+ // Query for a CONTENT child of type `ChildComponent`
+ @ContentChild(ChildComponent) contentChild: ChildComponent;
+
+// #enddocregion hooks
+ constructor(private logger: LoggerService) {
+ this.logIt('AfterContent constructor');
+ }
+
+// #docregion hooks
+ ngAfterContentInit() {
+ // contentChild is set after the content has been initialized
+ this.logIt('AfterContentInit');
+ this.doSomething();
+ }
+
+ ngAfterContentChecked() {
+ // contentChild is updated after the content has been checked
+ if (this.prevHero === this.contentChild.hero) {
+ this.logIt('AfterContentChecked (no change)');
+ } else {
+ this.prevHero = this.contentChild.hero;
+ this.logIt('AfterContentChecked');
+ this.doSomething();
+ }
+ }
+// #enddocregion hooks
+// #docregion do-something
+
+ // This surrogate for real business logic sets the `comment`
+ private doSomething() {
+ this.comment = this.contentChild.hero.length > 10 ? `That's a long name` : '';
+ }
+
+ private logIt(method: string) {
+ let child = this.contentChild;
+ let message = `${method}: ${child ? child.hero : 'no'} child content`;
+ this.logger.log(message);
+ }
+// #docregion hooks
+ // ...
+}
+// #enddocregion hooks
+
+//////////////
+@Component({
+ selector: 'after-content-parent',
+ template: `
+
+
AfterContent
+
+
` +
+// #docregion parent-template
+ `
+ `
+// #enddocregion parent-template
++ `
+
+
-- AfterContent Logs --
+
Reset
+
{{msg}}
+
-- child view begins --
+ -- child view ends --
`
+// #enddocregion template
+ + `
+
+ `
+})
+// #docregion hooks
+export class AfterViewComponent implements AfterViewChecked, AfterViewInit {
+ private prevHero = '';
+
+ // Query for a VIEW child of type `ChildViewComponent`
+ @ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
+
+// #enddocregion hooks
+ constructor(private logger: LoggerService) {
+ this.logIt('AfterView constructor');
+ }
+
+// #docregion hooks
+ ngAfterViewInit() {
+ // viewChild is set after the view has been initialized
+ this.logIt('AfterViewInit');
+ this.doSomething();
+ }
+
+ ngAfterViewChecked() {
+ // viewChild is updated after the view has been checked
+ if (this.prevHero === this.viewChild.hero) {
+ this.logIt('AfterViewChecked (no change)');
+ } else {
+ this.prevHero = this.viewChild.hero;
+ this.logIt('AfterViewChecked');
+ this.doSomething();
+ }
+ }
+// #enddocregion hooks
+
+ comment = '';
+
+// #docregion do-something
+ // This surrogate for real business logic sets the `comment`
+ private doSomething() {
+ let c = this.viewChild.hero.length > 10 ? `That's a long name` : '';
+ if (c !== this.comment) {
+ // Wait a tick because the component's view has already been checked
+ this.logger.tick_then(() => this.comment = c);
+ }
+ }
+// #enddocregion do-something
+
+ private logIt(method: string) {
+ let child = this.viewChild;
+ let message = `${method}: ${child ? child.hero : 'no'} child view`;
+ this.logger.log(message);
+ }
+// #docregion hooks
+ // ...
+}
+// #enddocregion hooks
+
+//////////////
+@Component({
+ selector: 'after-view-parent',
+ template: `
+
+
AfterView
+
+
+
+
-- AfterView Logs --
+
Reset
+
{{msg}}
+
Component Lifecycle Hooks
+Peek-a-boo: (most) lifecycle hooks OnChanges DoCheck AfterViewInit & AfterViewChecked AfterContentInit & AfterContentChecked Spy: directive with OnInit & OnDestroy Counter: OnChanges + Spy directive back to top
+
+back to top
+
+back to top
+
+back to top
+
+back to top
+
+back to top
+
+back to top
diff --git a/public/docs/_examples/lifecycle-hooks/ts/src/app/app.component.ts b/public/docs/_examples/lifecycle-hooks/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..5bd535a113
--- /dev/null
+++ b/public/docs/_examples/lifecycle-hooks/ts/src/app/app.component.ts
@@ -0,0 +1,7 @@
+// #docregion
+import { Component } from '@angular/core';
+@Component({
+ selector: 'my-app',
+ templateUrl: './app.component.html'
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/lifecycle-hooks/ts/src/app/app.module.ts b/public/docs/_examples/lifecycle-hooks/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..4d9cabf218
--- /dev/null
+++ b/public/docs/_examples/lifecycle-hooks/ts/src/app/app.module.ts
@@ -0,0 +1,67 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+
+import {
+ AfterContentParentComponent,
+ AfterContentComponent,
+ ChildComponent
+} from './after-content.component';
+
+import {
+ AfterViewParentComponent,
+ AfterViewComponent,
+ ChildViewComponent
+} from './after-view.component';
+
+import {
+ CounterParentComponent,
+ MyCounterComponent
+} from './counter.component';
+
+import {
+ DoCheckParentComponent,
+ DoCheckComponent
+} from './do-check.component';
+
+import {
+ OnChangesParentComponent,
+ OnChangesComponent
+} from './on-changes.component';
+
+import { PeekABooParentComponent } from './peek-a-boo-parent.component';
+import { PeekABooComponent } from './peek-a-boo.component';
+
+import { SpyParentComponent } from './spy.component';
+import { SpyDirective } from './spy.directive';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule
+ ],
+ declarations: [
+ AppComponent,
+ AfterContentParentComponent,
+ AfterContentComponent,
+ ChildComponent,
+ AfterViewParentComponent,
+ AfterViewComponent,
+ ChildViewComponent,
+ CounterParentComponent,
+ MyCounterComponent,
+ DoCheckParentComponent,
+ DoCheckComponent,
+ OnChangesParentComponent,
+ OnChangesComponent,
+ PeekABooParentComponent,
+ PeekABooComponent,
+ SpyParentComponent,
+ SpyDirective
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/lifecycle-hooks/ts/src/app/counter.component.ts b/public/docs/_examples/lifecycle-hooks/ts/src/app/counter.component.ts
new file mode 100644
index 0000000000..8efd1fbd52
--- /dev/null
+++ b/public/docs/_examples/lifecycle-hooks/ts/src/app/counter.component.ts
@@ -0,0 +1,84 @@
+// #docregion
+import {
+ Component, Input,
+ OnChanges, SimpleChanges,
+} from '@angular/core';
+
+import { LoggerService } from './logger.service';
+
+@Component({
+ selector: 'my-counter',
+ template: `
+
+ Counter = {{counter}}
+
+
-- Counter Change Log --
+
{{chg}}
+
+
Counter Spy
+
+
Update counter
+
Reset Counter
+
+
+
+
-- Spy Lifecycle Hook Log --
+
{{msg}}
+
+
{{title}}
+
+
+
Reset Log
+
+
+
+
+
+
{{hero.name}} can {{power}}
+
+
-- Change Log --
+
{{chg}}
+
+
{{title}}
+
+
+
Reset Log
+
+
+
+
+
+
{{hero.name}} can {{power}}
+
+
-- Change Log --
+
{{chg}}
+
+
Peek-A-Boo
+
+
+ {{hasChild ? 'Destroy' : 'Create'}} PeekABooComponent
+
+
Update Hero
+
+
+
+
+
-- Lifecycle Hook Log --
+
{{msg}}
+
Now you see my hero, {{name}}
',
+ styles: ['p {background: LightYellow; padding: 8px}']
+})
+// Don't HAVE to mention the Lifecycle Hook interfaces
+// unless we want typing and tool support.
+export class PeekABooComponent extends PeekABoo implements
+ OnChanges, OnInit, DoCheck,
+ AfterContentInit, AfterContentChecked,
+ AfterViewInit, AfterViewChecked,
+ OnDestroy {
+ @Input() name: string;
+
+ private verb = 'initialized';
+
+ constructor(logger: LoggerService) {
+ super(logger);
+
+ let is = this.name ? 'is' : 'is not';
+ this.logIt(`name ${is} known at construction`);
+ }
+
+ // only called for/if there is an @input variable set by parent.
+ ngOnChanges(changes: SimpleChanges) {
+ let changesMsgs: string[] = [];
+ for (let propName in changes) {
+ if (propName === 'name') {
+ let name = changes['name'].currentValue;
+ changesMsgs.push(`name ${this.verb} to "${name}"`);
+ } else {
+ changesMsgs.push(propName + ' ' + this.verb);
+ }
+ }
+ this.logIt(`OnChanges: ${changesMsgs.join('; ')}`);
+ this.verb = 'changed'; // next time it will be a change
+ }
+
+ // Beware! Called frequently!
+ // Called in every change detection cycle anywhere on the page
+ ngDoCheck() { this.logIt(`DoCheck`); }
+
+ ngAfterContentInit() { this.logIt(`AfterContentInit`); }
+
+ // Beware! Called frequently!
+ // Called in every change detection cycle anywhere on the page
+ ngAfterContentChecked() { this.logIt(`AfterContentChecked`); }
+
+ ngAfterViewInit() { this.logIt(`AfterViewInit`); }
+
+ // Beware! Called frequently!
+ // Called in every change detection cycle anywhere on the page
+ ngAfterViewChecked() { this.logIt(`AfterViewChecked`); }
+
+ ngOnDestroy() { this.logIt(`OnDestroy`); }
+}
diff --git a/public/docs/_examples/lifecycle-hooks/ts/src/app/spy.component.html b/public/docs/_examples/lifecycle-hooks/ts/src/app/spy.component.html
new file mode 100644
index 0000000000..782435b961
--- /dev/null
+++ b/public/docs/_examples/lifecycle-hooks/ts/src/app/spy.component.html
@@ -0,0 +1,16 @@
+
+
Spy Directive
+
+
+
Add Hero
+
Reset Heroes
+
+
+
+
+ {{hero}}
+
+
+
-- Spy Lifecycle Hook Log --
+
{{msg}}
+
...
+@Directive({selector: '[mySpy]'})
+export class SpyDirective implements OnInit, OnDestroy {
+
+ constructor(private logger: LoggerService) { }
+
+ ngOnInit() { this.logIt(`onInit`); }
+
+ ngOnDestroy() { this.logIt(`onDestroy`); }
+
+ private logIt(msg: string) {
+ this.logger.log(`Spy #${nextId++} ${msg}`);
+ }
+}
+// #enddocregion spy-directive
diff --git a/public/docs/_examples/lifecycle-hooks/ts/src/index.html b/public/docs/_examples/lifecycle-hooks/ts/src/index.html
new file mode 100644
index 0000000000..cf7059f780
--- /dev/null
+++ b/public/docs/_examples/lifecycle-hooks/ts/src/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+ Angular Lifecycle Hooks
+ Loading...
+
+
+
diff --git a/public/docs/_examples/lifecycle-hooks/ts/src/main.ts b/public/docs/_examples/lifecycle-hooks/ts/src/main.ts
new file mode 100644
index 0000000000..f22933ba8e
--- /dev/null
+++ b/public/docs/_examples/lifecycle-hooks/ts/src/main.ts
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/lifecycle-hooks/ts/src/sample.css b/public/docs/_examples/lifecycle-hooks/ts/src/sample.css
new file mode 100644
index 0000000000..df17c897c6
--- /dev/null
+++ b/public/docs/_examples/lifecycle-hooks/ts/src/sample.css
@@ -0,0 +1,13 @@
+.parent {
+ color: #666;
+ margin: 14px 0;
+ padding: 8px;
+}
+input {
+ margin: 4px;
+ padding: 4px;
+}
+.comment {
+ color: red;
+ font-style: italic;
+}
diff --git a/public/docs/_examples/ngcontainer/ts/example-config.json b/public/docs/_examples/ngcontainer/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/ngcontainer/ts/plnkr.json b/public/docs/_examples/ngcontainer/ts/plnkr.json
new file mode 100644
index 0000000000..a6cdc4ba1a
--- /dev/null
+++ b/public/docs/_examples/ngcontainer/ts/plnkr.json
@@ -0,0 +1,11 @@
+{
+ "description": "",
+ "basePath": "src/",
+ "files": [
+ "!**/*.d.ts",
+ "!**/*.js"
+ ],
+ "tags": [
+ "ngcontainer", "structural", "directives"
+ ]
+}
diff --git a/public/docs/_examples/ngcontainer/ts/src/app/app.component.css b/public/docs/_examples/ngcontainer/ts/src/app/app.component.css
new file mode 100644
index 0000000000..953ed3c39d
--- /dev/null
+++ b/public/docs/_examples/ngcontainer/ts/src/app/app.component.css
@@ -0,0 +1,34 @@
+/* #docregion */
+button {
+ min-width: 100px;
+ font-size: 100%;
+}
+
+code, .code {
+ background-color: #eee;
+ color: black;
+ font-family: Courier, sans-serif;
+ font-size: 85%;
+}
+
+div.code {
+ width: 400px;
+}
+
+.heroic {
+ font-size: 150%;
+ font-weight: bold;
+}
+
+hr {
+ margin: 40px 0
+}
+
+td, th {
+ text-align: left;
+ vertical-align: top;
+}
+
+/* #docregion p-span */
+p span { color: red; font-size: 70%; }
+/* #enddocregion p-span */
diff --git a/public/docs/_examples/ngcontainer/ts/src/app/app.component.html b/public/docs/_examples/ngcontainer/ts/src/app/app.component.html
new file mode 100644
index 0000000000..afd0b00f36
--- /dev/null
+++ b/public/docs/_examples/ngcontainer/ts/src/app/app.component.html
@@ -0,0 +1,279 @@
+
+
+<ng-container>
+
+
+{{hero.name}}
+
+
+<ng-container> and CSS
+Examples demonstrating issues with rigid CSS styles.
+
+Toggle hero
+
+#1 <ng-container> and <p>
+
+
+ I turned the corner
+
+ and saw {{hero.name}}. I waved
+
+ and continued on my way.
+
+
+
+
+ I turned the corner
+
+ and saw {{hero.name}}. I waved
+
+ and continued on my way.
+
+
+
+#2 <ng-container> and <p>
+
+
+
+
+ {{hero.name}} is
+
+ ,
+ and
+ {{trait}}
+ .
+
+
+
+
+
+ {{hero.name}} is
+
+ ,
+ and
+ {{trait}}
+ .
+
+
+
+
+
+
#3 <ng-container> and <p>
+
+
+
+
+
+
+ The
hero.id in the <span>
+ is caught by the
p-span CSS:
+
+
+
+ Id: ({{hero.id}})
+
+ Name: {{hero.name}}
+
+
+
+
+
+ The
hero.id in the <ng-container>
+ is unaffected by the
p-span CSS:
+
+
+ Id: ({{hero.id}})
+
+ Name: {{hero.name}}
+
+
+
+
+ The
hero.id in the <template *ngIf> disappears:
+
+
+ Id: ({{hero.id}})
+
+ Name: {{hero.name}}
+
+
+
+
+ The
hero.id in the <template [ngIf]>
+ is unaffected by the
p-span CSS:
+
+
+ Id: ({{hero.id}})
+
+ Name: {{hero.name}}
+
+
+
+
<ng-container> and layout-sensitive elements
+
+ Examples demonstrating issues with layout-sensitive elements
+ such as <select> and <table>.
+
+
+#1 <ng-container> and <options>
+
+<select> with <span>
+
+ Pick your favorite hero
+ (
+
+
+
+
+ {{h.name}} ({{h?.emotion}})
+
+
+
+
+
+<select> with <ng-container>
+
+ Pick your favorite hero
+ (
+
+
+
+
+ {{h.name}} ({{h?.emotion}})
+
+
+
+
+
+#2 <ng-container> and <options>
+
+
+
+
+
+Options with <ng-container>
+
+
+
+
+
+ LOYAL
+ CLEAN
+ REVERENT
+
+
+ {{ trait | uppercase }}
+
+
+
+
+
+Options with <span>
+
+
+
+
+ LOYAL
+ CLEAN
+ REVERENT
+
+
+ {{ trait | uppercase }}
+
+
+
+
+<ng-container> and <table>
+
+
+
+
+
+ Directive
+ Type
+ Description
+
+
+
+ NgClass A Add or remove multiple CSS classes.
+
+
+
+
+
+
+ xxx S div with *ngIf formats crazy.
+
+
+ yyy S div with *ngIf formats crazy.
+
+
+
+
+
+
+
+
+ NgFor S Repeat the template for each item in a list.
+
+
+ NgIf S Add or remove DOM elements.
+
+
+
+
+
+
+ NgStyle A Add or remove multiple style attributes.
+
+
+
+
+
+ NgSwitch S Include in DOM if case matches the switch value.
+
+
+
+
+
+Do not confuse <ng-container> with <ng-content>
+
+<ng-container>Inside ng-container</ng-container>
+
+Inside ng-container
+
+
+<ng-content>this is an Angular parse error</ng-content>
+
+
+
+Template parse errors:
+
+Demo of </ng-content>
+
+
+ Projected content
+
+
diff --git a/public/docs/_examples/ngcontainer/ts/src/app/app.component.ts b/public/docs/_examples/ngcontainer/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..65c511acd2
--- /dev/null
+++ b/public/docs/_examples/ngcontainer/ts/src/app/app.component.ts
@@ -0,0 +1,24 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { heroes } from './hero';
+
+@Component({
+ selector: 'my-app',
+ templateUrl: './app.component.html',
+ styleUrls: [ './app.component.css' ]
+})
+export class AppComponent {
+ heroes = heroes;
+ hero = this.heroes[0];
+ heroTraits = [ 'honest', 'brave', 'considerate' ];
+
+ // flags for the table
+ attrDirs = true;
+ strucDirs = true;
+ divNgIf = false;
+
+ showId = true;
+ showDefaultTraits = true;
+ showSad = true;
+}
diff --git a/public/docs/_examples/ngcontainer/ts/src/app/app.module.ts b/public/docs/_examples/ngcontainer/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..57ac92f518
--- /dev/null
+++ b/public/docs/_examples/ngcontainer/ts/src/app/app.module.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ContentComponent } from './content.component';
+import { heroComponents } from './hero.components';
+
+@NgModule({
+ imports: [ BrowserModule, FormsModule ],
+ declarations: [
+ AppComponent,
+ ContentComponent,
+ heroComponents
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/ngcontainer/ts/src/app/content.component.ts b/public/docs/_examples/ngcontainer/ts/src/app/content.component.ts
new file mode 100644
index 0000000000..63c5646f99
--- /dev/null
+++ b/public/docs/_examples/ngcontainer/ts/src/app/content.component.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'content-comp',
+ // #docregion template
+ template:
+ `
+
`,
+ // #enddocregion template
+ styles: [ `
+ div { border: medium dashed green; padding: 1em; width: 150px; text-align: center}
+ `]
+})
+export class ContentComponent { }
diff --git a/public/docs/_examples/ngcontainer/ts/src/app/hero.components.ts b/public/docs/_examples/ngcontainer/ts/src/app/hero.components.ts
new file mode 100644
index 0000000000..43e400ed8e
--- /dev/null
+++ b/public/docs/_examples/ngcontainer/ts/src/app/hero.components.ts
@@ -0,0 +1,43 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+import { Hero } from './hero';
+
+@Component({
+ selector: 'happy-hero',
+ template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
+})
+export class HappyHeroComponent {
+ @Input() hero: Hero;
+}
+
+@Component({
+ selector: 'sad-hero',
+ template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
+})
+export class SadHeroComponent {
+ @Input() hero: Hero;
+}
+
+@Component({
+ selector: 'confused-hero',
+ template: `Are you as confused as {{hero.name}}?`
+})
+export class ConfusedHeroComponent {
+ @Input() hero: Hero;
+}
+
+@Component({
+ selector: 'unknown-hero',
+ template: `{{message}}`
+})
+export class UnknownHeroComponent {
+ @Input() hero: Hero;
+ get message() {
+ return this.hero && this.hero.name ?
+ `${this.hero.name} is strange and mysterious.` :
+ 'Are you feeling indecisive?';
+ }
+}
+
+export const heroComponents =
+ [ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ];
diff --git a/public/docs/_examples/ngcontainer/ts/src/app/hero.ts b/public/docs/_examples/ngcontainer/ts/src/app/hero.ts
new file mode 100644
index 0000000000..a1de3b3b82
--- /dev/null
+++ b/public/docs/_examples/ngcontainer/ts/src/app/hero.ts
@@ -0,0 +1,13 @@
+// #docregion
+export class Hero {
+ id: number;
+ name: string;
+ emotion?: string;
+}
+
+export const heroes: Hero[] = [
+ { id: 1, name: 'Mr. Nice', emotion: 'happy'},
+ { id: 2, name: 'Narco', emotion: 'sad' },
+ { id: 3, name: 'Windstorm', emotion: 'confused' },
+ { id: 4, name: 'Magneta'}
+];
diff --git a/public/docs/_examples/ngcontainer/ts/src/index.html b/public/docs/_examples/ngcontainer/ts/src/index.html
new file mode 100644
index 0000000000..fc5ff417c3
--- /dev/null
+++ b/public/docs/_examples/ngcontainer/ts/src/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+ Angular <ng-container>
+ Loading...
+
+
+
diff --git a/public/docs/_examples/ngcontainer/ts/src/main.ts b/public/docs/_examples/ngcontainer/ts/src/main.ts
new file mode 100644
index 0000000000..105b06712d
--- /dev/null
+++ b/public/docs/_examples/ngcontainer/ts/src/main.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
diff --git a/public/docs/_examples/ngmodule/e2e-spec.ts b/public/docs/_examples/ngmodule/e2e-spec.ts
new file mode 100644
index 0000000000..0fbce1213d
--- /dev/null
+++ b/public/docs/_examples/ngmodule/e2e-spec.ts
@@ -0,0 +1,223 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('NgModule', function () {
+
+ // helpers
+ const gold = 'rgba(255, 215, 0, 1)';
+ const powderblue = 'rgba(176, 224, 230, 1)';
+ const lightgray = 'rgba(211, 211, 211, 1)';
+ const white = 'rgba(0, 0, 0, 0)';
+
+ function getCommonsSectionStruct() {
+ const buttons = element.all(by.css('nav a'));
+
+ return {
+ title: element.all(by.tagName('h1')).get(0),
+ subtitle: element.all(by.css('app-title p i')).get(0),
+ contactButton: buttons.get(0),
+ crisisButton: buttons.get(1),
+ heroesButton: buttons.get(2)
+ };
+ }
+
+ function getContactSectionStruct() {
+ const buttons = element.all(by.css('app-contact form button'));
+
+ return {
+ header: element.all(by.css('app-contact h2')).get(0),
+ popupMessage: element.all(by.css('app-contact div')).get(0),
+ contactNameHeader: element.all(by.css('app-contact form h3')).get(0),
+ input: element.all(by.css('app-contact form input')).get(0),
+ validationError: element.all(by.css('app-contact form .alert')).get(0),
+ saveButton: buttons.get(0), // can't be tested
+ nextContactButton: buttons.get(1),
+ newContactButton: buttons.get(2)
+ };
+ }
+
+ function getCrisisSectionStruct() {
+ return {
+ title: element.all(by.css('ng-component h3')).get(0),
+ items: element.all(by.css('ng-component a')),
+ itemId: element.all(by.css('ng-component div')).get(0),
+ listLink: element.all(by.css('ng-component a')).get(0),
+ };
+ }
+
+ function getHeroesSectionStruct() {
+ return {
+ header: element.all(by.css('ng-component h2')).get(0),
+ title: element.all(by.css('ng-component h3')).get(0),
+ items: element.all(by.css('ng-component a')),
+ itemId: element.all(by.css('ng-component ng-component div div')).get(0),
+ itemInput: element.all(by.css('ng-component ng-component input')).get(0),
+ listLink: element.all(by.css('ng-component ng-component a')).get(0),
+ };
+ }
+
+ // tests
+ function appTitleTests(color: string, name?: string) {
+ return function() {
+ it('should have a gray header', function() {
+ const commons = getCommonsSectionStruct();
+ expect(commons.title.getCssValue('backgroundColor')).toBe(color);
+ });
+
+ it('should welcome us', function () {
+ const commons = getCommonsSectionStruct();
+ expect(commons.subtitle.getText()).toBe('Welcome, ' + (name || 'Sherlock Holmes'));
+ });
+ };
+ }
+
+ function contactTests(color: string, name?: string) {
+ return function() {
+ it('shows the contact\'s owner', function() {
+ const contacts = getContactSectionStruct();
+ expect(contacts.header.getText()).toBe('Contact of ' + (name || 'Sherlock Holmes'));
+ });
+
+ it('can cycle between contacts', function () {
+ const contacts = getContactSectionStruct();
+ const nextButton = contacts.nextContactButton;
+ expect(contacts.contactNameHeader.getText()).toBe('Awesome Sam Spade');
+ expect(contacts.contactNameHeader.getCssValue('backgroundColor')).toBe(color);
+ nextButton.click().then(function () {
+ expect(contacts.contactNameHeader.getText()).toBe('Awesome Nick Danger');
+ return nextButton.click();
+ }).then(function () {
+ expect(contacts.contactNameHeader.getText()).toBe('Awesome Nancy Drew');
+ });
+ });
+
+ it('can change an existing contact', function () {
+ const contacts = getContactSectionStruct();
+ contacts.input.sendKeys('a');
+ expect(contacts.input.getCssValue('backgroundColor')).toBe(color);
+ expect(contacts.contactNameHeader.getText()).toBe('Awesome Sam Spadea');
+ });
+
+ it('can create a new contact', function () {
+ const contacts = getContactSectionStruct();
+ const newContactButton = contacts.newContactButton;
+ newContactButton.click().then(function () {
+ expect(contacts.validationError.getText()).toBe('Name is required');
+ contacts.input.sendKeys('John Doe');
+ expect(contacts.contactNameHeader.getText()).toBe('Awesome John Doe');
+ expect(contacts.validationError.getText()).toBe('');
+ });
+ });
+ };
+ }
+
+ describe('index.html', function () {
+ beforeEach(function () {
+ browser.get('');
+ });
+
+ describe('app-title', appTitleTests(white, 'Miss Marple'));
+
+ describe('contact', contactTests(lightgray, 'Miss Marple'));
+
+ describe('crisis center', function () {
+ beforeEach(function () {
+ getCommonsSectionStruct().crisisButton.click();
+ });
+
+ it('shows a list of crisis', function () {
+ const crisis = getCrisisSectionStruct();
+ expect(crisis.title.getText()).toBe('Crisis List');
+ expect(crisis.items.count()).toBe(4);
+ expect(crisis.items.get(0).getText()).toBe('1 - Dragon Burning Cities');
+ });
+
+ it('can navigate to one crisis details', function () {
+ const crisis = getCrisisSectionStruct();
+ crisis.items.get(0).click().then(function() {
+ expect(crisis.itemId.getText()).toBe('Crisis id: 1');
+ return crisis.listLink.click();
+ }).then(function () {
+ // We are back to the list
+ expect(crisis.items.count()).toBe(4);
+ });
+ });
+ });
+
+ describe('heroes', function () {
+ beforeEach(function () {
+ getCommonsSectionStruct().heroesButton.click();
+ });
+
+ it('shows a list of heroes', function() {
+ const heroes = getHeroesSectionStruct();
+ expect(heroes.header.getText()).toBe('Heroes of Miss Marple');
+ expect(heroes.title.getText()).toBe('Hero List');
+ expect(heroes.items.count()).toBe(6);
+ expect(heroes.items.get(0).getText()).toBe('11 - Mr. Nice');
+ });
+
+ it('can navigate and edit one hero details', function () {
+ const heroes = getHeroesSectionStruct();
+ heroes.items.get(0).click().then(function () {
+ expect(heroes.itemId.getText()).toBe('Id: 11');
+ heroes.itemInput.sendKeys(' try');
+ return heroes.listLink.click();
+ }).then(function () {
+ // We are back to the list
+ expect(heroes.items.count()).toBe(6);
+ expect(heroes.items.get(0).getText()).toBe('11 - Mr. Nice try');
+ });
+ });
+ });
+ });
+
+ describe('index.0.html', function() {
+ beforeEach(function () {
+ browser.get('index.0.html');
+ });
+
+ it('has a title', function () {
+ const title = element.all(by.tagName('h1')).get(0);
+ expect(title.getText()).toBe('Minimal NgModule');
+ });
+ });
+
+ describe('index.1.html', function () {
+ beforeEach(function () {
+ browser.get('index.1.html');
+ });
+
+ describe('app-title', appTitleTests(powderblue));
+ });
+
+ describe('index.1b.html', function () {
+ beforeEach(function () {
+ browser.get('index.1b.html');
+ });
+
+ describe('app-title', appTitleTests(powderblue));
+
+ describe('contact', contactTests(powderblue));
+ });
+
+ describe('index.2.html', function () {
+ beforeEach(function () {
+ browser.get('index.2.html');
+ });
+
+ describe('app-title', appTitleTests(gold));
+
+ describe('contact', contactTests(powderblue));
+ });
+
+ describe('index.3.html', function () {
+ beforeEach(function () {
+ browser.get('index.3.html');
+ });
+
+ describe('app-title', appTitleTests(gold));
+ });
+
+});
diff --git a/public/docs/_examples/ngmodule/ts/contact.1b.plnkr.json b/public/docs/_examples/ngmodule/ts/contact.1b.plnkr.json
new file mode 100644
index 0000000000..0f61c91f75
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/contact.1b.plnkr.json
@@ -0,0 +1,25 @@
+{
+ "description": "Contact NgModule v.1",
+ "basePath": "src/",
+ "files": [
+ "app/app.component.1b.ts",
+ "app/app.module.1b.ts",
+ "app/highlight.directive.ts",
+ "app/title.component.html",
+ "app/title.component.ts",
+ "app/user.service.ts",
+
+ "app/contact/awesome.pipe.ts",
+ "app/contact/contact.component.css",
+ "app/contact/contact.component.html",
+ "app/contact/contact.component.3.ts",
+ "app/contact/contact.service.ts",
+ "app/contact/highlight.directive.ts",
+
+ "main.1b.ts",
+ "styles.css",
+ "index.1b.html"
+ ],
+ "main": "index.1b.html",
+ "tags": ["NgModule"]
+}
diff --git a/public/docs/_examples/ngmodule/ts/contact.2.plnkr.json b/public/docs/_examples/ngmodule/ts/contact.2.plnkr.json
new file mode 100644
index 0000000000..6555b76dcd
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/contact.2.plnkr.json
@@ -0,0 +1,27 @@
+{
+ "description": "Contact NgModule v.2",
+ "basePath": "src/",
+ "files": [
+ "app/app.component.2.ts",
+ "app/app.module.2.ts",
+ "app/highlight.directive.ts",
+ "app/title.component.html",
+ "app/title.component.ts",
+ "app/user.service.ts",
+
+ "app/contact/contact.component.css",
+ "app/contact/contact.component.html",
+ "app/contact/contact.service.ts",
+
+ "app/contact/awesome.pipe.ts",
+ "app/contact/contact.component.3.ts",
+ "app/contact/contact.module.2.ts",
+ "app/contact/highlight.directive.ts",
+
+ "main.2.ts",
+ "styles.css",
+ "index.2.html"
+ ],
+ "main": "index.2.html",
+ "tags": ["NgModule"]
+}
diff --git a/public/docs/_examples/ngmodule/ts/example-config.json b/public/docs/_examples/ngmodule/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/ngmodule/ts/minimal.0.plnkr.json b/public/docs/_examples/ngmodule/ts/minimal.0.plnkr.json
new file mode 100644
index 0000000000..e5e37ac4ee
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/minimal.0.plnkr.json
@@ -0,0 +1,13 @@
+{
+ "description": "Minimal NgModule",
+ "basePath": "src/",
+ "files": [
+ "app/app.component.0.ts",
+ "app/app.module.0.ts",
+ "main.0.ts",
+ "styles.css",
+ "index.0.html"
+ ],
+ "main": "index.0.html",
+ "tags": ["NgModule"]
+}
diff --git a/public/docs/_examples/ngmodule/ts/plnkr.json b/public/docs/_examples/ngmodule/ts/plnkr.json
new file mode 100644
index 0000000000..4d9d2ec20b
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/plnkr.json
@@ -0,0 +1,41 @@
+{
+ "description": "NgModule Final",
+ "basePath": "src/",
+ "files": [
+ "app/app.component.ts",
+ "app/app.module.ts",
+ "app/app-routing.module.ts",
+
+ "app/contact/contact.component.css",
+ "app/contact/contact.component.html",
+ "app/contact/contact.service.ts",
+
+ "app/contact/contact.component.ts",
+ "app/contact/contact.module.ts",
+ "app/contact/contact-routing.module.ts",
+
+ "app/crisis/*.ts",
+
+ "app/hero/hero-detail.component.ts",
+ "app/hero/hero-list.component.ts",
+ "app/hero/hero.service.ts",
+
+ "app/hero/hero.component.ts",
+ "app/hero/hero.module.ts",
+ "app/hero/hero-routing.module.ts",
+
+ "app/core/*.css",
+ "app/core/*.html",
+ "app/core/*.ts",
+
+ "app/shared/*.css",
+ "app/shared/*.html",
+ "app/shared/*.ts",
+
+ "main.ts",
+ "styles.css",
+ "index.html"
+ ],
+ "main": "index.html",
+ "tags": ["NgModule"]
+}
diff --git a/public/docs/_examples/ngmodule/ts/pre-shared.3.plnkr.json b/public/docs/_examples/ngmodule/ts/pre-shared.3.plnkr.json
new file mode 100644
index 0000000000..9747801604
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/pre-shared.3.plnkr.json
@@ -0,0 +1,41 @@
+{
+ "description": "NgModule v.3",
+ "basePath": "src/",
+ "files": [
+ "app/app.component.3.ts",
+ "app/app.module.3.ts",
+ "app/app-routing.module.3.ts",
+
+ "app/highlight.directive.ts",
+ "app/title.component.html",
+ "app/title.component.ts",
+ "app/user.service.ts",
+
+ "app/contact/contact.component.css",
+ "app/contact/contact.component.html",
+ "app/contact/contact.service.ts",
+
+ "app/contact/awesome.pipe.ts",
+ "app/contact/contact.component.3.ts",
+ "app/contact/contact.module.3.ts",
+ "app/contact/contact-routing.module.3.ts",
+ "app/contact/highlight.directive.ts",
+
+ "app/crisis/*.ts",
+
+ "app/hero/hero-detail.component.ts",
+ "app/hero/hero-list.component.ts",
+ "app/hero/hero.service.ts",
+
+ "app/hero/hero.component.3.ts",
+ "app/hero/hero.module.3.ts",
+ "app/hero/hero-routing.module.3.ts",
+ "app/hero/highlight.directive.ts",
+
+ "main.3.ts",
+ "styles.css",
+ "index.3.html"
+ ],
+ "main": "index.3.html",
+ "tags": ["NgModule"]
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/app-routing.module.3.ts b/public/docs/_examples/ngmodule/ts/src/app/app-routing.module.3.ts
new file mode 100644
index 0000000000..1d53b708f8
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/app-routing.module.3.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+export const routes: Routes = [
+ { path: '', redirectTo: 'contact', pathMatch: 'full'},
+ { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
+ { path: 'heroes', loadChildren: 'app/hero/hero.module.3#HeroModule' }
+];
+
+@NgModule({
+ imports: [RouterModule.forRoot(routes)],
+ exports: [RouterModule]
+})
+export class AppRoutingModule {}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/app-routing.module.ts b/public/docs/_examples/ngmodule/ts/src/app/app-routing.module.ts
new file mode 100644
index 0000000000..c753dcd488
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/app-routing.module.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+export const routes: Routes = [
+ { path: '', redirectTo: 'contact', pathMatch: 'full'},
+// #docregion lazy-routes
+ { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
+ { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
+// #enddocregion lazy-routes
+];
+
+// #docregion forRoot
+@NgModule({
+ imports: [RouterModule.forRoot(routes)],
+ exports: [RouterModule]
+})
+export class AppRoutingModule {}
+// #enddocregion forRoot
diff --git a/public/docs/_examples/ngmodule/ts/src/app/app.component.0.ts b/public/docs/_examples/ngmodule/ts/src/app/app.component.0.ts
new file mode 100644
index 0000000000..4977890c3b
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/app.component.0.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ template: '{{title}} ',
+})
+export class AppComponent {
+ title = 'Minimal NgModule';
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/app.component.1.ts b/public/docs/_examples/ngmodule/ts/src/app/app.component.1.ts
new file mode 100644
index 0000000000..ccf44d4416
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/app.component.1.ts
@@ -0,0 +1,19 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+// #enddocregion
+ /*
+ // #docregion template
+ template: '{{title}} '
+ // #enddocregion template
+ */
+// #docregion
+ template: '
+ Contact
+ Crisis Center
+ Heroes
+
+
+ Contact
+ Crisis Center
+ Heroes
+
+ Contact of {{userName}}
+{{msg}}
+
+
+
diff --git a/public/docs/_examples/ngmodule/ts/src/app/contact/contact.component.ts b/public/docs/_examples/ngmodule/ts/src/app/contact/contact.component.ts
new file mode 100644
index 0000000000..d6dcbbc53f
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/contact/contact.component.ts
@@ -0,0 +1,54 @@
+// Exact copy except import UserService from core
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { Contact, ContactService } from './contact.service';
+import { UserService } from '../core/user.service';
+
+@Component({
+ selector: 'app-contact',
+ templateUrl: './contact.component.html',
+ styleUrls: [ './contact.component.css' ]
+})
+export class ContactComponent implements OnInit {
+ contact: Contact;
+ contacts: Contact[];
+
+ msg = 'Loading contacts ...';
+ userName = '';
+
+ constructor(private contactService: ContactService, userService: UserService) {
+ this.userName = userService.userName;
+ }
+
+ ngOnInit() {
+ this.contactService.getContacts().then(contacts => {
+ this.msg = '';
+ this.contacts = contacts;
+ this.contact = contacts[0];
+ });
+ }
+
+ next() {
+ let ix = 1 + this.contacts.indexOf(this.contact);
+ if (ix >= this.contacts.length) { ix = 0; }
+ this.contact = this.contacts[ix];
+ }
+
+ onSubmit() {
+ // POST-DEMO TODO: do something like save it
+ this.displayMessage('Saved ' + this.contact.name);
+ }
+
+ newContact() {
+ this.displayMessage('New contact');
+ this.contact = {id: 42, name: ''};
+ this.contacts.push(this.contact);
+ }
+
+ /** Display a message briefly, then remove it. */
+ displayMessage(msg: string) {
+ this.msg = msg;
+ setTimeout(() => this.msg = '', 1500);
+ }
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/contact/contact.module.2.ts b/public/docs/_examples/ngmodule/ts/src/app/contact/contact.module.2.ts
new file mode 100644
index 0000000000..f347bd3b51
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/contact/contact.module.2.ts
@@ -0,0 +1,30 @@
+// #docplaster
+// #docregion
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { AwesomePipe } from './awesome.pipe';
+
+import
+// #enddocregion
+ { ContactComponent } from './contact.component.3';
+/*
+// #docregion
+ { ContactComponent } from './contact.component';
+// #enddocregion
+*/
+// #docregion
+import { ContactService } from './contact.service';
+import { HighlightDirective } from './highlight.directive';
+
+// #docregion class
+@NgModule({
+ imports: [ CommonModule, FormsModule ],
+ declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
+ exports: [ ContactComponent ],
+ providers: [ ContactService ]
+})
+export class ContactModule { }
+// #enddocregion class
+// #enddocregion
diff --git a/public/docs/_examples/ngmodule/ts/src/app/contact/contact.module.3.ts b/public/docs/_examples/ngmodule/ts/src/app/contact/contact.module.3.ts
new file mode 100644
index 0000000000..ff70721b2f
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/contact/contact.module.3.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { AwesomePipe } from './awesome.pipe';
+
+import { ContactComponent } from './contact.component.3';
+import { ContactService } from './contact.service';
+import { HighlightDirective } from './highlight.directive';
+
+import { ContactRoutingModule } from './contact-routing.module.3';
+
+// #docregion class
+@NgModule({
+ imports: [ CommonModule, FormsModule, ContactRoutingModule ],
+ declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
+ providers: [ ContactService ]
+})
+export class ContactModule { }
+// #enddocregion class
+// #enddocregion
diff --git a/public/docs/_examples/ngmodule/ts/src/app/contact/contact.module.ts b/public/docs/_examples/ngmodule/ts/src/app/contact/contact.module.ts
new file mode 100644
index 0000000000..9456de7654
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/contact/contact.module.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../shared/shared.module';
+
+import { ContactComponent } from './contact.component';
+import { ContactService } from './contact.service';
+import { ContactRoutingModule } from './contact-routing.module';
+
+// #docregion class
+@NgModule({
+ imports: [ SharedModule, ContactRoutingModule ],
+ declarations: [ ContactComponent ],
+ providers: [ ContactService ]
+})
+export class ContactModule { }
+// #enddocregion class
diff --git a/public/docs/_examples/ngmodule/ts/src/app/contact/contact.service.ts b/public/docs/_examples/ngmodule/ts/src/app/contact/contact.service.ts
new file mode 100644
index 0000000000..28b18bd84a
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/contact/contact.service.ts
@@ -0,0 +1,29 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+export class Contact {
+ constructor(public id: number, public name: string) { }
+}
+
+const CONTACTS: Contact[] = [
+ new Contact(21, 'Sam Spade'),
+ new Contact(22, 'Nick Danger'),
+ new Contact(23, 'Nancy Drew')
+];
+
+const FETCH_LATENCY = 500;
+
+@Injectable()
+export class ContactService {
+
+ getContacts() {
+ return new Promise(resolve => {
+ setTimeout(() => { resolve(CONTACTS); }, FETCH_LATENCY);
+ });
+ }
+
+ getContact(id: number | string) {
+ return this.getContacts()
+ .then(heroes => heroes.find(hero => hero.id === +id));
+ }
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/contact/highlight.directive.ts b/public/docs/_examples/ngmodule/ts/src/app/contact/highlight.directive.ts
new file mode 100644
index 0000000000..64338b1377
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/contact/highlight.directive.ts
@@ -0,0 +1,18 @@
+/* tslint:disable */
+// Same directive name and selector as
+// HighlightDirective in parent AppModule
+// It selects for both input boxes and 'highlight' attr
+// and it highlights in blue instead of gold
+
+// #docregion
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({ selector: '[highlight], input' })
+/** Highlight the attached element or an InputElement in blue */
+export class HighlightDirective {
+ constructor(el: ElementRef) {
+ el.nativeElement.style.backgroundColor = 'powderblue';
+ console.log(
+ `* Contact highlight called for ${el.nativeElement.tagName}`);
+ }
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/core/core.module.ts b/public/docs/_examples/ngmodule/ts/src/app/core/core.module.ts
new file mode 100644
index 0000000000..27cb9a2193
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/core/core.module.ts
@@ -0,0 +1,48 @@
+/* tslint:disable:member-ordering no-unused-variable */
+// #docplaster
+// #docregion
+// #docregion v4
+import {
+ ModuleWithProviders, NgModule,
+ Optional, SkipSelf } from '@angular/core';
+
+import { CommonModule } from '@angular/common';
+
+import { TitleComponent } from './title.component';
+import { UserService } from './user.service';
+// #enddocregion
+import { UserServiceConfig } from './user.service';
+
+// #docregion v4
+@NgModule({
+ imports: [ CommonModule ],
+ declarations: [ TitleComponent ],
+ exports: [ TitleComponent ],
+ providers: [ UserService ]
+})
+export class CoreModule {
+// #enddocregion v4
+
+ // #docregion ctor
+ constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
+ if (parentModule) {
+ throw new Error(
+ 'CoreModule is already loaded. Import it in the AppModule only');
+ }
+ }
+ // #enddocregion ctor
+
+ // #docregion for-root
+ static forRoot(config: UserServiceConfig): ModuleWithProviders {
+ return {
+ ngModule: CoreModule,
+ providers: [
+ {provide: UserServiceConfig, useValue: config }
+ ]
+ };
+ }
+ // #enddocregion for-root
+// #docregion v4
+}
+// #enddocregion v4
+// #enddocregion
diff --git a/public/docs/_examples/ngmodule/ts/src/app/core/title.component.html b/public/docs/_examples/ngmodule/ts/src/app/core/title.component.html
new file mode 100644
index 0000000000..8ebd08ae43
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/core/title.component.html
@@ -0,0 +1,6 @@
+
+{{title}} {{subtitle}}
+
+ Welcome, {{user}}
+
+
diff --git a/public/docs/_examples/ngmodule/ts/src/app/core/title.component.ts b/public/docs/_examples/ngmodule/ts/src/app/core/title.component.ts
new file mode 100644
index 0000000000..b52a57aa13
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/core/title.component.ts
@@ -0,0 +1,17 @@
+// Exact copy of app/title.component.ts except import UserService from shared
+import { Component, Input } from '@angular/core';
+import { UserService } from '../core/user.service';
+
+@Component({
+ selector: 'app-title',
+ templateUrl: './title.component.html',
+})
+export class TitleComponent {
+ @Input() subtitle = '';
+ title = 'Angular Modules';
+ user = '';
+
+ constructor(userService: UserService) {
+ this.user = userService.userName;
+ }
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/core/user.service.ts b/public/docs/_examples/ngmodule/ts/src/app/core/user.service.ts
new file mode 100644
index 0000000000..8fe839075e
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/core/user.service.ts
@@ -0,0 +1,32 @@
+// Crazy copy of the app/user.service
+// Proves that UserService is an app-wide singleton and only instantiated once
+// IFF shared.module follows the `forRoot` pattern
+//
+// If it didn't, a new instance of UserService would be created
+// after each lazy load and the userName would double up.
+
+import { Injectable, Optional } from '@angular/core';
+
+let nextId = 1;
+
+export class UserServiceConfig {
+ userName = 'Philip Marlowe';
+}
+
+@Injectable()
+export class UserService {
+ id = nextId++;
+ private _userName = 'Sherlock Holmes';
+
+ // #docregion ctor
+ constructor(@Optional() config: UserServiceConfig) {
+ if (config) { this._userName = config.userName; }
+ }
+ // #enddocregion ctor
+
+ get userName() {
+ // Demo: add a suffix if this service has been created more than once
+ const suffix = this.id > 1 ? ` times ${this.id}` : '';
+ return this._userName + suffix;
+ }
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/crisis/crisis-detail.component.ts b/public/docs/_examples/ngmodule/ts/src/app/crisis/crisis-detail.component.ts
new file mode 100644
index 0000000000..9749029d62
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/crisis/crisis-detail.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+ template: `
+
Crisis Detail
+ Crisis id: {{id}}
+ Crisis List
+ `
+})
+export class CrisisDetailComponent implements OnInit {
+ id: number;
+ constructor(private route: ActivatedRoute) { }
+
+ ngOnInit() {
+ this.id = parseInt(this.route.snapshot.params['id'], 10);
+ }
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/crisis/crisis-list.component.ts b/public/docs/_examples/ngmodule/ts/src/app/crisis/crisis-list.component.ts
new file mode 100644
index 0000000000..ae459cdf1b
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/crisis/crisis-list.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Crisis,
+ CrisisService } from './crisis.service';
+
+@Component({
+ template: `
+ Crisis List
+
+ `
+})
+export class CrisisListComponent implements OnInit {
+ crisises: Promise;
+
+ constructor(private crisisService: CrisisService) { }
+
+ ngOnInit() {
+ this.crisises = this.crisisService.getCrises();
+ }
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/crisis/crisis-routing.module.ts b/public/docs/_examples/ngmodule/ts/src/app/crisis/crisis-routing.module.ts
new file mode 100644
index 0000000000..c60efa8cb4
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/crisis/crisis-routing.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { Routes,
+ RouterModule } from '@angular/router';
+
+import { CrisisListComponent } from './crisis-list.component';
+import { CrisisDetailComponent } from './crisis-detail.component';
+
+const routes: Routes = [
+ { path: '', redirectTo: 'list', pathMatch: 'full'},
+ { path: 'list', component: CrisisListComponent },
+ { path: ':id', component: CrisisDetailComponent }
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule]
+})
+export class CrisisRoutingModule {}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/crisis/crisis.module.ts b/public/docs/_examples/ngmodule/ts/src/app/crisis/crisis.module.ts
new file mode 100644
index 0000000000..f557bd6423
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/crisis/crisis.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CrisisListComponent } from './crisis-list.component';
+import { CrisisDetailComponent } from './crisis-detail.component';
+import { CrisisService } from './crisis.service';
+import { CrisisRoutingModule } from './crisis-routing.module';
+
+@NgModule({
+ imports: [ CommonModule, CrisisRoutingModule ],
+ declarations: [ CrisisDetailComponent, CrisisListComponent ],
+ providers: [ CrisisService ]
+})
+export class CrisisModule {}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/crisis/crisis.service.ts b/public/docs/_examples/ngmodule/ts/src/app/crisis/crisis.service.ts
new file mode 100644
index 0000000000..419ee19b36
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/crisis/crisis.service.ts
@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+
+export class Crisis {
+ constructor(public id: number, public name: string) { }
+}
+
+const CRISES: Crisis[] = [
+ new Crisis(1, 'Dragon Burning Cities'),
+ new Crisis(2, 'Sky Rains Great White Sharks'),
+ new Crisis(3, 'Giant Asteroid Heading For Earth'),
+ new Crisis(4, 'Procrastinators Meeting Delayed Again'),
+];
+
+const FETCH_LATENCY = 500;
+
+@Injectable()
+export class CrisisService {
+
+ getCrises() {
+ return new Promise(resolve => {
+ setTimeout(() => { resolve(CRISES); }, FETCH_LATENCY);
+ });
+ }
+
+ getCrisis(id: number | string) {
+ return this.getCrises()
+ .then(heroes => heroes.find(hero => hero.id === +id));
+ }
+
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/hero/hero-detail.component.ts b/public/docs/_examples/ngmodule/ts/src/app/hero/hero-detail.component.ts
new file mode 100644
index 0000000000..1478ad350c
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/hero/hero-detail.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { Hero,
+ HeroService } from './hero.service';
+
+@Component({
+ template: `
+ Hero Detail
+
+
Id: {{hero.id}}
+
Name:
+
+
Hero List
+ `
+})
+export class HeroDetailComponent implements OnInit {
+ hero: Hero;
+
+ constructor(
+ private route: ActivatedRoute,
+ private heroService: HeroService) { }
+
+ ngOnInit() {
+ let id = parseInt(this.route.snapshot.params['id'], 10);
+ this.heroService.getHero(id).then(hero => this.hero = hero);
+ }
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/hero/hero-list.component.ts b/public/docs/_examples/ngmodule/ts/src/app/hero/hero-list.component.ts
new file mode 100644
index 0000000000..5a4e9ef0c4
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/hero/hero-list.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero,
+ HeroService } from './hero.service';
+
+@Component({
+ template: `
+ Hero List
+
+ `
+})
+export class HeroListComponent implements OnInit {
+ heroes: Promise;
+ constructor(private heroService: HeroService) { }
+
+ ngOnInit() {
+ this.heroes = this.heroService.getHeroes();
+ }
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/hero/hero-routing.module.3.ts b/public/docs/_examples/ngmodule/ts/src/app/hero/hero-routing.module.3.ts
new file mode 100644
index 0000000000..588ffd94be
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/hero/hero-routing.module.3.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { Routes,
+ RouterModule } from '@angular/router';
+
+import { HeroComponent } from './hero.component.3';
+import { HeroListComponent } from './hero-list.component';
+import { HeroDetailComponent } from './hero-detail.component';
+
+const routes: Routes = [
+ { path: '',
+ component: HeroComponent,
+ children: [
+ { path: '', component: HeroListComponent },
+ { path: ':id', component: HeroDetailComponent }
+ ]
+ }
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule]
+})
+export class HeroRoutingModule {}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/hero/hero-routing.module.ts b/public/docs/_examples/ngmodule/ts/src/app/hero/hero-routing.module.ts
new file mode 100644
index 0000000000..d97aab3beb
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/hero/hero-routing.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { Routes,
+ RouterModule } from '@angular/router';
+
+import { HeroComponent } from './hero.component';
+import { HeroListComponent } from './hero-list.component';
+import { HeroDetailComponent } from './hero-detail.component';
+
+const routes: Routes = [
+ { path: '',
+ component: HeroComponent,
+ children: [
+ { path: '', component: HeroListComponent },
+ { path: ':id', component: HeroDetailComponent }
+ ]
+ }
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule]
+})
+export class HeroRoutingModule {}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/hero/hero.component.3.ts b/public/docs/_examples/ngmodule/ts/src/app/hero/hero.component.3.ts
new file mode 100644
index 0000000000..d52bc253df
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/hero/hero.component.3.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+import { HeroService } from './hero.service';
+import { UserService } from '../user.service';
+
+@Component({
+ template: `
+ Heroes of {{userName}}
+ Heroes of {{userName}}
+ (resolve => {
+ setTimeout(() => { resolve(HEROES); }, FETCH_LATENCY);
+ });
+ }
+
+ getHero(id: number | string) {
+ return this.getHeroes()
+ .then(heroes => heroes.find(hero => hero.id === +id));
+ }
+
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/hero/highlight.directive.ts b/public/docs/_examples/ngmodule/ts/src/app/hero/highlight.directive.ts
new file mode 100644
index 0000000000..d7e39afd05
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/hero/highlight.directive.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { Directive, ElementRef } from '@angular/core';
+
+// Same directive name and selector as
+// HighlightDirective in parent AppRootModule
+// It selects for both input boxes and 'highlight' attr
+// and it highlights in beige instead of yellow
+@Directive({ selector: '[highlight]' })
+export class HighlightDirective {
+ constructor(el: ElementRef) {
+ el.nativeElement.style.backgroundColor = 'beige';
+ console.log(`* Hero highlight called for ${el.nativeElement.tagName}`);
+ }
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/highlight.directive.ts b/public/docs/_examples/ngmodule/ts/src/app/highlight.directive.ts
new file mode 100644
index 0000000000..df67a3ae89
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/highlight.directive.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({ selector: '[highlight]' })
+/** Highlight the attached element in gold */
+export class HighlightDirective {
+ constructor(el: ElementRef) {
+ el.nativeElement.style.backgroundColor = 'gold';
+ console.log(
+ `* AppRoot highlight called for ${el.nativeElement.tagName}`);
+ }
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/shared/awesome.pipe.ts b/public/docs/_examples/ngmodule/ts/src/app/shared/awesome.pipe.ts
new file mode 100644
index 0000000000..a1a0001d24
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/shared/awesome.pipe.ts
@@ -0,0 +1,10 @@
+// Exact copy of contact.awesome.pipe
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'awesome' })
+/** Precede the input string with the word "Awesome " */
+export class AwesomePipe implements PipeTransform {
+ transform(phrase: string) {
+ return phrase ? 'Awesome ' + phrase : '';
+ }
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/shared/highlight.directive.ts b/public/docs/_examples/ngmodule/ts/src/app/shared/highlight.directive.ts
new file mode 100644
index 0000000000..63fbd4e488
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/shared/highlight.directive.ts
@@ -0,0 +1,13 @@
+/* tslint:disable */
+// Exact copy of contact/highlight.directive except for color and message
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({ selector: '[highlight], input' })
+/** Highlight the attached element or an InputElement in gray */
+export class HighlightDirective {
+ constructor(el: ElementRef) {
+ el.nativeElement.style.backgroundColor = 'lightgray';
+ console.log(
+ `* Shared highlight called for ${el.nativeElement.tagName}`);
+ }
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/app/shared/shared.module.ts b/public/docs/_examples/ngmodule/ts/src/app/shared/shared.module.ts
new file mode 100644
index 0000000000..2da7d7b2a5
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/shared/shared.module.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { AwesomePipe } from './awesome.pipe';
+import { HighlightDirective } from './highlight.directive';
+
+// #docregion module
+@NgModule({
+ imports: [ CommonModule ],
+ declarations: [ AwesomePipe, HighlightDirective ],
+ exports: [ AwesomePipe, HighlightDirective,
+ CommonModule, FormsModule ]
+})
+export class SharedModule { }
+// #enddocregion module
+// #enddocregion
diff --git a/public/docs/_examples/ngmodule/ts/src/app/title.component.html b/public/docs/_examples/ngmodule/ts/src/app/title.component.html
new file mode 100644
index 0000000000..3db364cd4b
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/title.component.html
@@ -0,0 +1,10 @@
+
+
+{{title}} {{subtitle}}
+
+
+
+ Welcome, {{user}}
+
+
+
diff --git a/public/docs/_examples/ngmodule/ts/src/app/title.component.ts b/public/docs/_examples/ngmodule/ts/src/app/title.component.ts
new file mode 100644
index 0000000000..9a2ef1c4b8
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/title.component.ts
@@ -0,0 +1,24 @@
+// #docplaster
+// #docregion
+// #docregion v1
+import { Component, Input } from '@angular/core';
+// #enddocregion v1
+import { UserService } from './user.service';
+// #docregion v1
+
+@Component({
+ selector: 'app-title',
+ templateUrl: './title.component.html',
+})
+export class TitleComponent {
+ @Input() subtitle = '';
+ title = 'Angular Modules';
+// #enddocregion v1
+ user = '';
+
+ constructor(userService: UserService) {
+ this.user = userService.userName;
+ }
+// #docregion v1
+}
+// #enddocregion v1
diff --git a/public/docs/_examples/ngmodule/ts/src/app/user.service.ts b/public/docs/_examples/ngmodule/ts/src/app/user.service.ts
new file mode 100644
index 0000000000..7d996b26fa
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/app/user.service.ts
@@ -0,0 +1,8 @@
+// #docregion
+import { Injectable } from '@angular/core';
+
+@Injectable()
+/** Dummy version of an authenticated user service */
+export class UserService {
+ userName = 'Sherlock Holmes';
+}
diff --git a/public/docs/_examples/ngmodule/ts/src/index.0.html b/public/docs/_examples/ngmodule/ts/src/index.0.html
new file mode 100644
index 0000000000..2281b9fecb
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/index.0.html
@@ -0,0 +1,24 @@
+
+
+
+ NgModule Minimal
+ Loading...
+
+
diff --git a/public/docs/_examples/ngmodule/ts/src/index.1.html b/public/docs/_examples/ngmodule/ts/src/index.1.html
new file mode 100644
index 0000000000..65f7991a26
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/index.1.html
@@ -0,0 +1,24 @@
+
+
+
+ NgModule - Contact
+ Loading...
+
+
diff --git a/public/docs/_examples/ngmodule/ts/src/index.1b.html b/public/docs/_examples/ngmodule/ts/src/index.1b.html
new file mode 100644
index 0000000000..b4a89d6549
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/index.1b.html
@@ -0,0 +1,24 @@
+
+
+
+ NgModule - Contact
+ Loading...
+
+
diff --git a/public/docs/_examples/ngmodule/ts/src/index.2.html b/public/docs/_examples/ngmodule/ts/src/index.2.html
new file mode 100644
index 0000000000..72c545f1f3
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/index.2.html
@@ -0,0 +1,24 @@
+
+
+
+ NgModule - Contact
+ Loading...
+
+
diff --git a/public/docs/_examples/ngmodule/ts/src/index.3.html b/public/docs/_examples/ngmodule/ts/src/index.3.html
new file mode 100644
index 0000000000..ec55dd984e
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/index.3.html
@@ -0,0 +1,24 @@
+
+
+
+ NgModule - Contact
+ Loading...
+
+
diff --git a/public/docs/_examples/ngmodule/ts/src/index.html b/public/docs/_examples/ngmodule/ts/src/index.html
new file mode 100644
index 0000000000..9fc50c02a5
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/index.html
@@ -0,0 +1,25 @@
+
+
+
+ NgModule Deluxe
+ Loading...
+
+
diff --git a/public/docs/_examples/ngmodule/ts/src/main-static.ts b/public/docs/_examples/ngmodule/ts/src/main-static.ts
new file mode 100644
index 0000000000..a1bcf466d2
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/main-static.ts
@@ -0,0 +1,13 @@
+// #docplaster
+/*
+// #docregion
+// The browser platform without a compiler
+import { platformBrowser } from '@angular/platform-browser';
+
+// The app module factory produced by the static offline compiler
+import { AppModuleNgFactory } from './app/app.module.ngfactory';
+
+// Launch with the app module factory.
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
+// #enddocregion
+*/
diff --git a/public/docs/_examples/ngmodule/ts/src/main.0.ts b/public/docs/_examples/ngmodule/ts/src/main.0.ts
new file mode 100644
index 0000000000..6d1d712f07
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/main.0.ts
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module.0';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/ngmodule/ts/src/main.1.ts b/public/docs/_examples/ngmodule/ts/src/main.1.ts
new file mode 100644
index 0000000000..48129f4cc9
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/main.1.ts
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module.1';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/ngmodule/ts/src/main.1b.ts b/public/docs/_examples/ngmodule/ts/src/main.1b.ts
new file mode 100644
index 0000000000..7a7bfae22f
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/main.1b.ts
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module.1b';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/ngmodule/ts/src/main.2.ts b/public/docs/_examples/ngmodule/ts/src/main.2.ts
new file mode 100644
index 0000000000..c535e2e775
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/main.2.ts
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module.2';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/ngmodule/ts/src/main.3.ts b/public/docs/_examples/ngmodule/ts/src/main.3.ts
new file mode 100644
index 0000000000..72f21dd142
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/main.3.ts
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module.3';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/ngmodule/ts/src/main.ts b/public/docs/_examples/ngmodule/ts/src/main.ts
new file mode 100644
index 0000000000..c8424d8c4c
--- /dev/null
+++ b/public/docs/_examples/ngmodule/ts/src/main.ts
@@ -0,0 +1,9 @@
+// #docregion
+// The browser platform with a compiler
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+// The app module
+import { AppModule } from './app/app.module';
+
+// Compile and launch the module
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
new file mode 100644
index 0000000000..41dc5e5b56
--- /dev/null
+++ b/public/docs/_examples/package.json
@@ -0,0 +1,89 @@
+{
+ "name": "angular-examples-master",
+ "version": "1.0.0",
+ "private": true,
+ "description": "Master package.json, the superset of all dependencies for all of the _example package.json files. See _boilerplate/package.json for example npm scripts.",
+ "scripts": {
+ "http-server": "http-server",
+ "protractor": "protractor",
+ "webdriver:update": "webdriver-manager update --standalone false --gecko false"
+ },
+ "keywords": [],
+ "author": "",
+ "license": "MIT",
+ "dependencies": {
+ "@angular/animations": "~4.0.0",
+ "@angular/common": "~4.0.0",
+ "@angular/compiler": "~4.0.0",
+ "@angular/compiler-cli": "~4.0.0",
+ "@angular/core": "~4.0.0",
+ "@angular/forms": "~4.0.0",
+ "@angular/http": "~4.0.0",
+ "@angular/platform-browser": "~4.0.0",
+ "@angular/platform-browser-dynamic": "~4.0.0",
+ "@angular/platform-server": "~4.0.0",
+ "@angular/router": "~4.0.0",
+ "@angular/tsc-wrapped": "~4.0.0",
+ "@angular/upgrade": "~4.0.0",
+ "angular-in-memory-web-api": "~0.3.1",
+ "core-js": "^2.4.1",
+ "rxjs": "5.0.1",
+ "systemjs": "0.19.39",
+ "zone.js": "^0.8.4"
+ },
+ "devDependencies": {
+ "@angular/cli": "^1.0.0",
+ "@types/angular": "^1.5.16",
+ "@types/angular-animate": "^1.5.5",
+ "@types/angular-cookies": "^1.4.2",
+ "@types/angular-mocks": "^1.5.5",
+ "@types/angular-resource": "^1.5.6",
+ "@types/angular-route": "^1.3.2",
+ "@types/angular-sanitize": "^1.3.3",
+ "@types/jasmine": "2.5.36",
+ "@types/node": "^6.0.45",
+ "angular2-template-loader": "^0.6.0",
+ "awesome-typescript-loader": "^3.0.4",
+ "babel-cli": "^6.16.0",
+ "babel-preset-angular2": "^0.0.2",
+ "babel-preset-es2015": "^6.16.0",
+ "canonical-path": "0.0.2",
+ "concurrently": "^3.0.0",
+ "css-loader": "^0.26.1",
+ "extract-text-webpack-plugin": "2.0.0-beta.5",
+ "file-loader": "^0.9.0",
+ "html-loader": "^0.4.3",
+ "html-webpack-plugin": "^2.16.1",
+ "http-server": "^0.9.0",
+ "jasmine": "~2.4.1",
+ "jasmine-core": "~2.4.1",
+ "karma": "^1.3.0",
+ "karma-chrome-launcher": "^2.0.0",
+ "karma-cli": "^1.0.1",
+ "karma-jasmine": "^1.0.2",
+ "karma-jasmine-html-reporter": "^0.2.2",
+ "karma-phantomjs-launcher": "^1.0.2",
+ "karma-sourcemap-loader": "^0.3.7",
+ "karma-webpack": "^2.0.1",
+ "lite-server": "^2.2.2",
+ "lodash": "^4.16.2",
+ "null-loader": "^0.1.1",
+ "phantomjs-prebuilt": "^2.1.7",
+ "protractor": "~4.0.14",
+ "raw-loader": "^0.5.1",
+ "rimraf": "^2.5.4",
+ "rollup": "^0.41.6",
+ "rollup-plugin-commonjs": "^8.0.2",
+ "rollup-plugin-node-resolve": "2.0.0",
+ "rollup-plugin-uglify": "^1.0.1",
+ "source-map-explorer": "^1.3.2",
+ "style-loader": "^0.13.1",
+ "ts-node": "^1.3.0",
+ "tslint": "^3.15.1",
+ "typescript": "~2.2.0",
+ "webpack": "2.2.1",
+ "webpack-dev-server": "2.4.1",
+ "webpack-merge": "^3.0.0"
+ },
+ "repository": {}
+}
diff --git a/public/docs/_examples/pipes/e2e-spec.ts b/public/docs/_examples/pipes/e2e-spec.ts
new file mode 100644
index 0000000000..00277e3657
--- /dev/null
+++ b/public/docs/_examples/pipes/e2e-spec.ts
@@ -0,0 +1,111 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Pipes', function () {
+
+ beforeAll(function () {
+ browser.get('');
+ });
+
+ it('should open correctly', function () {
+ expect(element.all(by.tagName('h1')).get(0).getText()).toEqual('Pipes');
+ expect(element(by.css('hero-birthday p')).getText()).toEqual(`The hero's birthday is Apr 15, 1988`);
+ });
+
+ it('should show 4 heroes', function () {
+ expect(element.all(by.css('hero-list div')).count()).toEqual(4);
+ });
+
+ it('should show a familiar hero in json', function () {
+ expect(element(by.cssContainingText('hero-list p', 'Heroes as JSON')).getText()).toContain('Bombasto');
+ });
+
+ it('should show alternate birthday formats', function () {
+ expect(element(by.cssContainingText('my-app > p', `The hero's birthday is Apr 15, 1988`)).isDisplayed()).toBe(true);
+ expect(element(by.cssContainingText('my-app > p', `The hero's birthday is 04/15/88`)).isDisplayed()).toBe(true);
+ });
+
+ it('should be able to toggle birthday formats', function () {
+ let birthDayEle = element(by.css('hero-birthday2 > p'));
+ expect(birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/1988`);
+ let buttonEle = element(by.cssContainingText('hero-birthday2 > button', 'Toggle Format'));
+ expect(buttonEle.isDisplayed()).toBe(true);
+ buttonEle.click().then(function() {
+ expect(birthDayEle.getText()).toEqual(`The hero's birthday is Friday, April 15, 1988`);
+ });
+ });
+
+ it('should be able to chain and compose pipes', function () {
+ let chainedPipeEles = element.all(by.cssContainingText('my-app p', `The chained hero's`));
+ expect(chainedPipeEles.count()).toBe(3, 'should have 3 chained pipe examples');
+ expect(chainedPipeEles.get(0).getText()).toContain('APR 15, 1988');
+ expect(chainedPipeEles.get(1).getText()).toContain('FRIDAY, APRIL 15, 1988');
+ expect(chainedPipeEles.get(2).getText()).toContain('FRIDAY, APRIL 15, 1988');
+ });
+
+ it('should be able to use ExponentialStrengthPipe pipe', function () {
+ let ele = element(by.css('power-booster p'));
+ expect(ele.getText()).toContain('Super power boost: 1024');
+ });
+
+ it('should be able to use the exponential calculator', function () {
+ let eles = element.all(by.css('power-boost-calculator input'));
+ let baseInputEle = eles.get(0);
+ let factorInputEle = eles.get(1);
+ let outputEle = element(by.css('power-boost-calculator p'));
+ baseInputEle.clear().then(function() {
+ baseInputEle.sendKeys('7');
+ return factorInputEle.clear();
+ }).then(function() {
+ factorInputEle.sendKeys('3');
+ expect(outputEle.getText()).toContain('343');
+ });
+ });
+
+
+ it('should support flying heroes (pure) ', function () {
+ let nameEle = element(by.css('flying-heroes input[type="text"]'));
+ let canFlyCheckEle = element(by.css('flying-heroes #can-fly'));
+ let mutateCheckEle = element(by.css('flying-heroes #mutate'));
+ let resetEle = element(by.css('flying-heroes button'));
+ let flyingHeroesEle = element.all(by.css('flying-heroes #flyers div'));
+
+ expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"');
+ expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');
+ expect(flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly');
+
+ nameEle.sendKeys('test1\n');
+ expect(flyingHeroesEle.count()).toEqual(2, 'no change while mutating array');
+ mutateCheckEle.click().then(function() {
+ nameEle.sendKeys('test2\n');
+ expect(flyingHeroesEle.count()).toEqual(4, 'not mutating; should see both adds');
+ expect(flyingHeroesEle.get(2).getText()).toContain('test1');
+ expect(flyingHeroesEle.get(3).getText()).toContain('test2');
+ return resetEle.click();
+ })
+ .then(function() {
+ expect(flyingHeroesEle.count()).toEqual(2, 'reset should restore orginal flying heroes');
+ });
+ });
+
+
+ it('should support flying heroes (impure) ', function () {
+ let nameEle = element(by.css('flying-heroes-impure input[type="text"]'));
+ let canFlyCheckEle = element(by.css('flying-heroes-impure #can-fly'));
+ let mutateCheckEle = element(by.css('flying-heroes-impure #mutate'));
+ let flyingHeroesEle = element.all(by.css('flying-heroes-impure #flyers div'));
+
+ expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"');
+ expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');
+ expect(flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly');
+
+ nameEle.sendKeys('test1\n');
+ expect(flyingHeroesEle.count()).toEqual(3, 'new flying hero should show in mutating array');
+ });
+
+ it('should show an async hero message', function () {
+ expect(element.all(by.tagName('hero-message')).get(0).getText()).toContain('hero');
+ });
+
+});
diff --git a/public/docs/_examples/pipes/ts/example-config.json b/public/docs/_examples/pipes/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/pipes/ts/plnkr.json b/public/docs/_examples/pipes/ts/plnkr.json
new file mode 100644
index 0000000000..3c07266109
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/plnkr.json
@@ -0,0 +1,8 @@
+{
+ "description": "Pipes",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js"],
+ "tags": ["pipe"]
+}
diff --git a/public/docs/_examples/pipes/ts/src/app/app.component.html b/public/docs/_examples/pipes/ts/src/app/app.component.html
new file mode 100644
index 0000000000..a27d587fcd
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/src/app/app.component.html
@@ -0,0 +1,83 @@
+Pipes
+Happy Birthday v1 Birthday DatePipe Happy Birthday v2 Birthday Pipe Chaining Power Booster custom pipe Power Boost Calculator custom pipe with params Flying Heroes filter pipe (pure) Flying Heroes filter pipe (impure) Async Hero Message and AsyncPipe Hero List with caching FetchJsonPipe Hero Birthday v1
+Birthday DatePipe
+
+The hero's birthday is {{ birthday | date }}
+
+
+
+The hero's birthday is {{ birthday | date:"MM/dd/yy" }}
+
+
+Hero Birthday v2
+Birthday Pipe Chaining
+
+
+ The chained hero's birthday is
+ {{ birthday | date | uppercase}}
+
+
+
+
+
+ The chained hero's birthday is
+ {{ birthday | date:'fullDate' | uppercase}}
+
+
+
+
+ The chained hero's birthday is
+ {{ ( birthday | date:'fullDate' ) | uppercase}}
+
+
+loading
+
+
diff --git a/public/docs/_examples/pipes/ts/src/app/app.component.ts b/public/docs/_examples/pipes/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..090eae7766
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/src/app/app.component.ts
@@ -0,0 +1,10 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ templateUrl: './app.component.html'
+})
+export class AppComponent {
+ birthday = new Date(1988, 3, 15); // April 15, 1988
+}
diff --git a/public/docs/_examples/pipes/ts/src/app/app.module.ts b/public/docs/_examples/pipes/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..89a3a29505
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/src/app/app.module.ts
@@ -0,0 +1,48 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+import {
+ FlyingHeroesComponent,
+ FlyingHeroesImpureComponent
+} from './flying-heroes.component';
+import { HeroAsyncMessageComponent } from './hero-async-message.component';
+import { HeroBirthdayComponent } from './hero-birthday1.component';
+import { HeroBirthday2Component } from './hero-birthday2.component';
+import { HeroListComponent } from './hero-list.component';
+import { PowerBoosterComponent } from './power-booster.component';
+import { PowerBoostCalculatorComponent } from './power-boost-calculator.component';
+import {
+ FlyingHeroesPipe,
+ FlyingHeroesImpurePipe
+} from './flying-heroes.pipe';
+import { FetchJsonPipe } from './fetch-json.pipe';
+import { ExponentialStrengthPipe } from './exponential-strength.pipe';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ HttpModule
+ ],
+ declarations: [
+ AppComponent,
+ FlyingHeroesComponent,
+ FlyingHeroesImpureComponent,
+ HeroAsyncMessageComponent,
+ HeroBirthdayComponent,
+ HeroBirthday2Component,
+ HeroListComponent,
+ PowerBoosterComponent,
+ PowerBoostCalculatorComponent,
+ FlyingHeroesPipe,
+ FlyingHeroesImpurePipe,
+ FetchJsonPipe,
+ ExponentialStrengthPipe
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/pipes/ts/src/app/exponential-strength.pipe.ts b/public/docs/_examples/pipes/ts/src/app/exponential-strength.pipe.ts
new file mode 100644
index 0000000000..0a703d7016
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/src/app/exponential-strength.pipe.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { Pipe, PipeTransform } from '@angular/core';
+/*
+ * Raise the value exponentially
+ * Takes an exponent argument that defaults to 1.
+ * Usage:
+ * value | exponentialStrength:exponent
+ * Example:
+ * {{ 2 | exponentialStrength:10}}
+ * formats to: 1024
+*/
+@Pipe({name: 'exponentialStrength'})
+export class ExponentialStrengthPipe implements PipeTransform {
+ transform(value: number, exponent: string): number {
+ let exp = parseFloat(exponent);
+ return Math.pow(value, isNaN(exp) ? 1 : exp);
+ }
+}
diff --git a/public/docs/_examples/pipes/ts/src/app/fetch-json.pipe.ts b/public/docs/_examples/pipes/ts/src/app/fetch-json.pipe.ts
new file mode 100644
index 0000000000..4d56e865f3
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/src/app/fetch-json.pipe.ts
@@ -0,0 +1,30 @@
+// #docregion
+import { Pipe, PipeTransform } from '@angular/core';
+import { Http } from '@angular/http';
+
+import 'rxjs/add/operator/map';
+
+// #docregion pipe-metadata
+@Pipe({
+ name: 'fetch',
+ pure: false
+})
+// #enddocregion pipe-metadata
+export class FetchJsonPipe implements PipeTransform {
+ private cachedData: any = null;
+ private cachedUrl = '';
+
+ constructor(private http: Http) { }
+
+ transform(url: string): any {
+ if (url !== this.cachedUrl) {
+ this.cachedData = null;
+ this.cachedUrl = url;
+ this.http.get(url)
+ .map( result => result.json() )
+ .subscribe( result => this.cachedData = result );
+ }
+
+ return this.cachedData;
+ }
+}
diff --git a/public/docs/_examples/pipes/ts/src/app/flying-heroes-impure.component.html b/public/docs/_examples/pipes/ts/src/app/flying-heroes-impure.component.html
new file mode 100644
index 0000000000..66bd86f81c
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/src/app/flying-heroes-impure.component.html
@@ -0,0 +1,38 @@
+
+
+{{title}}
+
+
+New hero:
+
+
+ Reset
+
+
+
+Heroes who fly (piped)
+
+
+
+ {{hero.name}}
+
+
+
All Heroes (no pipe)
+
+
+
+
+ {{hero.name}}
+
+
+
+
{{title}}
+
+
+New hero:
+
+
+ Reset
+
+
+
+Heroes who fly (piped)
+
+
+
+ {{hero.name}}
+
+
+
All Heroes (no pipe)
+
+
+
+
+ {{hero.name}}
+
+
+
+
Async Hero Message and AsyncPipe
+ Message: {{ message$ | async }}
+ Resend `,
+})
+export class HeroAsyncMessageComponent {
+ message$: Observable;
+
+ private messages = [
+ 'You are my hero!',
+ 'You are the best hero!',
+ 'Will you be my hero?'
+ ];
+
+ constructor() { this.resend(); }
+
+ resend() {
+ this.message$ = Observable.interval(500)
+ .map(i => this.messages[i])
+ .take(this.messages.length);
+ }
+}
+// #enddocregion
+
+// Alternative message$ formula:
+// this.message$ = Observable.fromArray(this.messages)
+// .map(message => Observable.timer(500).map(() => message))
+// .concatAll();
diff --git a/public/docs/_examples/pipes/ts/src/app/hero-birthday1.component.ts b/public/docs/_examples/pipes/ts/src/app/hero-birthday1.component.ts
new file mode 100644
index 0000000000..a670a807a8
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/src/app/hero-birthday1.component.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'hero-birthday',
+ // #docregion hero-birthday-template
+ template: `The hero's birthday is {{ birthday | date }}
`
+ // #enddocregion hero-birthday-template
+})
+export class HeroBirthdayComponent {
+ birthday = new Date(1988, 3, 15); // April 15, 1988
+}
diff --git a/public/docs/_examples/pipes/ts/src/app/hero-birthday2.component.ts b/public/docs/_examples/pipes/ts/src/app/hero-birthday2.component.ts
new file mode 100644
index 0000000000..87481aa121
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/src/app/hero-birthday2.component.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'hero-birthday2',
+ // #docregion template
+ template: `
+ The hero's birthday is {{ birthday | date:format }}
+ Toggle Format
+ `
+ // #enddocregion template
+})
+// #docregion class
+export class HeroBirthday2Component {
+ birthday = new Date(1988, 3, 15); // April 15, 1988
+ toggle = true; // start with true == shortDate
+
+ get format() { return this.toggle ? 'shortDate' : 'fullDate'; }
+ toggleFormat() { this.toggle = !this.toggle; }
+}
diff --git a/public/docs/_examples/pipes/ts/src/app/hero-list.component.ts b/public/docs/_examples/pipes/ts/src/app/hero-list.component.ts
new file mode 100644
index 0000000000..df231120ce
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/src/app/hero-list.component.ts
@@ -0,0 +1,17 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'hero-list',
+ template: `
+ Heroes from JSON File
+
+
+ {{hero.name}}
+
+
+ Heroes as JSON:
+ {{'heroes.json' | fetch | json}}
+
`
+})
+export class HeroListComponent { }
diff --git a/public/docs/_examples/pipes/ts/src/app/heroes.ts b/public/docs/_examples/pipes/ts/src/app/heroes.ts
new file mode 100644
index 0000000000..b2edabe0da
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/src/app/heroes.ts
@@ -0,0 +1,7 @@
+export interface Flyer { canFly: boolean; }
+export const HEROES = [
+ {name: 'Windstorm', canFly: true},
+ {name: 'Bombasto', canFly: false},
+ {name: 'Magneto', canFly: false},
+ {name: 'Tornado', canFly: true}
+];
diff --git a/public/docs/_examples/pipes/ts/src/app/power-boost-calculator.component.ts b/public/docs/_examples/pipes/ts/src/app/power-boost-calculator.component.ts
new file mode 100644
index 0000000000..e65e29ad4c
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/src/app/power-boost-calculator.component.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'power-boost-calculator',
+ template: `
+ Power Boost Calculator
+ Normal power:
+ Boost factor:
+
+ Super Hero Power: {{power | exponentialStrength: factor}}
+
+ `
+})
+export class PowerBoostCalculatorComponent {
+ power = 5;
+ factor = 1;
+}
diff --git a/public/docs/_examples/pipes/ts/src/app/power-booster.component.ts b/public/docs/_examples/pipes/ts/src/app/power-booster.component.ts
new file mode 100644
index 0000000000..08e3e24c7b
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/src/app/power-booster.component.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'power-booster',
+ template: `
+ Power Booster
+ Super power boost: {{2 | exponentialStrength: 10}}
+ `
+})
+export class PowerBoosterComponent { }
diff --git a/public/docs/_examples/pipes/ts/src/heroes.json b/public/docs/_examples/pipes/ts/src/heroes.json
new file mode 100644
index 0000000000..e5f0b77262
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/src/heroes.json
@@ -0,0 +1,6 @@
+[
+ {"name": "Windstorm", "canFly": true},
+ {"name": "Bombasto", "canFly": false},
+ {"name": "Magneto", "canFly": false},
+ {"name": "Tornado", "canFly": true}
+]
diff --git a/public/docs/_examples/pipes/ts/src/index.html b/public/docs/_examples/pipes/ts/src/index.html
new file mode 100644
index 0000000000..fedb5c2e5e
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/src/index.html
@@ -0,0 +1,26 @@
+
+
+
+ Pipes
+ my-app loading ...
+
+
+
diff --git a/public/docs/_examples/pipes/ts/src/main.ts b/public/docs/_examples/pipes/ts/src/main.ts
new file mode 100644
index 0000000000..6b6532d428
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/src/main.ts
@@ -0,0 +1,5 @@
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/protractor-conf.js b/public/docs/_examples/protractor-conf.js
deleted file mode 100644
index 6a183ce67b..0000000000
--- a/public/docs/_examples/protractor-conf.js
+++ /dev/null
@@ -1,24 +0,0 @@
-exports.config = {
- onPrepare: function() {
- patchProtractorWait(browser);
- },
- seleniumAddress: 'http://localhost:4444/wd/hub',
- baseUrl: 'http://localhost:8080/',
- specs: [
- '**/*e2e-spec.js'
- ]
-};
-
-// Disable waiting for Angular as we don't have an integration layer yet...
-// TODO(tbosch): Implement a proper debugging API for Ng2.0, remove this here
-// and the sleeps in all tests.
-function patchProtractorWait(browser) {
- browser.ignoreSynchronization = true;
- var _get = browser.get;
- var sleepInterval = process.env.TRAVIS || process.env.JENKINS_URL ? 14000 : 8000;
- browser.get = function() {
- var result = _get.apply(this, arguments);
- browser.sleep(sleepInterval);
- return result;
- }
-}
\ No newline at end of file
diff --git a/public/docs/_examples/protractor-helpers.ts b/public/docs/_examples/protractor-helpers.ts
new file mode 100644
index 0000000000..61af74ba30
--- /dev/null
+++ b/public/docs/_examples/protractor-helpers.ts
@@ -0,0 +1,35 @@
+import { browser } from 'protractor';
+
+export var appLang = {
+ appIsTs: false,
+ appIsJs: false,
+ appIsDart: false,
+ appIsUnknown: false
+};
+
+export function describeIf(cond: boolean, name: string, func: () => void): void {
+ if (cond) {
+ describe(name, func);
+ } else {
+ xdescribe(name, func);
+ }
+}
+
+export function itIf(cond: boolean, name: string, func: (done: DoneFn) => void): void {
+ if (cond) {
+ it(name, func);
+ } else {
+ xit(name, func);
+ }
+}
+
+// protractor.config.js is set to ng2 mode by default, so we must manually
+// change it for upgradeAdapter tests
+export function setProtractorToNg1Mode(): void {
+ browser.rootEl = 'body';
+}
+
+export function setProtractorToHybridMode() {
+ setProtractorToNg1Mode();
+ browser.ng12Hybrid = true;
+}
diff --git a/public/docs/_examples/protractor.config.js b/public/docs/_examples/protractor.config.js
new file mode 100644
index 0000000000..92b5e1fda5
--- /dev/null
+++ b/public/docs/_examples/protractor.config.js
@@ -0,0 +1,175 @@
+// FIRST TIME ONLY- run:
+// ./node_modules/.bin/webdriver-manager update
+//
+// Try: `npm run webdriver:update`
+//
+// AND THEN EVERYTIME ...
+// 1. Compile with `tsc`
+// 2. Make sure the test server (e.g., http-server: localhost:8080) is running.
+// 3. ./node_modules/.bin/protractor protractor.config.js
+//
+// To do all steps, try: `npm run e2e`
+
+var fs = require('fs');
+var path = require('canonical-path');
+var _ = require('lodash');
+
+
+exports.config = {
+ directConnect: true,
+
+ // Capabilities to be passed to the webdriver instance.
+ capabilities: {
+ 'browserName': 'chrome'
+ },
+
+ // Framework to use. Jasmine is recommended.
+ framework: 'jasmine',
+
+ // For angular tests
+ useAllAngular2AppRoots: true,
+
+ // Base URL for application server
+ baseUrl: 'http://localhost:8080',
+
+ // doesn't seem to work.
+ // resultJsonOutputFile: "foo.json",
+
+ onPrepare: function() {
+ //// SpecReporter
+ //var SpecReporter = require('jasmine-spec-reporter');
+ //jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: 'none'}));
+ //// jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: 'all'}));
+
+ // debugging
+ // console.log('browser.params:' + JSON.stringify(browser.params));
+ var protractorHelpers = require('./protractor-helpers.ts');
+
+ var appDir = browser.params.appDir;
+ if (appDir) {
+ if (appDir.match('/ts') != null) {
+ protractorHelpers.appLang.appIsTs = true;
+ } else if (appDir.match('/js') != null) {
+ protractorHelpers.appLang.appIsJs = true;
+ } else if (appDir.match('/dart') != null) {
+ protractorHelpers.appLang.appIsDart = true;
+ } else {
+ protractorHelpers.appLang.appIsUnknown = true;
+ }
+ } else {
+ protractorHelpers.appLang.appIsUnknown = true;
+ }
+ jasmine.getEnv().addReporter(new Reporter( browser.params ));
+ },
+
+ jasmineNodeOpts: {
+ // defaultTimeoutInterval: 60000,
+ defaultTimeoutInterval: 10000,
+ showTiming: true,
+ print: function() {}
+ },
+
+ beforeLaunch: function() {
+ // add TS support for specs
+ require('ts-node').register({
+ project: './tsconfig.json'
+ });
+ }
+};
+
+// See http://jasmine.github.io/2.1/custom_reporter.html
+function Reporter(options) {
+ var _defaultOutputFile = path.resolve(process.cwd(), "../../../", 'protractor-results.txt');
+ options.outputFile = options.outputFile || _defaultOutputFile;
+
+ var _root = { appDir: options.appDir, suites: [] };
+ log('AppDir: ' + options.appDir, +1);
+ var _currentSuite;
+
+ this.suiteStarted = function(suite) {
+ _currentSuite = { description: suite.description, status: null, specs: [] };
+ _root.suites.push(_currentSuite);
+ log('Suite: ' + suite.description, +1);
+ };
+
+ this.suiteDone = function(suite) {
+ var statuses = _currentSuite.specs.map(function(spec) {
+ return spec.status;
+ });
+ statuses = _.uniq(statuses);
+ var status = statuses.indexOf('failed') >= 0 ? 'failed' : statuses.join(', ');
+ _currentSuite.status = status;
+ log('Suite ' + _currentSuite.status + ': ' + suite.description, -1);
+ };
+
+ this.specStarted = function(spec) {
+
+ };
+
+ this.specDone = function(spec) {
+ var currentSpec = {
+ description: spec.description,
+ status: spec.status
+ };
+ if (spec.failedExpectations.length > 0) {
+ currentSpec.failedExpectations = spec.failedExpectations;
+ }
+
+ _currentSuite.specs.push(currentSpec);
+ log(spec.status + ' - ' + spec.description);
+ if (spec.status === 'failed') {
+ spec.failedExpectations.forEach(function(err) {
+ log(err.message);
+ });
+ }
+ };
+
+ this.jasmineDone = function() {
+ outputFile = options.outputFile;
+ //// Alternate approach - just stringify the _root - not as pretty
+ //// but might be more useful for automation.
+ // var output = JSON.stringify(_root, null, 2);
+ var output = formatOutput(_root);
+ fs.appendFileSync(outputFile, output);
+ };
+
+ // for output file output
+ function formatOutput(output) {
+ var indent = ' ';
+ var pad = ' ';
+ var results = [];
+ results.push('AppDir:' + output.appDir);
+ output.suites.forEach(function(suite) {
+ results.push(pad + 'Suite: ' + suite.description + ' -- ' + suite.status);
+ pad+=indent;
+ suite.specs.forEach(function(spec) {
+ results.push(pad + spec.status + ' - ' + spec.description);
+ if (spec.failedExpectations) {
+ pad+=indent;
+ spec.failedExpectations.forEach(function (fe) {
+ results.push(pad + 'message: ' + fe.message);
+ });
+ pad=pad.substr(2);
+ }
+ });
+ pad = pad.substr(2);
+ results.push('');
+ });
+ results.push('');
+ return results.join('\n');
+ }
+
+ // for console output
+ var _pad;
+ function log(str, indent) {
+ _pad = _pad || '';
+ if (indent == -1) {
+ _pad = _pad.substr(2);
+ }
+ console.log(_pad + str);
+ if (indent == 1) {
+ _pad = _pad + ' ';
+ }
+ }
+
+}
diff --git a/public/docs/_examples/quickstart/.gitignore b/public/docs/_examples/quickstart/.gitignore
deleted file mode 100644
index 6724ce3596..0000000000
--- a/public/docs/_examples/quickstart/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-src/**/*.js
\ No newline at end of file
diff --git a/public/docs/_examples/quickstart/e2e-spec.js b/public/docs/_examples/quickstart/e2e-spec.js
deleted file mode 100644
index a866771ab6..0000000000
--- a/public/docs/_examples/quickstart/e2e-spec.js
+++ /dev/null
@@ -1,12 +0,0 @@
-describe('Protractor quick start test', function() {
- beforeEach(function() {
- browser.get('quickstart/index.html');
- });
-
- // #docregion test
- it('should display Alice', function() {
- expect(element(by.id('output')).getText()).toEqual('Hello Alice');
- });
- // #enddocregion
-});
-
diff --git a/public/docs/_examples/quickstart/e2e-spec.ts b/public/docs/_examples/quickstart/e2e-spec.ts
new file mode 100644
index 0000000000..73921707ee
--- /dev/null
+++ b/public/docs/_examples/quickstart/e2e-spec.ts
@@ -0,0 +1,17 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('QuickStart E2E Tests', function () {
+
+ let expectedMsg = 'Hello Angular';
+
+ beforeEach(function () {
+ browser.get('');
+ });
+
+ it(`should display: ${expectedMsg}`, function () {
+ expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
+ });
+
+});
diff --git a/public/docs/_examples/quickstart/index.html b/public/docs/_examples/quickstart/index.html
deleted file mode 100644
index 101590e856..0000000000
--- a/public/docs/_examples/quickstart/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
- Angular 2 Quickstart
-
-
-
-
-
-
-
- Hello Angular '
+ // #docregion ng-namespace-funcs
+ })
+ // #enddocregion component
+ // #docregion class
+ .Class({
+ // #enddocregion ng-namespace-funcs
+ constructor: function() {}
+ // #docregion ng-namespace-funcs
+ });
+ // #enddocregion class
+ // #enddocregion ng-namespace-funcs
+// #docregion iife
+})(window.app || (window.app = {}));
+// #enddocregion iife
diff --git a/public/docs/_examples/quickstart/js/src/app/app.module.js b/public/docs/_examples/quickstart/js/src/app/app.module.js
new file mode 100644
index 0000000000..0f3d5f82cf
--- /dev/null
+++ b/public/docs/_examples/quickstart/js/src/app/app.module.js
@@ -0,0 +1,15 @@
+// #docplaster
+// #docregion
+(function(app) {
+ app.AppModule =
+ ng.core.NgModule({
+ imports: [ ng.platformBrowser.BrowserModule ],
+ // #docregion import
+ declarations: [ app.AppComponent ],
+ // #enddocregion import
+ bootstrap: [ app.AppComponent ]
+ })
+ .Class({
+ constructor: function() {}
+ });
+})(window.app || (window.app = {}));
diff --git a/public/docs/_examples/quickstart/js/src/index.html b/public/docs/_examples/quickstart/js/src/index.html
new file mode 100644
index 0000000000..43d63e9c83
--- /dev/null
+++ b/public/docs/_examples/quickstart/js/src/index.html
@@ -0,0 +1,42 @@
+
+
+
+
+ Angular QuickStart JS
+ Loading...
+
+
+
+
diff --git a/public/docs/_examples/quickstart/js/src/main.js b/public/docs/_examples/quickstart/js/src/main.js
new file mode 100644
index 0000000000..785823fa84
--- /dev/null
+++ b/public/docs/_examples/quickstart/js/src/main.js
@@ -0,0 +1,8 @@
+// #docregion
+(function(app) {
+ document.addEventListener('DOMContentLoaded', function() {
+ ng.platformBrowserDynamic
+ .platformBrowserDynamic()
+ .bootstrapModule(app.AppModule);
+ });
+})(window.app || (window.app = {}));
diff --git a/public/docs/_examples/quickstart/js/src/styles.1.css b/public/docs/_examples/quickstart/js/src/styles.1.css
new file mode 100644
index 0000000000..fbc30e2c9e
--- /dev/null
+++ b/public/docs/_examples/quickstart/js/src/styles.1.css
@@ -0,0 +1,14 @@
+/* #docregion */
+h1 {
+ color: #369;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 250%;
+}
+body {
+ margin: 2em;
+}
+
+ /*
+ * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
+ * for the full set of master styles used by the documentation samples
+ */
diff --git a/public/docs/_examples/quickstart/package.json b/public/docs/_examples/quickstart/package.json
deleted file mode 100644
index 0c03fdd6a2..0000000000
--- a/public/docs/_examples/quickstart/package.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
- "name": "ng2-quickstart",
- "version": "0.0.1",
- "license": "ICS",
- "repository": {},
- "dependencies": {
- "angular2": "2.0.0-alpha.35",
- "es6-module-loader": "^0.16",
- "systemjs": "^0.16",
- "traceur": "0.0.91"
- },
- "devDependencies": {
- "jasmine-core": "^2.3.4",
- "zone.js": "^0.5.3"
- },
- "scripts": {
- "postinstall": "cd src && tsd reinstall -r -o && cd ..",
- "tsc": "tsc -p src -w",
- "start": "live-server"
- }
-}
\ No newline at end of file
diff --git a/public/docs/_examples/quickstart/src/app.spec.ts b/public/docs/_examples/quickstart/src/app.spec.ts
deleted file mode 100644
index b70b3b2a93..0000000000
--- a/public/docs/_examples/quickstart/src/app.spec.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-///// Boiler Plate ////
-import {bind} from 'angular2/angular2';
-
-import {
- beforeEachBindings, DebugElement, RootTestComponent as RTC,
- // Jasmine overrides
- beforeEach, ddescribe, xdescribe, describe, iit, it, xit, //expect,
- AsyncTestCompleter, inject, RootTestComponent, TestComponentBuilder,
-} from 'angular2/test';
-
-//// Testing this component ////
-import {AppComponent} from './app';
-
-describe('AppComponent', () => {
-
- describe('(no DOM)', () => {
-
- it('component has name == "Alice"', () => {
- let app = new AppComponent;
- expect(app.name).toEqual('Alice');
- });
- });
-
- describe('(in DOM)', () => {
-
- it('component has name == "Alice"', injectTcb((tcb, done) => {
- tcb
- .createAsync(AppComponent)
- .then((rootTC:RTC) => {
- let ac:AppComponent = rootTC.componentInstance;
- expect(ac.name).toEqual('Alice');
- })
- .catch(fail).then(done,done);
- }));
-
- it('DOM has name == "Alice"', injectTcb((tcb, done) => {
- tcb
- .createAsync(AppComponent)
- .then((rootTC:RTC) => {
- rootTC.detectChanges();
- let domName = rootTC.componentViewChildren[0].nativeElement.innerHTML;
- expect(domName).toMatch('Alice');
- })
- .catch(fail).then(done,done);
- }));
- //rootTC.nativeElement.getElementsByTagName('h1')[0].innerHTML
- it('DOM has name == "Alice" (2)', injectTcb((tcb, done) => {
- tcb
- .createAsync(AppComponent)
- .then((rootTC:RTC) => {
- rootTC.detectChanges();
- let domName = rootTC.nativeElement
- // jQuery goes here
- .getElementsByTagName('h1')[0].innerHTML;
- expect(domName).toMatch('Alice');
- })
- .catch(fail).then(done,done);
- }));
- });
-});
-
-///////// test.helpers.ts: here for now ////////
-
-function injectTcb(testFn: (tcb: TestComponentBuilder, done: ()=>void) => void) {
- return inject([TestComponentBuilder, AsyncTestCompleter], function injectWrapper(tcb: TestComponentBuilder, async: AsyncTestCompleter) {
- testFn(tcb, async.done.bind(async));
- });
-}
\ No newline at end of file
diff --git a/public/docs/_examples/quickstart/src/app.ts b/public/docs/_examples/quickstart/src/app.ts
deleted file mode 100644
index 6a4ce7871f..0000000000
--- a/public/docs/_examples/quickstart/src/app.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docregion
-// #docregion import
-import {Component, View, bootstrap} from 'angular2/angular2';
-// #enddocregion
-
-@Component({
- selector: 'app'
-})
-@View({
- template: 'Hello {{ name }} '
-})
-export class AppComponent {
- name : string;
-
- constructor() {
- this.name = 'Alice';
- }
-}
-
-// #docregion bootstrap
-bootstrap(AppComponent);
-// #enddocregion
diff --git a/public/docs/_examples/quickstart/src/dummy.spec.ts b/public/docs/_examples/quickstart/src/dummy.spec.ts
deleted file mode 100644
index 83f3eaea94..0000000000
--- a/public/docs/_examples/quickstart/src/dummy.spec.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-describe("Jasmine sample test", function() {
-
- it("1+1 should be 2", function() {
-
- var result = 1 + 1;
-
- expect(result).toBe(2);
- });
-});
\ No newline at end of file
diff --git a/public/docs/_examples/quickstart/src/tsconfig.json b/public/docs/_examples/quickstart/src/tsconfig.json
deleted file mode 100644
index 24f8573a6f..0000000000
--- a/public/docs/_examples/quickstart/src/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "compilerOptions": {
- "target": "ES5",
- "module": "commonjs",
- "sourceMap": true,
- "emitDecoratorMetadata": true,
- "experimentalDecorators": true
- }
-}
\ No newline at end of file
diff --git a/public/docs/_examples/quickstart/src/tsd.json b/public/docs/_examples/quickstart/src/tsd.json
deleted file mode 100644
index 0bed83f7e6..0000000000
--- a/public/docs/_examples/quickstart/src/tsd.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "version": "v4",
- "repo": "borisyankov/DefinitelyTyped",
- "ref": "master",
- "path": "typings",
- "bundle": "typings/tsd.d.ts",
- "installed": {
- "angular2/angular2.d.ts": {
- "commit": "cd2e71bb1f0459197e733be66fdeafaec600514d"
- },
- "es6-promise/es6-promise.d.ts": {
- "commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
- },
- "jasmine/jasmine.d.ts": {
- "commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
- },
- "rx/rx.d.ts": {
- "commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
- },
- "rx/rx-lite.d.ts": {
- "commit": "71d072b7354936b88d57c2029042d2da7c6ec0e7"
- }
- }
-}
diff --git a/public/docs/_examples/quickstart/ts/bs-config.1.json b/public/docs/_examples/quickstart/ts/bs-config.1.json
new file mode 100644
index 0000000000..4e58595267
--- /dev/null
+++ b/public/docs/_examples/quickstart/ts/bs-config.1.json
@@ -0,0 +1,8 @@
+{
+ "server": {
+ "baseDir": "src",
+ "routes": {
+ "/node_modules": "node_modules"
+ }
+ }
+}
diff --git a/public/docs/_examples/quickstart/ts/example-config.json b/public/docs/_examples/quickstart/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/quickstart/ts/plnkr.json b/public/docs/_examples/quickstart/ts/plnkr.json
new file mode 100644
index 0000000000..8edf7c25ea
--- /dev/null
+++ b/public/docs/_examples/quickstart/ts/plnkr.json
@@ -0,0 +1,12 @@
+{
+ "description": "QuickStart",
+ "basePath": "src/",
+ "files": [
+ "app/app.component.ts",
+ "app/app.module.ts",
+ "main.ts",
+ "index.html"
+ ],
+ "open": "app/app.component.ts",
+ "tags": ["quickstart"]
+}
diff --git a/public/docs/_examples/quickstart/ts/src/app/app.component.ts b/public/docs/_examples/quickstart/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..1ef28fc5c4
--- /dev/null
+++ b/public/docs/_examples/quickstart/ts/src/app/app.component.ts
@@ -0,0 +1,8 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ template: `Hello {{name}} `
+})
+export class AppComponent { name = 'Angular'; }
diff --git a/public/docs/_examples/quickstart/ts/src/app/app.module.ts b/public/docs/_examples/quickstart/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..50a0e6eb47
--- /dev/null
+++ b/public/docs/_examples/quickstart/ts/src/app/app.module.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [ AppComponent ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/quickstart/ts/src/index.html b/public/docs/_examples/quickstart/ts/src/index.html
new file mode 100644
index 0000000000..21fb56edb9
--- /dev/null
+++ b/public/docs/_examples/quickstart/ts/src/index.html
@@ -0,0 +1,31 @@
+
+
+
+ Angular Quickstart
+ Loading AppComponent content here ...
+
+
+
+
diff --git a/public/docs/_examples/quickstart/ts/src/main.ts b/public/docs/_examples/quickstart/ts/src/main.ts
new file mode 100644
index 0000000000..311c44b76d
--- /dev/null
+++ b/public/docs/_examples/quickstart/ts/src/main.ts
@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/quickstart/ts/src/tsconfig.1.json b/public/docs/_examples/quickstart/ts/src/tsconfig.1.json
new file mode 100644
index 0000000000..2c7260d1bc
--- /dev/null
+++ b/public/docs/_examples/quickstart/ts/src/tsconfig.1.json
@@ -0,0 +1,13 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "module": "commonjs",
+ "moduleResolution": "node",
+ "sourceMap": true,
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "lib": [ "es2015", "dom" ],
+ "noImplicitAny": true,
+ "suppressImplicitAnyIndexErrors": true
+ }
+}
diff --git a/public/docs/_examples/quickstart/unit-tests.html b/public/docs/_examples/quickstart/unit-tests.html
deleted file mode 100644
index d892e4b817..0000000000
--- a/public/docs/_examples/quickstart/unit-tests.html
+++ /dev/null
@@ -1,55 +0,0 @@
-
-
-
-QuickStart Tests
-