;
+
+ 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/upgrade/ts/ng2_initial/app/img/.gitkeep b/public/docs/_examples/cli-quickstart/ts/src/assets/.gitkeep
similarity index 100%
rename from public/docs/_examples/upgrade/ts/ng2_initial/app/img/.gitkeep
rename to public/docs/_examples/cli-quickstart/ts/src/assets/.gitkeep
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/upgrade/ts/typescript-conversion/app/img/.gitkeep b/public/docs/_examples/dependency-injection/ts/example-config.json
similarity index 100%
rename from public/docs/_examples/upgrade/ts/typescript-conversion/app/img/.gitkeep
rename to public/docs/_examples/dependency-injection/ts/example-config.json
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/dart/lib/app_component.dart b/public/docs/_examples/displaying-data/dart/lib/app_component.dart
deleted file mode 100644
index 82f84d163e..0000000000
--- a/public/docs/_examples/displaying-data/dart/lib/app_component.dart
+++ /dev/null
@@ -1,43 +0,0 @@
-// #docplaster
-// #docregion final
-library displaying_data.app_component;
-
-// #docregion imports
-import 'package:angular2/angular2.dart';
-// #enddocregion imports
-import 'package:displaying_data/hero.dart';
-
-final List _heroes = [
- new Hero(1, 'Windstorm'),
- new Hero(13, 'Bombasto'),
- new Hero(15, 'Magneta'),
- new Hero(20, 'Tornado')
-];
-
-@Component(
- selector: 'my-app',
- template: '''
-{{title}}
-My favorite hero is: {{myHero.name}}
-Heroes:
-
-
-There are many heroes!
-
-''')
-class AppComponent {
- String title = 'Tour of Heroes';
- List heroes = _heroes;
- Hero myHero = _heroes[0];
-}
-//#enddocregion final
-/*
-// #docregion final
-
-bootstrap(AppComponent);
-//#enddocregion final
-*/
diff --git a/public/docs/_examples/displaying-data/dart/lib/app_component_1.dart b/public/docs/_examples/displaying-data/dart/lib/app_component_1.dart
deleted file mode 100644
index 3643da7564..0000000000
--- a/public/docs/_examples/displaying-data/dart/lib/app_component_1.dart
+++ /dev/null
@@ -1,17 +0,0 @@
-// #docregion
-library displaying_data.app_component_1;
-
-import 'package:angular2/angular2.dart';
-
-@Component(
- selector: 'my-app',
-// #docregion template
- template: '''
-{{title}}
-My favorite hero is: {{myHero}} '''
-// #enddocregion template
- )
-class AppComponent {
- String title = 'Tour of Heroes';
- String myHero = 'Windstorm';
-}
diff --git a/public/docs/_examples/displaying-data/dart/lib/app_component_2.dart b/public/docs/_examples/displaying-data/dart/lib/app_component_2.dart
deleted file mode 100644
index 5c3b3bc633..0000000000
--- a/public/docs/_examples/displaying-data/dart/lib/app_component_2.dart
+++ /dev/null
@@ -1,39 +0,0 @@
-// #docregion
-library displaying_data.app_component_2;
-
-// #docregion imports
-import 'package:angular2/angular2.dart';
-
-// #enddocregion imports
-
-@Component(
- selector: 'my-app',
-// #docregion template
- template: '''
-{{title}}
-My favorite hero is: {{myHero}}
-Heroes:
-'''
-// #enddocregion template
- )
-// #docregion mock-heroes
-const List _heroes = const [
- 'Windstorm',
- 'Bombasto',
- 'Magneta',
- 'Tornado'
-];
-
-class AppComponent {
- String title = 'Tour of Heroes';
- List heroes = _heroes;
- String myHero = _heroes[0];
-}
-// #enddocregion mock-heroes
-// #enddocregion
diff --git a/public/docs/_examples/displaying-data/dart/lib/app_component_3.dart b/public/docs/_examples/displaying-data/dart/lib/app_component_3.dart
deleted file mode 100644
index c8c31fce60..0000000000
--- a/public/docs/_examples/displaying-data/dart/lib/app_component_3.dart
+++ /dev/null
@@ -1,42 +0,0 @@
-// #docregion
-library displaying_data.app_component_3;
-
-// #docregion imports
-import 'package:angular2/angular2.dart';
-// #enddocregion imports
-// #docregion import-hero
-import 'package:displaying_data/hero.dart';
-
-// #enddocregion import-hero
-
-@Component(
- selector: 'my-app',
-// #docregion template
- template: '''
-{{title}}
-My favorite hero is: {{myHero.name}}
-Heroes:
-'''
-// #enddocregion template
- )
-// #docregion heroes
-final List _heroes = [
- new Hero(1, 'Windstorm'),
- new Hero(13, 'Bombasto'),
- new Hero(15, 'Magneta'),
- new Hero(20, 'Tornado')
-];
-
-// #enddocregion heroes
-// #docregion class
-class AppComponent {
- String title = 'Tour of Heroes';
- List heroes = _heroes;
- Hero myHero = _heroes[0];
-}
-// #enddocregion class
-// #enddocregion
diff --git a/public/docs/_examples/displaying-data/dart/lib/app_ctor_component.dart b/public/docs/_examples/displaying-data/dart/lib/app_ctor_component.dart
deleted file mode 100644
index b1d0ba336d..0000000000
--- a/public/docs/_examples/displaying-data/dart/lib/app_ctor_component.dart
+++ /dev/null
@@ -1,21 +0,0 @@
-// #docregion
-library displaying_data.app_ctor_component;
-
-import 'package:angular2/angular2.dart';
-
-@Component(
- selector: 'my-app-ctor',
- template: '''
-{{title}} [Ctor version]
-My favorite hero is: {{myHero}} ''')
-// #docregion app-ctor
-class AppCtorComponent {
- String title;
- String myHero;
-
- AppCtorComponent() {
- this.title = 'Tour of Heroes';
- this.myHero = 'Windstorm';
- }
-}
-// #enddocregion app-ctor
diff --git a/public/docs/_examples/displaying-data/dart/lib/hero.dart b/public/docs/_examples/displaying-data/dart/lib/hero.dart
deleted file mode 100644
index 3fb139db73..0000000000
--- a/public/docs/_examples/displaying-data/dart/lib/hero.dart
+++ /dev/null
@@ -1,12 +0,0 @@
-// #docregion
-library displaying_data.hero;
-
-class Hero {
- // #docregion id-parameter
- int number;
- // #enddocregion id-parameter
- String name;
-
- Hero(this.number, this.name);
-}
-// #enddocregion
diff --git a/public/docs/_examples/displaying-data/dart/pubspec.yaml b/public/docs/_examples/displaying-data/dart/pubspec.yaml
deleted file mode 100644
index b79474da42..0000000000
--- a/public/docs/_examples/displaying-data/dart/pubspec.yaml
+++ /dev/null
@@ -1,11 +0,0 @@
-name: displaying_data
-description: Displaying Data Example
-version: 0.0.1
-dependencies:
- angular2: 2.0.0-beta.0
- browser: ^0.10.0
-transformers:
-- angular2:
- platform_directives: 'package:angular2/src/common/directives.dart#CORE_DIRECTIVES'
- entry_points: web/main.dart
-
diff --git a/public/docs/_examples/displaying-data/dart/web/index.html b/public/docs/_examples/displaying-data/dart/web/index.html
deleted file mode 100644
index 6efa48834c..0000000000
--- a/public/docs/_examples/displaying-data/dart/web/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
- Displaying Data
-
-
-
-
-
- {{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/app/app.component.2.ts b/public/docs/_examples/displaying-data/ts/app/app.component.2.ts
deleted file mode 100644
index ed30ee0ebc..0000000000
--- a/public/docs/_examples/displaying-data/ts/app/app.component.2.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-// #docregion
-import {Component} from 'angular2/core';
-
-@Component({
- selector: 'my-app',
- // #docregion template
- template: `
- {{title}}
- My favorite hero is: {{myHero}}
- Heroes:
-
- // #docregion li-repeater
-
- {{ hero }}
-
- // #enddocregion li-repeater
-
- `
- // #enddocregion template
-})
-// #docregion mock-heroes
-export class AppComponent {
- title = 'Tour of Heroes';
- heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
- myHero = this.heroes[0];
-}
-// #enddocregion mock-heroes
-// #enddocregion
diff --git a/public/docs/_examples/displaying-data/ts/app/app.component.3.ts b/public/docs/_examples/displaying-data/ts/app/app.component.3.ts
deleted file mode 100644
index 79edbfdfae..0000000000
--- a/public/docs/_examples/displaying-data/ts/app/app.component.3.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-// #docregion
-import {Component} from 'angular2/core';
-// #docregion import-hero
-import {Hero} from './hero';
-// #enddocregion import-hero
-
-@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
-}
-// #enddocregion class
-// #enddocregion
diff --git a/public/docs/_examples/displaying-data/ts/app/app.component.ts b/public/docs/_examples/displaying-data/ts/app/app.component.ts
deleted file mode 100644
index a85a09081e..0000000000
--- a/public/docs/_examples/displaying-data/ts/app/app.component.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-// #docplaster
-// #docregion final
-// #docregion imports
-import {Component} from 'angular2/core';
-// #enddocregion imports
-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/app/boot.1.ts b/public/docs/_examples/displaying-data/ts/app/boot.1.ts
deleted file mode 100644
index 511180507b..0000000000
--- a/public/docs/_examples/displaying-data/ts/app/boot.1.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import {bootstrap} from 'angular2/platform/browser';
-import {AppCtorComponent} from './app-ctor.component';
-import {AppComponent as v1} from './app.component.1';
-import {AppComponent as v2} from './app.component.2';
-import {AppComponent as v3} from './app.component.3';
-
-import {AppComponent as final} from './app.component';
-
-// pick one
-//bootstrap(v1);
-//bootstrap(v2);
-//bootstrap(v3);
-bootstrap(final);
-
-// for doc testing
-bootstrap(AppCtorComponent);
\ No newline at end of file
diff --git a/public/docs/_examples/displaying-data/ts/app/boot.ts b/public/docs/_examples/displaying-data/ts/app/boot.ts
deleted file mode 100644
index ec4c9d12d6..0000000000
--- a/public/docs/_examples/displaying-data/ts/app/boot.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// #docregion
-import {bootstrap} from 'angular2/platform/browser';
-import {AppComponent} from './app.component';
-
-bootstrap(AppComponent);
diff --git a/public/docs/_examples/displaying-data/ts/app/hero.ts b/public/docs/_examples/displaying-data/ts/app/hero.ts
deleted file mode 100644
index 8b4f06b658..0000000000
--- a/public/docs/_examples/displaying-data/ts/app/hero.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-export class Hero {
- constructor(
- // #docregion id-parameter
- public id:number,
- // #enddocregion id-parameter
- public name:string) { }
-}
-// #enddocregion
\ No newline at end of file
diff --git a/public/docs/_examples/displaying-data/ts/index.1.html b/public/docs/_examples/displaying-data/ts/index.1.html
deleted file mode 100644
index 4db780010b..0000000000
--- a/public/docs/_examples/displaying-data/ts/index.1.html
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
- Displaying Data
-
-
-
-
-
-
-
-
-
-
-
-
- loading...
- loading...
-
-
-
diff --git a/public/docs/_examples/displaying-data/ts/index.html b/public/docs/_examples/displaying-data/ts/index.html
deleted file mode 100644
index 5cad659faa..0000000000
--- a/public/docs/_examples/displaying-data/ts/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
- Displaying Data
-
-
-
-
-
-
-
-
-
-
-
-
-
- loading...
-
-
-
-
diff --git a/public/docs/_examples/displaying-data/ts/plnkr.json b/public/docs/_examples/displaying-data/ts/plnkr.json
index ee037aec0b..b4572f0fb6 100644
--- a/public/docs/_examples/displaying-data/ts/plnkr.json
+++ b/public/docs/_examples/displaying-data/ts/plnkr.json
@@ -1,5 +1,6 @@
{
"description": "Displaying Data",
+ "basePath": "src/",
"files": [
"!**/*.d.ts",
"!**/*.js",
@@ -7,4 +8,4 @@
"!**/*.[1,2,3].*"
],
"tags": ["Template"]
-}
\ No newline at end of file
+}
diff --git a/public/docs/_examples/displaying-data/ts/app/app-ctor.component.ts b/public/docs/_examples/displaying-data/ts/src/app/app-ctor.component.ts
similarity index 77%
rename from public/docs/_examples/displaying-data/ts/app/app-ctor.component.ts
rename to public/docs/_examples/displaying-data/ts/src/app/app-ctor.component.ts
index 3b17bcb6e8..b275baa8e6 100644
--- a/public/docs/_examples/displaying-data/ts/app/app-ctor.component.ts
+++ b/public/docs/_examples/displaying-data/ts/src/app/app-ctor.component.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/core';
+import { Component } from '@angular/core';
@Component({
selector: 'my-app-ctor',
@@ -7,7 +7,7 @@ import {Component} from 'angular2/core';
My favorite hero is: {{myHero}}
`
})
-// #docregion app-ctor
+// #docregion class
export class AppCtorComponent {
title: string;
myHero: string;
@@ -17,4 +17,3 @@ export class AppCtorComponent {
this.myHero = 'Windstorm';
}
}
-// #enddocregion app-ctor
\ No newline at end of file
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/dart/lib/hero.dart b/public/docs/_examples/forms/dart/lib/hero.dart
deleted file mode 100644
index 0444b2a9de..0000000000
--- a/public/docs/_examples/forms/dart/lib/hero.dart
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docregion all
-library hero_form.hero;
-
-class Hero {
- int number;
- String name;
- String power;
- String alterEgo;
-
- Hero(this.number, this.name, this.power, [this.alterEgo]);
-
- String toString() => '$number: $name ($alterEgo). Super power: $power';
-}
-// #enddocregion all
-
-main() {
- // #docregion newhero
- var myHero = new Hero(
- 42, 'SkyDog', 'Fetch any object at any distance', 'Leslie Rollover');
- print('My hero is ${myHero.name}.'); // "My hero is SkyDog."
- // #enddocregion newhero
-}
diff --git a/public/docs/_examples/forms/dart/lib/hero_form_component.dart b/public/docs/_examples/forms/dart/lib/hero_form_component.dart
deleted file mode 100644
index 73b5e4aab1..0000000000
--- a/public/docs/_examples/forms/dart/lib/hero_form_component.dart
+++ /dev/null
@@ -1,35 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion no-todo
-library hero_form.hero_form_component;
-
-import 'package:angular2/angular2.dart';
-import 'package:hero_form/hero.dart';
-
-const List _powers = const [
- 'Really Smart',
- 'Super Flexible',
- 'Super Hot',
- 'Weather Changer'
-];
-
-@Component(
- selector: 'hero-form',
- templateUrl: 'hero_form_component.html')
-class HeroFormComponent {
- List get powers => _powers;
-// #docregion submitted
- bool submitted = false;
-// #enddocregion submitted
- Hero model = new Hero(18, 'Dr IQ', _powers[0], 'Chuck Overstreet');
-// #enddocregion no-todo
- // TODO: Remove this when we're done
- String get diagnostic => 'DIAGNOSTIC: $model';
-// #docregion no-todo
-
-// #docregion submitted
- onSubmit() {
- submitted = true;
- }
-// #enddocregion submitted
-}
diff --git a/public/docs/_examples/forms/dart/lib/hero_form_component.html b/public/docs/_examples/forms/dart/lib/hero_form_component.html
deleted file mode 100644
index 22097f5e33..0000000000
--- a/public/docs/_examples/forms/dart/lib/hero_form_component.html
+++ /dev/null
@@ -1,67 +0,0 @@
-
-
-
-
-
-
-
-
-
-
You submitted the following:
-
-
Name
-
{{ model.name }}
-
-
-
Alter Ego
-
{{ model.alterEgo }}
-
-
-
Power
-
{{ model.power }}
-
-
-
Edit
-
-
-
Hero Form
-
-
-
- Loading...
-
-
diff --git a/public/docs/_examples/forms/dart/web/main.dart b/public/docs/_examples/forms/dart/web/main.dart
deleted file mode 100644
index 24a30874e3..0000000000
--- a/public/docs/_examples/forms/dart/web/main.dart
+++ /dev/null
@@ -1,7 +0,0 @@
-// #docregion
-import 'package:angular2/bootstrap.dart';
-import 'package:hero_form/hero_form_component.dart';
-
-main() {
- bootstrap(HeroFormComponent);
-}
diff --git a/public/docs/_examples/forms/dart/web/styles.css b/public/docs/_examples/forms/dart/web/styles.css
deleted file mode 100644
index 095bd1d44a..0000000000
--- a/public/docs/_examples/forms/dart/web/styles.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/* #docregion */
-.ng-valid[required] {
- border-left: 5px solid #42A948; /* green */
-}
-.ng-invalid, .ng-invalid:focus {
- border-left: 5px solid #a94442; /* red */
-}
diff --git a/public/docs/_examples/forms/e2e-spec.js b/public/docs/_examples/forms/e2e-spec.js
deleted file mode 100644
index e7714cb2c4..0000000000
--- a/public/docs/_examples/forms/e2e-spec.js
+++ /dev/null
@@ -1,62 +0,0 @@
-describeIf(browser.appIsTs, '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 () {
- var ele = element(by.css('h2'));
- expect(ele.isDisplayed()).toBe(false);
- });
-
- it('should hide form after submit', function () {
- var ele = element.all(by.css('h1')).get(0);
- expect(ele.isDisplayed()).toBe(true);
- var 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 () {
- var 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 () {
- var alterEgoEle = element.all(by.css('input[ngcontrol=alterEgo]')).get(0);
- expect(alterEgoEle.isDisplayed()).toBe(true);
- var 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 () {
- var test = 'testing 1 2 3';
- var newValue;
- var alterEgoEle = element.all(by.css('input[ngcontrol=alterEgo]')).get(0);
- alterEgoEle.getAttribute('value').then(function(value) {
- // alterEgoEle.sendKeys(test);
- sendKeys(alterEgoEle, test);
- newValue = value + test;
- expect(alterEgoEle.getAttribute('value')).toEqual(newValue);
- }).then(function() {
- var b = element.all(by.css('button[type=submit]')).get(0);
- return b.click();
- }).then(function() {
- var alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego'));
- expect(alterEgoTextEle.isPresent()).toBe(true, 'cannot locate "Alter Ego" label');
- var 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/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/.gitignore b/public/docs/_examples/forms/js/.gitignore
deleted file mode 100644
index 8b13789179..0000000000
--- a/public/docs/_examples/forms/js/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/public/docs/_examples/forms/js/app/app.component.js b/public/docs/_examples/forms/js/app/app.component.js
deleted file mode 100644
index bb6b789938..0000000000
--- a/public/docs/_examples/forms/js/app/app.component.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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/plnkr.json b/public/docs/_examples/forms/js/plnkr.json
index 5617d94f9a..946cbb88f6 100644
--- a/public/docs/_examples/forms/js/plnkr.json
+++ b/public/docs/_examples/forms/js/plnkr.json
@@ -1,4 +1,5 @@
{
"description": "Forms",
- "files": ["**/*.js"]
+ "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/.gitignore b/public/docs/_examples/forms/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/forms/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/forms/ts/app/app.component.ts b/public/docs/_examples/forms/ts/app/app.component.ts
deleted file mode 100644
index 92f4ec5edd..0000000000
--- a/public/docs/_examples/forms/ts/app/app.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import {Component} from 'angular2/core';
-import {HeroFormComponent} from './hero-form.component'
-
-@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...
-
-
-
\ No newline at end of file
diff --git a/public/docs/_examples/forms/ts/plnkr.json b/public/docs/_examples/forms/ts/plnkr.json
index 60063d7d2c..3f0abbfc3d 100644
--- a/public/docs/_examples/forms/ts/plnkr.json
+++ b/public/docs/_examples/forms/ts/plnkr.json
@@ -1,7 +1,8 @@
{
"description": "Forms",
+ "basePath": "src/",
"files":[
- "!**/*.d.ts",
+ "!**/*.d.ts",
"!**/*.js"
]
-}
\ No newline at end of file
+}
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/forms/ts/styles.css b/public/docs/_examples/forms/ts/styles.css
deleted file mode 100644
index d7e11405b1..0000000000
--- a/public/docs/_examples/forms/ts/styles.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/* #docregion */
-.ng-valid[required] {
- border-left: 5px solid #42A948; /* green */
-}
-
-.ng-invalid {
- border-left: 5px solid #a94442; /* red */
-}
-/* #enddocregion */
\ No newline at end of file
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/edit_item.dart b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/edit_item.dart
deleted file mode 100644
index c5de35a9ed..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/edit_item.dart
+++ /dev/null
@@ -1,7 +0,0 @@
-// #docregion
-class EditItem {
- bool editing = false;
- T item;
- EditItem(this.item);
-}
-// #enddocregion
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero.dart b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero.dart
deleted file mode 100644
index 3a9ec96783..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero.dart
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import 'package:angular2/angular2.dart';
-
-class Hero {
- String name;
- String power;
-
- Hero clone() {
- return new Hero()
- ..name = name
- ..power = power;
- }
-}
-// #enddocregion
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero_card_component.dart b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero_card_component.dart
deleted file mode 100644
index 1506813bbc..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero_card_component.dart
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docregion
-import 'package:angular2/angular2.dart';
-import 'package:hierarchical_di/hero.dart';
-
-@Component(
- selector: 'hero-card',
- template: '''
-
- Name:
- {{hero.name}}
-
- ''')
-class HeroCardComponent {
- @Input() Hero hero;
-}
-// #docregion
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero_editor_component.dart b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero_editor_component.dart
deleted file mode 100644
index 0ecb02a840..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/hero_editor_component.dart
+++ /dev/null
@@ -1,47 +0,0 @@
-// #docregion
-import 'package:angular2/angular2.dart';
-import 'package:hierarchical_di/restore_service.dart';
-import 'package:hierarchical_di/hero.dart';
-
-@Component(
- selector: 'hero-editor',
- // #docregion providers
- providers: const [RestoreService],
- // #enddocregion providers
- template: '''
-
-
Name:
-
-
- save
- cancel
-
-
_restoreService;
-
- HeroEditorComponent(this._restoreService);
-
- @Input()
- set hero(Hero hero) {
- _restoreService.setItem(hero);
- }
-
- Hero get hero {
- return _restoreService.getItem();
- }
-
- onSaved() {
- saved.add(_restoreService.getItem());
- }
-
- onCanceled() {
- hero = _restoreService.restoreItem();
- canceled.add(hero);
- }
-}
-// #enddocregion
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/heroes_list_component.dart b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/heroes_list_component.dart
deleted file mode 100644
index 564f2e203b..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/heroes_list_component.dart
+++ /dev/null
@@ -1,53 +0,0 @@
-// #docregion
-import 'package:angular2/angular2.dart';
-import 'package:hierarchical_di/hero.dart';
-import 'package:hierarchical_di/heroes_service.dart';
-import 'package:hierarchical_di/hero_editor_component.dart';
-import 'package:hierarchical_di/hero_card_component.dart';
-import 'package:hierarchical_di/edit_item.dart';
-
-@Component(
- selector: 'heroes-list',
- template: '''
-
- ''',
- directives: const [HeroCardComponent, HeroEditorComponent])
-class HeroesListComponent {
- List> heroes;
- HeroesListComponent(HeroesService heroesService) {
- heroes = heroesService
- .getHeroes()
- .map((Hero item) => new EditItem(item))
- .toList();
- }
-
- onSaved(EditItem editItem, Hero updatedHero) {
- editItem.item = updatedHero;
- editItem.editing = false;
- }
-
- onCanceled(EditItem editItem) {
- editItem.editing = false;
- }
-}
-// #enddocregion
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/heroes_service.dart b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/heroes_service.dart
deleted file mode 100644
index de9508ec0a..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/heroes_service.dart
+++ /dev/null
@@ -1,18 +0,0 @@
-import 'package:angular2/angular2.dart';
-import 'package:hierarchical_di/hero.dart';
-
-@Injectable()
-class HeroesService {
- List _heroes = [
- new Hero()
- ..name = "RubberMan"
- ..power = 'Flexibility',
- new Hero()
- ..name = "Tornado"
- ..power = 'Weather changer'
- ];
-
- List getHeroes() {
- return _heroes;
- }
-}
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/restore_service.dart b/public/docs/_examples/hierarchical-dependency-injection/dart/lib/restore_service.dart
deleted file mode 100644
index a6d8c59d35..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/lib/restore_service.dart
+++ /dev/null
@@ -1,29 +0,0 @@
-// #docregion
-import 'package:angular2/angular2.dart';
-
-@Injectable()
-class RestoreService {
- T _originalItem;
- T _currentItem;
-
- setItem(T item) {
- print(item.runtimeType);
- _originalItem = item;
- _currentItem = clone(item);
- }
-
- T getItem() {
- return _currentItem;
- }
-
- T restoreItem() {
- _currentItem = _originalItem;
- return getItem();
- }
-
- T clone(T item) {
- // super poor clone implementation
- return item.clone();
- }
-}
-// #enddocregion
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/pubspec.yaml b/public/docs/_examples/hierarchical-dependency-injection/dart/pubspec.yaml
deleted file mode 100644
index d7822d6b1c..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/pubspec.yaml
+++ /dev/null
@@ -1,19 +0,0 @@
-# #docregion
-name: 'hierarchical_di'
-version: 0.0.1
-description: hierarchical dependency injection example
-
-environment:
- sdk: '>=1.0.0 <2.0.0'
-
-dependencies:
- angular2: '2.0.0-beta.1'
- browser: ^0.10.0
- dart_to_js_script_rewriter: '^0.1.0'
-
-transformers:
-- angular2:
- platform_directives:
- - 'package:angular2/common.dart#COMMON_DIRECTIVES'
- entry_points: web/main.dart
-- dart_to_js_script_rewriter
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/web/index.html b/public/docs/_examples/hierarchical-dependency-injection/dart/web/index.html
deleted file mode 100644
index cd76cf209b..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/web/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-
-
- Hierarchical Injector
-
-
-
-
-
-
- loading...
-
-
-
-
diff --git a/public/docs/_examples/hierarchical-dependency-injection/dart/web/main.dart b/public/docs/_examples/hierarchical-dependency-injection/dart/web/main.dart
deleted file mode 100644
index bfd8d2c649..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/dart/web/main.dart
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import 'package:angular2/bootstrap.dart';
-import 'package:hierarchical_di/heroes_service.dart';
-import 'package:hierarchical_di/heroes_list_component.dart';
-
-void main() {
- bootstrap(HeroesListComponent, [HeroesService]);
-}
-
-/* Documentation artifact below
-// #docregion bad-alternative
-// Don't do this!
-bootstrap(HeroesListComponent, [HeroesService, RestoreService])
-// #enddocregion bad-alternative
-*/
diff --git a/public/docs/_examples/hierarchical-dependency-injection/e2e-spec.js b/public/docs/_examples/hierarchical-dependency-injection/e2e-spec.js
deleted file mode 100644
index 2f63c32d52..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/e2e-spec.js
+++ /dev/null
@@ -1,56 +0,0 @@
-describe('Hierarchical dependency injection', function () {
-
- beforeEach(function () {
- browser.get('');
- });
-
- it('should open with a card view', function () {
- expect(element.all(by.cssContainingText('button','edit')).get(0).isDisplayed()).toBe(true,
- "edit button should be displayed");
- });
-
- it('should have multiple heros listed', function () {
- expect(element.all(by.css('heroes-list li')).count()).toBeGreaterThan(1);
- });
-
- it('should change to editor view after selection', function () {
- var editButtonEle = element.all(by.cssContainingText('button','edit')).get(0);
- editButtonEle.click().then(function() {
- expect(editButtonEle.isDisplayed()).toBe(false, "edit button should be hidden after selection");
- })
- });
-
- it('should be able to save editor change', function () {
- testEdit(true);
- });
-
- it('should be able to cancel editor change', function () {
- testEdit(false);
- });
-
- function testEdit(shouldSave) {
- var inputEle;
- // select 2nd ele
- var heroEle = element.all(by.css('heroes-list li')).get(1);
- // get the 2nd span which is the name of the hero
- var heroNameEle = heroEle.all(by.css('hero-card span')).get(1);
- var editButtonEle = heroEle.element(by.cssContainingText('button','edit'));
- editButtonEle.click().then(function() {
- inputEle = heroEle.element(by.css('hero-editor input'));
- // return inputEle.sendKeys("foo");
- return sendKeys(inputEle, "foo");
- }).then(function() {
- buttonName = shouldSave ? 'save' : 'cancel';
- var buttonEle = heroEle.element(by.cssContainingText('button', buttonName));
- return buttonEle.click();
- }).then(function() {
- if (shouldSave) {
- expect(heroNameEle.getText()).toContain('foo');
- } else {
- expect(heroNameEle.getText()).not.toContain('foo');
- }
- })
- }
-
-
-});
diff --git a/public/docs/_examples/hierarchical-dependency-injection/e2e-spec.ts b/public/docs/_examples/hierarchical-dependency-injection/e2e-spec.ts
new file mode 100644
index 0000000000..4630453f78
--- /dev/null
+++ b/public/docs/_examples/hierarchical-dependency-injection/e2e-spec.ts
@@ -0,0 +1,103 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, by, element } from 'protractor';
+
+describe('Hierarchical dependency injection', () => {
+
+ beforeAll(() => {
+ browser.get('');
+ });
+
+ describe('Heroes Scenario', () => {
+ let page = {
+ heroName: '',
+ income: '',
+
+ // queries
+ heroEl: element.all(by.css('heroes-list li')).get(0), // first hero
+ heroCardEl: element(by.css('heroes-list hero-tax-return')), // first hero tax-return
+ taxReturnNameEl: element.all(by.css('heroes-list hero-tax-return #name')).get(0),
+ incomeInputEl: element.all(by.css('heroes-list hero-tax-return input')).get(0),
+ cancelButtonEl: element(by.cssContainingText('heroes-list hero-tax-return button', 'Cancel')),
+ closeButtonEl: element(by.cssContainingText('heroes-list hero-tax-return button', 'Close')),
+ saveButtonEl: element(by.cssContainingText('heroes-list hero-tax-return button', 'Save'))
+ };
+
+ it('should list multiple heroes', () => {
+ expect(element.all(by.css('heroes-list li')).count()).toBeGreaterThan(1);
+ });
+
+ it('should show no hero tax-returns at the start', () => {
+ expect(element.all(by.css('heroes-list li hero-tax-return')).count()).toBe(0);
+ });
+
+ it('should open first hero in hero-tax-return view after click', () => {
+ page.heroEl.getText()
+ .then(val => {
+ page.heroName = val;
+ })
+ .then(() => page.heroEl.click())
+ .then(() => {
+ expect(page.heroCardEl.isDisplayed()).toBe(true);
+ });
+ });
+
+ it('hero tax-return should have first hero\'s name', () => {
+ // Not `page.tax-returnNameInputEl.getAttribute('value')` although later that is essential
+ expect(page.taxReturnNameEl.getText()).toEqual(page.heroName);
+ });
+
+ it('should be able to cancel change', () => {
+ page.incomeInputEl.clear()
+ .then(() => page.incomeInputEl.sendKeys('777'))
+ .then(() => {
+ expect(page.incomeInputEl.getAttribute('value')).toBe('777', 'income should be 777');
+ return page.cancelButtonEl.click();
+ })
+ .then(() => {
+ expect(page.incomeInputEl.getAttribute('value')).not.toBe('777', 'income should not be 777');
+ });
+ });
+
+ it('should be able to save change', () => {
+ page.incomeInputEl.clear()
+ .then(() => page.incomeInputEl.sendKeys('999'))
+ .then(() => {
+ expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should be 999');
+ return page.saveButtonEl.click();
+ })
+ .then(() => {
+ expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should still be 999');
+ });
+ });
+
+ it('should be able to close tax-return', () => {
+ page.saveButtonEl.click()
+ .then(() => {
+ expect(element.all(by.css('heroes-list li hero-tax-return')).count()).toBe(0);
+ });
+ });
+
+ });
+
+ describe('Villains Scenario', () => {
+ it('should list multiple villains', () => {
+ expect(element.all(by.css('villains-list li')).count()).toBeGreaterThan(1);
+ });
+ });
+
+ describe('Cars Scenario', () => {
+
+ it('A-component should use expected services', () => {
+ expect(element(by.css('a-car')).getText()).toContain('C1-E1-T1');
+ });
+
+ it('B-component should use expected services', () => {
+ expect(element(by.css('b-car')).getText()).toContain('C2-E2-T1');
+ });
+
+ it('C-component should use expected services', () => {
+ expect(element(by.css('c-car')).getText()).toContain('C3-E2-T1');
+ });
+ });
+});
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/.gitignore b/public/docs/_examples/hierarchical-dependency-injection/ts/.gitignore
deleted file mode 100644
index 2cb7d2a2e9..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-**/*.js
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/boot.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/boot.ts
deleted file mode 100644
index 7b3189eb3e..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/boot.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import {bootstrap} from 'angular2/platform/browser';
-import {HeroesListComponent} from './heroes-list.component';
-import {HeroesService} from './heroes.service';
-
-bootstrap(HeroesListComponent, [HeroesService])
-
-/* Documentation artifact below
-// #docregion bad-alternative
-// Don't do this!
-bootstrap(HeroesListComponent, [HeroesService, RestoreService])
-// #enddocregion bad-alternative
-*/
\ No newline at end of file
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/edit-item.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/edit-item.ts
deleted file mode 100644
index abbeabf2b0..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/edit-item.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// #docregion
-export class EditItem {
- editing: boolean
- constructor (public item: T) {}
-}
-// #docregion
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-card.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-card.component.ts
deleted file mode 100644
index 04d64ad19d..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-card.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docregion
-import {Component, Input} from 'angular2/core';
-import {Hero} from './hero';
-
-@Component({
- selector: 'hero-card',
- template: `
-
- Name:
- {{hero.name}}
-
`
-})
-export class HeroCardComponent {
- @Input() hero: Hero;
-}
-// #docregion
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts
deleted file mode 100644
index 1c19577cda..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero-editor.component.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// #docregion
-import {Component, Input, Output, EventEmitter} from 'angular2/core';
-import {RestoreService} from './restore.service';
-import {Hero} from './hero';
-
-@Component({
- selector: 'hero-editor',
- // #docregion providers
- providers: [RestoreService],
- // #enddocregion providers
- template: `
-
-
Name:
-
-
- save
- cancel
-
-
) {}
-
- @Input()
- set hero (hero: Hero) {
- this.restoreService.setItem(hero);
- }
-
- get hero () {
- return this.restoreService.getItem();
- }
-
- onSaved () {
- this.saved.next(this.restoreService.getItem());
- }
-
- onCanceled () {
- this.hero = this.restoreService.restoreItem();
- this.canceled.next(this.hero);
- }
-}
-// #enddocregion
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero.ts
deleted file mode 100644
index 76f808b1c5..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/hero.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// #docregion
-export class Hero {
- name: string;
- power: string;
-}
-// #enddocregion
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts
deleted file mode 100644
index a2d477710a..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes-list.component.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-// #docregion
-import {Component} from 'angular2/core';
-import {EditItem} from './edit-item';
-import {HeroesService} from './heroes.service';
-import {HeroCardComponent} from './hero-card.component';
-import {HeroEditorComponent} from './hero-editor.component';
-import {Hero} from './hero';
-
-@Component({
- selector: 'heroes-list',
- template: `
- `,
- directives: [HeroCardComponent, HeroEditorComponent]
-})
-export class HeroesListComponent {
- heroes: Array>;
- constructor(heroesService: HeroesService) {
- this.heroes = heroesService.getHeroes()
- .map(item => new EditItem(item));
- }
-
- onSaved (editItem: EditItem, updatedHero: Hero) {
- editItem.item = updatedHero;
- editItem.editing = false;
- }
-
- onCanceled (editItem: EditItem) {
- editItem.editing = false;
- }
-}
-
-
-// #enddocregion
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes.service.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes.service.ts
deleted file mode 100644
index e4f9e2d213..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/heroes.service.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Hero} from './hero';
-
-export class HeroesService {
- heroes: Array = [
- { name: "RubberMan", power: 'flexibility'},
- { name: "Tornado", power: 'Weather changer'}
- ];
-
- getHeroes () {
- return this.heroes;
- }
-}
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/app/restore.service.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/app/restore.service.ts
deleted file mode 100644
index c81786b2a3..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/app/restore.service.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// #docregion
-export class RestoreService {
- originalItem: T;
- currentItem: T;
-
- setItem (item: T) {
- this.originalItem = item;
- this.currentItem = this.clone(item);
- }
-
- getItem () :T {
- return this.currentItem;
- }
-
- restoreItem () :T {
- this.currentItem = this.originalItem;
- return this.getItem();
- }
-
- clone (item: T) :T {
- // super poor clone implementation
- return JSON.parse(JSON.stringify(item));
- }
-}
-// #enddocregion
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/index.html b/public/docs/_examples/hierarchical-dependency-injection/ts/index.html
deleted file mode 100644
index f4b7bad028..0000000000
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
- Hierarchical Injectors
-
-
-
-
-
-
-
-
-
-
-
-
-
- loading...
-
-
-
-
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/plnkr.json b/public/docs/_examples/hierarchical-dependency-injection/ts/plnkr.json
index 84cd89d7ca..ca92b93b06 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/plnkr.json
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/plnkr.json
@@ -1,5 +1,9 @@
{
- "description": "Hierachical Injectors",
- "files":["!**/*.d.ts", "!**/*.js"],
+ "description": "Hierachical Dependency Injection",
+ "basePath": "src/",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js"
+ ],
"tags": ["dependency", "injection"]
-}
\ No newline at end of file
+}
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/app.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..34b5dd0a5a
--- /dev/null
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/app.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'my-app',
+ template: `
+ 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/hello_world.html b/public/docs/_examples/homepage-hello-world/ts/src/app/hello_world.html
similarity index 100%
rename from public/docs/_examples/homepage-hello-world/ts/src/hello_world.html
rename to public/docs/_examples/homepage-hello-world/ts/src/app/hello_world.html
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/hello_world.ts b/public/docs/_examples/homepage-hello-world/ts/src/hello_world.ts
deleted file mode 100644
index 9d4fd95a9b..0000000000
--- a/public/docs/_examples/homepage-hello-world/ts/src/hello_world.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import {Component} from 'angular2/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: 'src/hello_world.html'
-})
-export class HelloWorld {
-
- // 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
index 7a3e40fa88..9dab660d10 100644
--- a/public/docs/_examples/homepage-hello-world/ts/src/index.html
+++ b/public/docs/_examples/homepage-hello-world/ts/src/index.html
@@ -1,44 +1,28 @@
-
- Angular 2 QuickStart
+ Angular Hello World
+ Loading...
+ Loading...
-
\ No newline at end of file
+