diff --git a/aio/content/examples/.gitignore b/aio/content/examples/.gitignore index 3a57bb712c..7833b847ed 100644 --- a/aio/content/examples/.gitignore +++ b/aio/content/examples/.gitignore @@ -55,10 +55,6 @@ dist/ !testing/src/browser-test-shim.js !testing/karma*.js -# TS to JS -!ts-to-js/js*/**/*.js -ts-to-js/js*/**/system*.js - # webpack !webpack/**/config/*.js !webpack/**/*webpack*.js diff --git a/aio/content/examples/ts-to-js/e2e-spec.ts b/aio/content/examples/ts-to-js/e2e-spec.ts deleted file mode 100644 index bc67bac8f0..0000000000 --- a/aio/content/examples/ts-to-js/e2e-spec.ts +++ /dev/null @@ -1,77 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('TypeScript to Javascript tests', function () { - - beforeAll(function () { - browser.get(''); - }); - - it('should display the basic component example', function () { - testTag('hero-view', 'Hero Detail: Windstorm'); - }); - - it('should display the component example with lifecycle methods', function () { - testTag('hero-lifecycle', 'Hero: Windstorm'); - }); - - it('should display component with DI example', function () { - testTag('hero-di', 'Hero: Windstorm'); - }); - - it('should display component with DI using @Inject example', function () { - testTag('hero-di-inject', 'Hero: Windstorm'); - }); - - it('should support optional, attribute, and query injections', function () { - let app = element(by.css('hero-di-inject-additional')); - let h1 = app.element(by.css('h1')); - let okMsg = app.element(by.css('p')); - - expect(h1.getText()).toBe('Tour of Heroes'); - app.element(by.buttonText('OK')).click(); - expect(okMsg.getText()).toBe('OK!'); - }); - - it('should support component with inputs and outputs', function () { - let app = element(by.css('hero-io')); - let confirmComponent = app.element(by.css('app-confirm')); - - confirmComponent.element(by.buttonText('OK')).click(); - expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true); - - confirmComponent.element(by.buttonText('Cancel')).click(); - expect(app.element(by.cssContainingText('span', 'Cancel clicked')).isPresent()).toBe(true); - }); - - it('should support host bindings and host listeners', function() { - let app = element(by.css('hero-host')); - let h1 = app.element(by.css('h1')); - - expect(app.getAttribute('class')).toBe('heading'); - expect(app.getAttribute('title')).toContain('Tooltip'); - - h1.click(); - expect(h1.getAttribute('class')).toBe('active'); - - h1.click(); - browser.actions().doubleClick(h1.getWebElement()).perform(); - expect(h1.getAttribute('class')).toBe('active'); - }); - - it('should support content and view queries', function() { - let app = element(by.css('hero-queries')); - let windstorm = app.element(by.css('view-child:first-child')); - - app.element(by.css('button')).click(); - expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active'); - expect(windstorm.element(by.css('content-child')).getText()).toBe('Active'); - }); - - function testTag(selector: string, expectedText: string) { - let component = element(by.css(selector)); - expect(component.getText()).toBe(expectedText); - } - -}); diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/example-config.json b/aio/content/examples/ts-to-js/js-es6-decorators/example-config.json deleted file mode 100644 index 81f31aaf0d..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/example-config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "build": "build:babel" -} diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/plnkr.json b/aio/content/examples/ts-to-js/js-es6-decorators/plnkr.json deleted file mode 100644 index 447fc5f605..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/plnkr.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "TypeScript to JavaScript", - "basePath": "src/", - "files":[ - "!**/*.d.ts", - "!**/*.js" - ], - "tags":["cookbook"] -} diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/.babelrc b/aio/content/examples/ts-to-js/js-es6-decorators/src/.babelrc deleted file mode 100644 index 3aaf507508..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/.babelrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "presets": [ - "es2015", - "angular2" - ] -} diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.es6 deleted file mode 100644 index d425788f46..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.es6 +++ /dev/null @@ -1,14 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'my-app', - templateUrl: './app.component.html', - styles: [ - // See hero-di-inject-additional.component - 'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}', - '.heading {font-style: italic}' - ] -}) -export class AppComponent { - title = 'ES6 JavaScript with Decorators'; -} diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.html b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.html deleted file mode 100644 index 995645073a..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.html +++ /dev/null @@ -1,31 +0,0 @@ - -

{{title}}

-Classes and Class Metadata
-Input and Output Decorators
-Dependency Injection
-Host Metadata
-View and Child Metadata
- -
-

Classes and Class Metadata

- - - -
-

Input and Output Metadata

- - -
-

Dependency Injection

- - - - -
-

Host Metadata

- - - -
-

View and Child Metadata

- diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.module.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.module.es6 deleted file mode 100644 index 9c248a7ad3..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.module.es6 +++ /dev/null @@ -1,55 +0,0 @@ -import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { ConfirmComponent } from './confirm.component'; -// #docregion appimport -import { HeroComponent } from './hero.component'; -// #enddocregion appimport -import { HeroComponent as HeroDIComponent } from './hero-di.component'; -import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component'; -import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component'; -import { HeroHostComponent } from './hero-host.component'; -import { HeroHostMetaComponent } from './hero-host-meta.component'; -import { HeroIOComponent } from './hero-io.component'; -import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component'; -import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component'; -import { HeroTitleComponent } from './hero-title.component'; - -import { DataService } from './data.service'; - -@NgModule({ - imports: [ - BrowserModule - ], - declarations: [ - AppComponent, - ConfirmComponent, - HeroComponent, - HeroDIComponent, - HeroDIInjectComponent, - HeroDIInjectAdditionalComponent, - HeroHostComponent, HeroHostMetaComponent, - HeroIOComponent, - HeroLifecycleComponent, - HeroQueriesComponent, ViewChildComponent, ContentChildComponent, - HeroTitleComponent - ], - providers: [ - DataService, - { provide: 'heroName', useValue: 'Windstorm' } - ], - bootstrap: [ AppComponent ], - - // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging -}) -export class AppModule { } - -/* tslint:disable no-unused-variable */ -// #docregion ng2import -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { - LocationStrategy, - HashLocationStrategy -} from '@angular/common'; -// #enddocregion ng2import diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.es6 deleted file mode 100644 index f01fa4de40..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.es6 +++ /dev/null @@ -1,21 +0,0 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; - -// #docregion -@Component({ - selector: 'app-confirm', - templateUrl: './confirm.component.html' -}) -export class ConfirmComponent { - @Input() okMsg = ''; - @Input('cancelMsg') notOkMsg = ''; - @Output() ok = new EventEmitter(); - @Output('cancel') notOk = new EventEmitter(); - - onOkClick() { - this.ok.emit(true); - } - onNotOkClick() { - this.notOk.emit(true); - } -} -// #enddocregion diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.html b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.html deleted file mode 100644 index 45275d218a..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.html +++ /dev/null @@ -1,6 +0,0 @@ - - diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/data.service.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/data.service.es6 deleted file mode 100644 index cd7f9e1aae..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/data.service.es6 +++ /dev/null @@ -1,10 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class DataService { - constructor() { } - - getHeroName() { - return 'Windstorm'; - } -} diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject-additional.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject-additional.component.es6 deleted file mode 100644 index ec460a9dbc..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject-additional.component.es6 +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'hero-di-inject-additional', - template: `` -}) -export class HeroComponent { } diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6 deleted file mode 100644 index 94b42f956a..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6 +++ /dev/null @@ -1,13 +0,0 @@ -import { Component, Inject } from '@angular/core'; - -// #docregion -@Component({ - selector: 'hero-di-inject', - template: `

Hero: {{name}}

` -}) -export class HeroComponent { - constructor(@Inject('heroName') name) { - this.name = name; - } -} -// #enddocregion diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di.component.es6 deleted file mode 100644 index 3a17abd281..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di.component.es6 +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -import { DataService } from './data.service'; - -@Component({ - selector: 'hero-di', - template: `

Hero: {{name}}

` -}) -export class HeroComponent { - name = ''; - constructor(dataService: DataService) { - this.name = dataService.getHeroName(); - } -} -// #enddocregion diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6 deleted file mode 100644 index fefe4a5470..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6 +++ /dev/null @@ -1,44 +0,0 @@ -import { Component } from '@angular/core'; - -// #docregion -@Component({ - selector: 'hero-host-meta', - template: ` -

Hero Host in Metadata

-
Heading clicks: {{clicks}}
- `, - host: { - // HostBindings to the element - '[title]': 'title', - '[class.heading]': 'headingClass', - - // HostListeners on the entire element - '(click)': 'clicked()', - '(mouseenter)': 'enter($event)', - '(mouseleave)': 'leave($event)' - }, - // Styles within (but excluding) the element - styles: ['.active {background-color: coral;}'] -}) -export class HeroHostMetaComponent { - title = 'Hero Host in Metadata Tooltip'; - headingClass = true; - - active = false; - clicks = 0; - - clicked() { - this.clicks += 1; - } - - enter(event: Event) { - this.active = true; - this.headingClass = false; - } - - leave(event: Event) { - this.active = false; - this.headingClass = true; - } -} -// #enddocregion diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host.component.es6 deleted file mode 100644 index e8d72233c8..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host.component.es6 +++ /dev/null @@ -1,39 +0,0 @@ -import { Component, HostBinding, HostListener } from '@angular/core'; - -// #docregion -@Component({ - selector: 'hero-host', - template: ` -

Hero Host in Decorators

-
Heading clicks: {{clicks}}
- `, - // Styles within (but excluding) the element - styles: ['.active {background-color: yellow;}'] -}) -export class HeroHostComponent { - // HostBindings to the element - @HostBinding() title = 'Hero Host in Decorators Tooltip'; - @HostBinding('class.heading') headingClass = true; - - active = false; - clicks = 0; - - // HostListeners on the entire element - @HostListener('click') - clicked() { - this.clicks += 1; - } - - @HostListener('mouseenter', ['$event']) - enter(event: Event) { - this.active = true; - this.headingClass = false; - } - - @HostListener('mouseleave', ['$event']) - leave(event: Event) { - this.active = false; - this.headingClass = true; - } -} -// #enddocregion diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-io.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-io.component.es6 deleted file mode 100644 index 4b36411e78..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-io.component.es6 +++ /dev/null @@ -1,26 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'hero-io', - template: ` - - - OK clicked - Cancel clicked - ` -}) -export class HeroIOComponent { - okClicked = false; - cancelClicked = false; - - onOk() { - this.okClicked = true; - } - - onCancel() { - this.cancelClicked = true; - } -} diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6 deleted file mode 100644 index 2539266597..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6 +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'hero-lifecycle', - template: `

Hero: {{name}}

` -}) -export class HeroComponent { - name = ''; - ngOnInit() { - // todo: fetch from server async - setTimeout(() => this.name = 'Windstorm', 0); - } -} diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6 deleted file mode 100644 index fced43d4d7..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6 +++ /dev/null @@ -1,81 +0,0 @@ -import { - Component, - ContentChild, - Input, - QueryList, - ViewChildren -} from '@angular/core'; - -@Component({ - selector: 'content-child', - template: ` - - Active - ` -}) -export class ContentChildComponent { - active = false; - - activate() { - this.active = true; - } -} - -//////////////////// - -// #docregion content -@Component({ - selector: 'view-child', - template: ` -

- {{hero.name}} - -

`, - styles: ['.active {font-weight: bold; background-color: skyblue;}'] -}) -export class ViewChildComponent { - @Input() hero; - active = false; - - @ContentChild(ContentChildComponent) content; - - activate() { - this.active = !this.active; - this.content.activate(); - } -} -// #enddocregion content - -//////////////////// - -// #docregion view -@Component({ - selector: 'hero-queries', - template: ` - - - - - ` -}) -export class HeroQueriesComponent { - active = false; - heroData = [ - {id: 1, name: 'Windstorm'}, - {id: 2, name: 'LaughingGas'} - ]; - - @ViewChildren(ViewChildComponent) views; - - activate() { - this.active = !this.active; - this.views.forEach( - view => view.activate() - ); - } - - get buttonLabel() { - return this.active ? 'Deactivate' : 'Activate'; - } -} -// #enddocregion view diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.es6 deleted file mode 100644 index 04c14a9631..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.es6 +++ /dev/null @@ -1,25 +0,0 @@ -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 = ''; - constructor( - @Inject('titlePrefix') @Optional() titlePrefix, - @Attribute('title') title - ) { - this.titlePrefix = titlePrefix; - this.title = title; - } - - ok() { - this.msg = 'OK!'; - } -} -// #enddocregion - diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.html b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.html deleted file mode 100644 index 164683cb7c..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.html +++ /dev/null @@ -1,4 +0,0 @@ - -

{{titlePrefix}} {{title}}

- -

{{ msg }}

diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero.component.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero.component.es6 deleted file mode 100644 index 2976ec605e..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero.component.es6 +++ /dev/null @@ -1,15 +0,0 @@ -// #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/aio/content/examples/ts-to-js/js-es6-decorators/src/index.html b/aio/content/examples/ts-to-js/js-es6-decorators/src/index.html deleted file mode 100644 index 2a94db38cc..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - TypeScript to JavaScript - - - - - - - - - - - - - Loading... - - - diff --git a/aio/content/examples/ts-to-js/js-es6-decorators/src/main.es6 b/aio/content/examples/ts-to-js/js-es6-decorators/src/main.es6 deleted file mode 100644 index f22933ba8e..0000000000 --- a/aio/content/examples/ts-to-js/js-es6-decorators/src/main.es6 +++ /dev/null @@ -1,4 +0,0 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/aio/content/examples/ts-to-js/js-es6/example-config.json b/aio/content/examples/ts-to-js/js-es6/example-config.json deleted file mode 100644 index 81f31aaf0d..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/example-config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "build": "build:babel" -} diff --git a/aio/content/examples/ts-to-js/js-es6/plnkr.json b/aio/content/examples/ts-to-js/js-es6/plnkr.json deleted file mode 100644 index 447fc5f605..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/plnkr.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "TypeScript to JavaScript", - "basePath": "src/", - "files":[ - "!**/*.d.ts", - "!**/*.js" - ], - "tags":["cookbook"] -} diff --git a/aio/content/examples/ts-to-js/js-es6/src/.babelrc b/aio/content/examples/ts-to-js/js-es6/src/.babelrc deleted file mode 100644 index 3c078e9f99..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/.babelrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "presets": [ - "es2015" - ] -} diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/app.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/app.component.es6 deleted file mode 100644 index 6079f7f246..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/app.component.es6 +++ /dev/null @@ -1,19 +0,0 @@ -import { Component } from '@angular/core'; - -export class AppComponent { - constructor() { - this.title = 'Plain ES6 JavaScript'; - } -} - -AppComponent.annotations = [ - new Component({ - selector: 'my-app', - templateUrl: './app.component.html', - styles: [ - // See hero-di-inject-additional.component - 'hero-host { border: 1px dashed black; display: block; padding: 4px;}', - '.heading {font-style: italic}' - ] - }) -]; diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/app.component.html b/aio/content/examples/ts-to-js/js-es6/src/app/app.component.html deleted file mode 100644 index 52b9b4580e..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/app.component.html +++ /dev/null @@ -1,30 +0,0 @@ - -

{{title}}

-Classes and Class Metadata
-Input and Output Metadata
-Dependency Injection
-Host Metadata
-View and Child Metadata
- -
-

Classes and Class Metadata

- - - -
-

Input and Output Metadata

- - -
-

Dependency Injection

- - - - -
-

Host Metadata

- - -
-

View and Child Metadata

- diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/app.module.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/app.module.es6 deleted file mode 100644 index f31141e78f..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/app.module.es6 +++ /dev/null @@ -1,56 +0,0 @@ -import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { ConfirmComponent } from './confirm.component'; -// #docregion appimport -import { HeroComponent } from './hero.component'; - -// #enddocregion appimport -import { HeroComponent as HeroDIComponent } from './hero-di.component'; -import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component'; -import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component'; -import { HeroHostComponent } from './hero-host.component'; -import { HeroIOComponent } from './hero-io.component'; -import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component'; -import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component'; -import { HeroTitleComponent } from './hero-title.component'; - -import { DataService } from './data.service'; - -export class AppModule { } - -AppModule.annotations = [ - new NgModule({ - imports: [ BrowserModule], - declarations: [ - AppComponent, - ConfirmComponent, - HeroComponent, - HeroDIComponent, - HeroDIInjectComponent, - HeroDIInjectAdditionalComponent, - HeroHostComponent, - HeroIOComponent, - HeroLifecycleComponent, - HeroQueriesComponent, ViewChildComponent, ContentChildComponent, - HeroTitleComponent - ], - providers: [ - DataService, - { provide: 'heroName', useValue: 'Windstorm' } - ], - bootstrap: [ AppComponent ], - - // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging - }) -] - -/* tslint:disable no-unused-variable */ -// #docregion ng2import -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { - LocationStrategy, - HashLocationStrategy -} from '@angular/common'; -// #enddocregion ng2import diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.es6 deleted file mode 100644 index 296268dda4..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.es6 +++ /dev/null @@ -1,31 +0,0 @@ -import { Component, EventEmitter } from '@angular/core'; - -// #docregion -export class ConfirmComponent { - constructor(){ - this.ok = new EventEmitter(); - this.notOk = new EventEmitter(); - } - onOkClick() { - this.ok.emit(true); - } - onNotOkClick() { - this.notOk.emit(true); - } -} - -ConfirmComponent.annotations = [ - new Component({ - selector: 'app-confirm', - templateUrl: './confirm.component.html', - inputs: [ - 'okMsg', - 'notOkMsg: cancelMsg' - ], - outputs: [ - 'ok', - 'notOk: cancel' - ] - }) -]; -// #enddocregion diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.html b/aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.html deleted file mode 100644 index 45275d218a..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.html +++ /dev/null @@ -1,6 +0,0 @@ - - diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/data.service.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/data.service.es6 deleted file mode 100644 index de023ce5a0..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/data.service.es6 +++ /dev/null @@ -1,13 +0,0 @@ -import { Injectable } from '@angular/core'; - -export class DataService { - constructor() { - } - getHeroName() { - return 'Windstorm'; - } -} - -DataService.annotations = [ - new Injectable() -]; diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject-additional.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject-additional.component.es6 deleted file mode 100644 index 5eb9bab815..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject-additional.component.es6 +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -export class HeroComponent { } - -HeroComponent.annotations = [ - new Component({ - selector: 'hero-di-inject-additional', - template: `` - }) -]; diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject.component.es6 deleted file mode 100644 index 2f95a0b981..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject.component.es6 +++ /dev/null @@ -1,20 +0,0 @@ -import { Component, Inject } from '@angular/core'; - -// #docregion -export class HeroComponent { - constructor(name) { - this.name = name; - } -} - -HeroComponent.annotations = [ - new Component({ - selector: 'hero-di-inject', - template: `

Hero: {{name}}

` - }) -]; - -HeroComponent.parameters = [ - [new Inject('heroName')] -]; -// #enddocregion diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-di.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-di.component.es6 deleted file mode 100644 index a18b1ba777..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-di.component.es6 +++ /dev/null @@ -1,21 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -import { DataService } from './data.service'; - -export class HeroComponent { - constructor(dataService) { - this.name = dataService.getHeroName(); - } -} - -HeroComponent.annotations = [ - new Component({ - selector: 'hero-di', - template: `

Hero: {{name}}

` - }) -]; - -HeroComponent.parameters = [ - [DataService] -]; -// #enddocregion diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-host.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-host.component.es6 deleted file mode 100644 index b06701ee8d..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-host.component.es6 +++ /dev/null @@ -1,50 +0,0 @@ -import { Component } from '@angular/core'; - -// #docregion -export class HeroHostComponent { - constructor() { - this.active = false; - this.clicks = 0; - this.headingClass = true; - this.title = 'Hero Host Tooltip'; - } - - clicked() { - this.clicks += 1; - } - - enter(event) { - this.active = true; - this.headingClass = false; - } - - leave(event) { - this.active = false; - this.headingClass = true; - } -} - -// #docregion metadata -HeroHostComponent.annotations = [ - new Component({ - selector: 'hero-host', - template: ` -

Hero Host

-
Heading clicks: {{clicks}}
- `, - host: { - // HostBindings to the element - '[title]': 'title', - '[class.heading]': 'headingClass', - '(click)': 'clicked()', - - // HostListeners on the entire element - '(mouseenter)': 'enter($event)', - '(mouseleave)': 'leave($event)' - }, - // Styles within (but excluding) the element - styles: ['.active {background-color: yellow;}'] - }) -]; -// #enddocregion metadata -// #enddocregion diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-io.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-io.component.es6 deleted file mode 100644 index 0dc8c08f2d..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-io.component.es6 +++ /dev/null @@ -1,31 +0,0 @@ -import { Component } from '@angular/core'; - -export class HeroIOComponent { - constructor() { - this.okClicked = false; - this.cancelClicked = false; - } - - onOk() { - this.okClicked = true; - } - - onCancel() { - this.cancelClicked = true; - } -} - -HeroIOComponent.annotations = [ - new Component({ - selector: 'hero-io', - template: ` - - - OK clicked - Cancel clicked - ` - }) -]; diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-lifecycle.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-lifecycle.component.es6 deleted file mode 100644 index b394ff59aa..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-lifecycle.component.es6 +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -export class HeroComponent { - ngOnInit() { - // todo: fetch from server async - setTimeout(() => this.name = 'Windstorm', 0); - } -} - -HeroComponent.annotations = [ - new Component({ - selector: 'hero-lifecycle', - template: `

Hero: {{name}}

` - }) -]; diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-queries.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-queries.component.es6 deleted file mode 100644 index bf3b914406..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-queries.component.es6 +++ /dev/null @@ -1,97 +0,0 @@ -import { - Component, - ContentChild, - Input, - QueryList, - ViewChildren -} from '@angular/core'; - -export class ContentChildComponent { - constructor() { - this.active = false; - } - - activate() { - this.active = !this.active; - } -} - -ContentChildComponent.annotations = [ - new Component({ - selector: 'content-child', - template: ` - - Active - ` - }) -]; - -//////////////////// - -// #docregion content -export class ViewChildComponent { - constructor() { - this.active = false; - } - - activate() { - this.active = !this.active; - this.content.activate(); - } -} - -ViewChildComponent.annotations = [ - new Component({ - selector: 'view-child', - template: `

- {{hero.name}} - -

`, - styles: ['.active {font-weight: bold; background-color: skyblue;}'], - inputs: ['hero'], - queries: { - content: new ContentChild(ContentChildComponent) - } - }) -]; -// #enddocregion content - -//////////////////// - -// #docregion view -export class HeroQueriesComponent { - constructor(){ - this.active = false; - this.heroData = [ - {id: 1, name: 'Windstorm'}, - {id: 2, name: 'LaughingGas'} - ]; - } - - activate() { - this.active = !this.active; - this.views.forEach( - view => view.activate() - ); - } - - get buttonLabel() { - return this.active ? 'Deactivate' : 'Activate'; - } -} - -HeroQueriesComponent.annotations = [ - new Component({ - selector: 'hero-queries', - template: ` - - - - - `, - queries: { - views: new ViewChildren(ViewChildComponent) - } - }) -]; -// #enddocregion view diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.es6 deleted file mode 100644 index 4b89dfba83..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.es6 +++ /dev/null @@ -1,28 +0,0 @@ -import { Attribute, Component, Inject, Optional } from '@angular/core'; - -// #docregion -export class HeroTitleComponent { - constructor(titlePrefix, title) { - this.titlePrefix = titlePrefix; - this.title = title; - this.msg = ''; - } - - ok() { - this.msg = 'OK!'; - } -} - -// #docregion templateUrl -HeroTitleComponent.annotations = [ - new Component({ - selector: 'hero-title', - templateUrl: './hero-title.component.html' - }) -]; -// #enddocregion templateUrl - -HeroTitleComponent.parameters = [ - [new Optional(), new Inject('titlePrefix')], - [new Attribute('title')] -]; diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.html b/aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.html deleted file mode 100644 index 164683cb7c..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.html +++ /dev/null @@ -1,4 +0,0 @@ - -

{{titlePrefix}} {{title}}

- -

{{ msg }}

diff --git a/aio/content/examples/ts-to-js/js-es6/src/app/hero.component.es6 b/aio/content/examples/ts-to-js/js-es6/src/app/hero.component.es6 deleted file mode 100644 index 350f946460..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/app/hero.component.es6 +++ /dev/null @@ -1,21 +0,0 @@ -// #docplaster -// #docregion -// #docregion metadata -import { Component } from '@angular/core'; - -// #docregion appexport, class -export class HeroComponent { - constructor() { - this.title = 'Hero Detail'; - } - getName() {return 'Windstorm'; } -} -// #enddocregion appexport, class - -HeroComponent.annotations = [ - new Component({ - selector: 'hero-view', - template: '

{{title}}: {{getName()}}

' - }) -]; -// #enddocregion metadata diff --git a/aio/content/examples/ts-to-js/js-es6/src/index.html b/aio/content/examples/ts-to-js/js-es6/src/index.html deleted file mode 100644 index 2a94db38cc..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - TypeScript to JavaScript - - - - - - - - - - - - - Loading... - - - diff --git a/aio/content/examples/ts-to-js/js-es6/src/main.es6 b/aio/content/examples/ts-to-js/js-es6/src/main.es6 deleted file mode 100644 index f22933ba8e..0000000000 --- a/aio/content/examples/ts-to-js/js-es6/src/main.es6 +++ /dev/null @@ -1,4 +0,0 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/aio/content/examples/ts-to-js/js/example-config.json b/aio/content/examples/ts-to-js/js/example-config.json deleted file mode 100644 index 81f31aaf0d..0000000000 --- a/aio/content/examples/ts-to-js/js/example-config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "build": "build:babel" -} diff --git a/aio/content/examples/ts-to-js/js/plnkr.json b/aio/content/examples/ts-to-js/js/plnkr.json deleted file mode 100644 index 5e1eb188be..0000000000 --- a/aio/content/examples/ts-to-js/js/plnkr.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "description": "TypeScript to JavaScript", - "basePath": "src/", - "files":[ - "!**/karma*.*" - ], - "tags":["cookbook"] -} diff --git a/aio/content/examples/ts-to-js/js/src/app/app.component.html b/aio/content/examples/ts-to-js/js/src/app/app.component.html deleted file mode 100644 index 4ca26f2657..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/app.component.html +++ /dev/null @@ -1,47 +0,0 @@ - -

{{title}}

-Classes and Class Metadata
-Interfaces
-Input and Output Metadata
-Dependency Injection
-Host Metadata
-View and Child Metadata
- -
-

Classes and Class Metadata

- -

Classes and Class Metadata (DSL)

- - -
-

Interfaces

- -

Interfaces (DSL)

- - -
-

Input and Output Metadata

- -

Input and Output Metadata (DSL)

- - -
-

Dependency Injection

- - - - -

Dependency Injection (DSL)

- - - - -
-

Host Metadata

- -

Host Metadata (DSL)

- - -
-

View and Child Metadata (DSL)

- diff --git a/aio/content/examples/ts-to-js/js/src/app/app.component.js b/aio/content/examples/ts-to-js/js/src/app/app.component.js deleted file mode 100644 index b6d1ec29b0..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/app.component.js +++ /dev/null @@ -1,20 +0,0 @@ -(function(app) { - -app.AppComponent = AppComponent; -function AppComponent() { - this.title = 'ES5 JavaScript'; -} - -AppComponent.annotations = [ - new ng.core.Component({ - selector: 'my-app', - templateUrl: 'app/app.component.html', - styles: [ - // See hero-di-inject-additional.component - 'hero-host, hero-host-dsl { border: 1px dashed black; display: block; padding: 4px;}', - '.heading {font-style: italic}' - ] - }) -]; - -})(window.app = window.app || {}); diff --git a/aio/content/examples/ts-to-js/js/src/app/app.module.js b/aio/content/examples/ts-to-js/js/src/app/app.module.js deleted file mode 100644 index fc2300a89b..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/app.module.js +++ /dev/null @@ -1,46 +0,0 @@ -(function(app) { - -app.AppModule = AppModule; -function AppModule() { } - -AppModule.annotations = [ - new ng.core.NgModule({ - imports: [ ng.platformBrowser.BrowserModule ], - declarations: [ - app.AppComponent, - app.ConfirmComponent, app.ConfirmDslComponent, - app.HeroComponent, app.HeroDslComponent, - app.HeroDIComponent, app.HeroDIDslComponent, - app.HeroDIInjectComponent, app.HeroDIInjectDslComponent, - app.HeroDIInjectAdditionalComponent, app.HeroDIInjectAdditionalDslComponent, - app.HeroHostComponent, app.HeroHostDslComponent, - app.HeroIOComponent, app.HeroIODslComponent, - app.HeroLifecycleComponent, app.HeroLifecycleDslComponent, - app.heroQueries.HeroQueriesComponent, app.heroQueries.ViewChildComponent, app.heroQueries.ContentChildComponent, - app.HeroTitleComponent, app.HeroTitleDslComponent - ], - providers: [ - app.DataService, - { provide: 'heroName', useValue: 'Windstorm' } - ], - bootstrap: [ app.AppComponent ], - - // schemas: [ ng.core.NO_ERRORS_SCHEMA ] // helpful for debugging! - }) -] - -})(window.app = window.app || {}); - - -///// For documentation only ///// -(function () { - // #docregion appimport - var HeroComponent = app.HeroComponent; - // #enddocregion appimport - - // #docregion ng2import - var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic; - var LocationStrategy = ng.common.LocationStrategy; - var HashLocationStrategy = ng.common.HashLocationStrategy; - // #enddocregion ng2import -}) diff --git a/aio/content/examples/ts-to-js/js/src/app/confirm.component.html b/aio/content/examples/ts-to-js/js/src/app/confirm.component.html deleted file mode 100644 index 45275d218a..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/confirm.component.html +++ /dev/null @@ -1,6 +0,0 @@ - - diff --git a/aio/content/examples/ts-to-js/js/src/app/confirm.component.js b/aio/content/examples/ts-to-js/js/src/app/confirm.component.js deleted file mode 100644 index b76d3f54aa..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/confirm.component.js +++ /dev/null @@ -1,75 +0,0 @@ -(function(app) { - - // #docregion - app.ConfirmComponent = ConfirmComponent; - - ConfirmComponent.annotations = [ - new ng.core.Component({ - selector: 'app-confirm', - templateUrl: 'app/confirm.component.html', - inputs: [ - 'okMsg', - 'notOkMsg: cancelMsg' - ], - outputs: [ - 'ok', - 'notOk: cancel' - ] - }) - ]; - - function ConfirmComponent() { - this.ok = new ng.core.EventEmitter(); - this.notOk = new ng.core.EventEmitter(); - } - - ConfirmComponent.prototype.onOkClick = function() { - this.ok.emit(true); - } - - ConfirmComponent.prototype.onNotOkClick = function() { - this.notOk.emit(true); - } - // #enddocregion - -})(window.app = window.app || {}); - -/////// DSL version //////// - -(function(app) { - - var old = app.ConfirmComponent; - - // #docregion dsl - app.ConfirmComponent = ng.core.Component({ - selector: 'app-confirm-dsl', - templateUrl: 'app/confirm.component.html', - inputs: [ - 'okMsg', - 'notOkMsg: cancelMsg' - ], - outputs: [ - 'ok', - 'notOk: cancel' - ] - }) - .Class({ - constructor: function ConfirmComponent() { - this.ok = new ng.core.EventEmitter(); - this.notOk = new ng.core.EventEmitter(); - }, - - onOkClick: function() { - this.ok.emit(true); - }, - - onNotOkClick: function() { - this.notOk.emit(true); - } - }); - // #enddocregion dsl - - app.ConfirmDslComponent = app.ConfirmComponent; - app.ConfirmComponent = old; - -})(window.app = window.app || {}); diff --git a/aio/content/examples/ts-to-js/js/src/app/data.service.js b/aio/content/examples/ts-to-js/js/src/app/data.service.js deleted file mode 100644 index 643bb57dca..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/data.service.js +++ /dev/null @@ -1,10 +0,0 @@ -(function(app) { - - app.DataService = DataService; - function DataService() { } - - DataService.prototype.getHeroName = function() { - return 'Windstorm'; - }; - -})(window.app = window.app || {}); diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-di-inject-additional.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-di-inject-additional.component.js deleted file mode 100644 index 450cc53847..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/hero-di-inject-additional.component.js +++ /dev/null @@ -1,36 +0,0 @@ -(function(app) { - - var old = app.HeroComponent; - - app.HeroComponent = HeroComponent; - - HeroComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-di-inject-additional', - template: '' - }) - ]; - - function HeroComponent() {} - - app.HeroDIInjectAdditionalComponent = app.HeroComponent; - app.HeroComponent = old; - -})(window.app = window.app || {}); - -////// DSL Version ///////// -(function(app) { - - var old = app.HeroComponent; - - app.HeroComponent = ng.core.Component({ - selector: 'hero-di-inject-additional-dsl', - template: '' - }).Class({ - constructor: function HeroComponent() { } - }); - - app.HeroDIInjectAdditionalDslComponent = app.HeroComponent; - app.HeroComponent = old; - -})(window.app = window.app || {}); diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-di-inject.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-di-inject.component.js deleted file mode 100644 index 879365208c..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/hero-di-inject.component.js +++ /dev/null @@ -1,51 +0,0 @@ -(function(app) { - - var old = app.HeroComponent; - - // #docregion - app.HeroComponent = HeroComponent; - - HeroComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-di-inject', - template: '

Hero: {{name}}

' - }) - ]; - - HeroComponent.parameters = [ 'heroName' ]; - - function HeroComponent(name) { - this.name = name; - } - // #enddocregion - - app.HeroDIInjectComponent = app.HeroComponent; - app.HeroComponent = old; - -})(window.app = window.app || {}); - -/////// DSL version //////// - -(function(app) { - - var old = app.HeroComponent; - - // #docregion dsl - app.HeroComponent = ng.core.Component({ - selector: 'hero-di-inject-dsl', - template: '

Hero: {{name}}

' - }) - .Class({ - constructor: [ - new ng.core.Inject('heroName'), - function HeroComponent(name) { - this.name = name; - } - ] - }); - // #enddocregion dsl - - app.HeroDIInjectDslComponent = app.HeroComponent; - app.HeroComponent = old; - -})(window.app = window.app || {}); diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-di.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-di.component.js deleted file mode 100644 index 2f49a85079..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/hero-di.component.js +++ /dev/null @@ -1,51 +0,0 @@ -(function(app) { - - var old = app.HeroComponent; - - // #docregion - app.HeroComponent = HeroComponent; - - HeroComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-di', - template: '

Hero: {{name}}

' - }) - ]; - - HeroComponent.parameters = [ app.DataService ]; - - function HeroComponent(dataService) { - this.name = dataService.getHeroName(); - } - // #enddocregion - - app.HeroDIComponent = app.HeroComponent; - app.HeroComponent = old; - -})(window.app = window.app || {}); - -////// DSL Version ///// - -(function(app) { - - var old = app.HeroComponent; - - // #docregion dsl - app.HeroComponent = ng.core.Component({ - selector: 'hero-di-dsl', - template: '

Hero: {{name}}

' - }) - .Class({ - constructor: [ - app.DataService, - function HeroComponent(service) { - this.name = service.getHeroName(); - } - ] - }); - // #enddocregion dsl - - app.HeroDIDslComponent = app.HeroComponent; - app.HeroComponent = old; - -})(window.app = window.app || {}); diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-host.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-host.component.js deleted file mode 100644 index b73e50aae0..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/hero-host.component.js +++ /dev/null @@ -1,107 +0,0 @@ -(function(app) { - - var old = app.HeroComponent - - // #docregion - app.HeroComponent = HeroComponent; - - HeroComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-host', - template: - '

Hero Host

' + - '
Heading clicks: {{clicks}}
', - host: { - // HostBindings to the element - '[title]': 'title', - '[class.heading]': 'headingClass', - '(click)': 'clicked()', - - // HostListeners on the entire element - '(mouseenter)': 'enter($event)', - '(mouseleave)': 'leave($event)' - }, - // Styles within (but excluding) the element - styles: ['.active {background-color: yellow;}'] - }) - ]; - - function HeroComponent() { - this.clicks = 0; - this.headingClass = true; - this.title = 'Hero Host Tooltip content'; - } - - HeroComponent.prototype.clicked = function() { - this.clicks += 1; - } - - HeroComponent.prototype.enter = function(event) { - this.active = true; - this.headingClass = false; - } - - HeroComponent.prototype.leave = function(event) { - this.active = false; - this.headingClass = true; - } - // #enddocregion - - app.HeroHostComponent = app.HeroComponent; - app.HeroComponent = old; - -})(window.app = window.app || {}); - -//// DSL Version //// - -(function(app) { - - var old = app.HeroComponent; - - // #docregion dsl - app.HeroComponent = ng.core.Component({ - selector: 'hero-host-dsl', - template: ` -

Hero Host (DSL)

-
Heading clicks: {{clicks}}
- `, - host: { - // HostBindings to the element - '[title]': 'title', - '[class.heading]': 'headingClass', - '(click)': 'clicked()', - - // HostListeners on the entire element - '(mouseenter)': 'enter($event)', - '(mouseleave)': 'leave($event)' - }, - // Styles within (but excluding) the element - styles: ['.active {background-color: coral;}'] - }) - .Class({ - constructor: function HeroComponent() { - this.clicks = 0; - this.headingClass = true; - this.title = 'Hero Host Tooltip DSL content'; - }, - - clicked() { - this.clicks += 1; - }, - - enter(event) { - this.active = true; - this.headingClass = false; - }, - - leave(event) { - this.active = false; - this.headingClass = true; - } - }); - // #enddocregion dsl - - app.HeroHostDslComponent = app.HeroComponent; - app.HeroComponent = old; - -})(window.app = window.app || {}); diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-io-dsl.component.html b/aio/content/examples/ts-to-js/js/src/app/hero-io-dsl.component.html deleted file mode 100644 index c8023ccb45..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/hero-io-dsl.component.html +++ /dev/null @@ -1,7 +0,0 @@ - - -OK clicked -Cancel clicked diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-io.component.html b/aio/content/examples/ts-to-js/js/src/app/hero-io.component.html deleted file mode 100644 index 215ddccf92..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/hero-io.component.html +++ /dev/null @@ -1,7 +0,0 @@ - - -OK clicked -Cancel clicked diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-io.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-io.component.js deleted file mode 100644 index b09208ce68..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/hero-io.component.js +++ /dev/null @@ -1,52 +0,0 @@ -(function(app) { - - var old = app.HeroComponent - - app.HeroComponent = HeroComponent; - - HeroComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-io', - templateUrl: 'app/hero-io.component.html' - }) - ]; - - function HeroComponent() { } - - HeroComponent.prototype.onOk = function() { - this.okClicked = true; - } - - HeroComponent.prototype.onCancel = function() { - this.cancelClicked = true; - } - - app.HeroIOComponent = app.HeroComponent; - app.HeroComponent = old; - -})(window.app = window.app || {}); - -///// DSL Version //// - -(function(app) { - - var old = app.HeroComponent - - app.HeroComponent = ng.core.Component({ - selector: 'hero-io-dsl', - templateUrl: 'app/hero-io-dsl.component.html' - }) - .Class({ - constructor: function HeroComponent() { }, - onOk: function() { - this.okClicked = true; - }, - onCancel: function() { - this.cancelClicked = true; - } - }); - - app.HeroIODslComponent = app.HeroComponent; - app.HeroComponent = old; - -})(window.app = window.app || {}); diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-lifecycle.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-lifecycle.component.js deleted file mode 100644 index 2a68288f92..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/hero-lifecycle.component.js +++ /dev/null @@ -1,52 +0,0 @@ -// #docplaster -(function(app) { - - var old = app.HeroComponent; - - // #docregion - app.HeroComponent = HeroComponent; - - HeroComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-lifecycle', - template: '

Hero: {{name}}

' - }) - ]; - - function HeroComponent() { } - - HeroComponent.prototype.ngOnInit = function() { - // todo: fetch from server async - setTimeout(() => this.name = 'Windstorm', 0); - }; - // #enddocregion - - app.HeroLifecycleComponent = app.HeroComponent; - app.HeroComponent = old; - -})(window.app = window.app || {}); - -/////// DSL version //// - -(function(app) { - - var old = app.HeroComponent; - - // #docregion dsl - app.HeroComponent = ng.core.Component({ - selector: 'hero-lifecycle-dsl', - template: '

Hero: {{name}}

' - }) - .Class({ - constructor: function HeroComponent() { }, - ngOnInit: function() { - // todo: fetch from server async - setTimeout(() => this.name = 'Windstorm', 0); - } - }); - // #enddocregion dsl - - app.HeroLifecycleDslComponent = app.HeroComponent; - app.HeroComponent = old; - -})(window.app = window.app || {}); diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-queries.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-queries.component.js deleted file mode 100644 index 5e8de58d41..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/hero-queries.component.js +++ /dev/null @@ -1,92 +0,0 @@ -(function(app) { - - app.heroQueries = app.heroQueries || {}; - - app.heroQueries.ContentChildComponent = ng.core.Component({ - selector: 'content-child', - template: - '' + - 'Active' + - '' - }).Class({ - constructor: function ContentChildComponent() { - this.active = false; - }, - - activate: function() { - this.active = !this.active; - } - }); - - //////////////////// - - // #docregion content - app.heroQueries.ViewChildComponent = ng.core.Component({ - selector: 'view-child', - template: - '

' + - '{{hero.name}} ' + - '' + - '

', - styles: ['.active {font-weight: bold; background-color: skyblue;}'], - inputs: ['hero'], - queries: { - content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent) - } - }) - .Class({ - constructor: function HeroQueriesHeroComponent() { - this.active = false; - }, - - activate: function() { - this.active = !this.active; - this.content.activate(); - } - }); - // #enddocregion content - - //////////////////// - - // #docregion view - app.heroQueries.HeroQueriesComponent = ng.core.Component({ - selector: 'hero-queries', - template: - '' + - '' + - '' + - '', - queries: { - views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent) - } - }) - .Class({ - constructor: function HeroQueriesComponent() { - this.active = false; - this.heroData = [ - {id: 1, name: 'Windstorm'}, - {id: 2, name: 'LaughingGas'} - ]; - }, - - activate: function() { - this.active = !this.active; - this.views.forEach(function(view) { - view.activate(); - }); - }, - }); - - // #docregion defined-property - // add prototype property w/ getter outside the DSL - var proto = app.heroQueries.HeroQueriesComponent.prototype; - Object.defineProperty(proto, "buttonLabel", { - get: function () { - return this.active ? 'Deactivate' : 'Activate'; - }, - enumerable: true - }); - // #enddocregion defined-property - // #enddocregion view - -})(window.app = window.app || {}); diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-title.component.html b/aio/content/examples/ts-to-js/js/src/app/hero-title.component.html deleted file mode 100644 index 164683cb7c..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/hero-title.component.html +++ /dev/null @@ -1,4 +0,0 @@ - -

{{titlePrefix}} {{title}}

- -

{{ msg }}

diff --git a/aio/content/examples/ts-to-js/js/src/app/hero-title.component.js b/aio/content/examples/ts-to-js/js/src/app/hero-title.component.js deleted file mode 100644 index f0770e1228..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/hero-title.component.js +++ /dev/null @@ -1,64 +0,0 @@ -(function(app) { - - // #docregion - app.HeroTitleComponent = HeroTitleComponent; - - // #docregion templateUrl - HeroTitleComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-title', - templateUrl: 'app/hero-title.component.html' - }) - ]; - // #enddocregion templateUrl - - function HeroTitleComponent(titlePrefix, title) { - this.titlePrefix = titlePrefix; - this.title = title; - this.msg = ''; - } - - HeroTitleComponent.prototype.ok = function() { - this.msg = 'OK!'; - } - - HeroTitleComponent.parameters = [ - [new ng.core.Optional(), new ng.core.Inject('titlePrefix')], - [new ng.core.Attribute('title')] - ]; - // #enddocregion - -})(window.app = window.app || {}); - -////////// DSL version //////////// - -(function(app) { - - var old = app.HeroTitleComponent; - - // #docregion dsl - app.HeroTitleComponent = ng.core.Component({ - selector: 'hero-title-dsl', - templateUrl: 'app/hero-title.component.html' - }) - .Class({ - constructor: [ - [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ], - new ng.core.Attribute('title'), - function HeroTitleComponent(titlePrefix, title) { - this.titlePrefix = titlePrefix; - this.title = title; - this.msg = ''; - } - ], - - ok: function() { - this.msg = 'OK!'; - } - }); - // #enddocregion dsl - - app.HeroTitleDslComponent = app.HeroTitleComponent; - app.HeroTitleComponent = old; - -})(window.app = window.app || {}); diff --git a/aio/content/examples/ts-to-js/js/src/app/hero.component.js b/aio/content/examples/ts-to-js/js/src/app/hero.component.js deleted file mode 100644 index e1407b2635..0000000000 --- a/aio/content/examples/ts-to-js/js/src/app/hero.component.js +++ /dev/null @@ -1,53 +0,0 @@ -// #docplaster -(function(app) { - -// #docregion -// #docregion appexport -// #docregion metadata -app.HeroComponent = HeroComponent; // "export" - -HeroComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-view', - template: '

{{title}}: {{getName()}}

' - }) -]; - -// #docregion constructorproto -function HeroComponent() { - this.title = "Hero Detail"; -} - -HeroComponent.prototype.getName = function() { return 'Windstorm'; }; -// #enddocregion constructorproto - -// #enddocregion metadata -// #enddocregion appexport -// #enddocregion - -})(window.app = window.app || {}); - -//////////// DSL version /////////// - -(function(app) { - - var old = app.HeroComponent; - - // #docregion dsl - app.HeroComponent = ng.core.Component({ - selector: 'hero-view-dsl', - template: '

{{title}}: {{getName()}}

', - }) - .Class({ - constructor: function HeroComponent() { - this.title = "Hero Detail"; - }, - - getName: function() { return 'Windstorm'; } - }); - // #enddocregion dsl - - app.HeroDslComponent = app.HeroComponent; - app.HeroComponent = old; - -})(window.app = window.app || {}); diff --git a/aio/content/examples/ts-to-js/js/src/index.html b/aio/content/examples/ts-to-js/js/src/index.html deleted file mode 100644 index 00338aa55a..0000000000 --- a/aio/content/examples/ts-to-js/js/src/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - TypeScript to JavaScript - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Loading... - - - diff --git a/aio/content/examples/ts-to-js/js/src/main.js b/aio/content/examples/ts-to-js/js/src/main.js deleted file mode 100644 index fd3e737c9e..0000000000 --- a/aio/content/examples/ts-to-js/js/src/main.js +++ /dev/null @@ -1,9 +0,0 @@ -(function(app) { - -var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic; - -document.addEventListener('DOMContentLoaded', function() { - platformBrowserDynamic().bootstrapModule(app.AppModule); -}); - -})(window.app = window.app || {}); diff --git a/aio/content/examples/ts-to-js/ts/example-config.json b/aio/content/examples/ts-to-js/ts/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/aio/content/examples/ts-to-js/ts/plnkr.json b/aio/content/examples/ts-to-js/ts/plnkr.json deleted file mode 100644 index 447fc5f605..0000000000 --- a/aio/content/examples/ts-to-js/ts/plnkr.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "TypeScript to JavaScript", - "basePath": "src/", - "files":[ - "!**/*.d.ts", - "!**/*.js" - ], - "tags":["cookbook"] -} diff --git a/aio/content/examples/ts-to-js/ts/src/app/app.component.html b/aio/content/examples/ts-to-js/ts/src/app/app.component.html deleted file mode 100644 index 995645073a..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/app.component.html +++ /dev/null @@ -1,31 +0,0 @@ - -

{{title}}

-Classes and Class Metadata
-Input and Output Decorators
-Dependency Injection
-Host Metadata
-View and Child Metadata
- -
-

Classes and Class Metadata

- - - -
-

Input and Output Metadata

- - -
-

Dependency Injection

- - - - -
-

Host Metadata

- - - -
-

View and Child Metadata

- diff --git a/aio/content/examples/ts-to-js/ts/src/app/app.component.ts b/aio/content/examples/ts-to-js/ts/src/app/app.component.ts deleted file mode 100644 index 912c9e1a80..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/app.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'my-app', - templateUrl: './app.component.html', - styles: [ - // See hero-di-inject-additional.component - 'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}', - '.heading {font-style: italic}' - ] -}) -export class AppComponent { - title = 'TypeScript'; -} diff --git a/aio/content/examples/ts-to-js/ts/src/app/app.module.ts b/aio/content/examples/ts-to-js/ts/src/app/app.module.ts deleted file mode 100644 index 992c3c3514..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/app.module.ts +++ /dev/null @@ -1,56 +0,0 @@ -/* tslint:disable-next-line:no-unused-variable */ -import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { ConfirmComponent } from './confirm.component'; -// #docregion appimport -import { HeroComponent } from './hero.component'; -// #enddocregion appimport -import { HeroComponent as HeroDIComponent } from './hero-di.component'; -import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component'; -import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component'; -import { HeroHostComponent } from './hero-host.component'; -import { HeroHostMetaComponent } from './hero-host-meta.component'; -import { HeroIOComponent } from './hero-io.component'; -import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component'; -import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component'; -import { HeroTitleComponent } from './hero-title.component'; - -import { DataService } from './data.service'; - -@NgModule({ - imports: [ - BrowserModule - ], - declarations: [ - AppComponent, - ConfirmComponent, - HeroComponent, - HeroDIComponent, - HeroDIInjectComponent, - HeroDIInjectAdditionalComponent, - HeroHostComponent, HeroHostMetaComponent, - HeroIOComponent, - HeroLifecycleComponent, - HeroQueriesComponent, ViewChildComponent, ContentChildComponent, - HeroTitleComponent - ], - providers: [ - DataService, - { provide: 'heroName', useValue: 'Windstorm' } - ], - bootstrap: [ AppComponent ], - - // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging! -}) -export class AppModule { } - -/* tslint:disable no-unused-variable */ -// #docregion ng2import -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { - LocationStrategy, - HashLocationStrategy -} from '@angular/common'; -// #enddocregion ng2import diff --git a/aio/content/examples/ts-to-js/ts/src/app/confirm.component.html b/aio/content/examples/ts-to-js/ts/src/app/confirm.component.html deleted file mode 100644 index 45275d218a..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/confirm.component.html +++ /dev/null @@ -1,6 +0,0 @@ - - diff --git a/aio/content/examples/ts-to-js/ts/src/app/confirm.component.ts b/aio/content/examples/ts-to-js/ts/src/app/confirm.component.ts deleted file mode 100644 index f01fa4de40..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/confirm.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; - -// #docregion -@Component({ - selector: 'app-confirm', - templateUrl: './confirm.component.html' -}) -export class ConfirmComponent { - @Input() okMsg = ''; - @Input('cancelMsg') notOkMsg = ''; - @Output() ok = new EventEmitter(); - @Output('cancel') notOk = new EventEmitter(); - - onOkClick() { - this.ok.emit(true); - } - onNotOkClick() { - this.notOk.emit(true); - } -} -// #enddocregion diff --git a/aio/content/examples/ts-to-js/ts/src/app/data.service.ts b/aio/content/examples/ts-to-js/ts/src/app/data.service.ts deleted file mode 100644 index cd7f9e1aae..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/data.service.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class DataService { - constructor() { } - - getHeroName() { - return 'Windstorm'; - } -} diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-di-inject-additional.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-di-inject-additional.component.ts deleted file mode 100644 index ec460a9dbc..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/hero-di-inject-additional.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'hero-di-inject-additional', - template: `` -}) -export class HeroComponent { } diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-di-inject.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-di-inject.component.ts deleted file mode 100644 index c583a1b0f6..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/hero-di-inject.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component, Inject } from '@angular/core'; - -// #docregion -@Component({ - selector: 'hero-di-inject', - template: `

Hero: {{name}}

` -}) -export class HeroComponent { - constructor(@Inject('heroName') private name: string) { } -} -// #enddocregion diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-di.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-di.component.ts deleted file mode 100644 index 3a17abd281..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/hero-di.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -import { DataService } from './data.service'; - -@Component({ - selector: 'hero-di', - template: `

Hero: {{name}}

` -}) -export class HeroComponent { - name = ''; - constructor(dataService: DataService) { - this.name = dataService.getHeroName(); - } -} -// #enddocregion diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-host-meta.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-host-meta.component.ts deleted file mode 100644 index fefe4a5470..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/hero-host-meta.component.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { Component } from '@angular/core'; - -// #docregion -@Component({ - selector: 'hero-host-meta', - template: ` -

Hero Host in Metadata

-
Heading clicks: {{clicks}}
- `, - host: { - // HostBindings to the element - '[title]': 'title', - '[class.heading]': 'headingClass', - - // HostListeners on the entire element - '(click)': 'clicked()', - '(mouseenter)': 'enter($event)', - '(mouseleave)': 'leave($event)' - }, - // Styles within (but excluding) the element - styles: ['.active {background-color: coral;}'] -}) -export class HeroHostMetaComponent { - title = 'Hero Host in Metadata Tooltip'; - headingClass = true; - - active = false; - clicks = 0; - - clicked() { - this.clicks += 1; - } - - enter(event: Event) { - this.active = true; - this.headingClass = false; - } - - leave(event: Event) { - this.active = false; - this.headingClass = true; - } -} -// #enddocregion diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-host.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-host.component.ts deleted file mode 100644 index e8d72233c8..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/hero-host.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Component, HostBinding, HostListener } from '@angular/core'; - -// #docregion -@Component({ - selector: 'hero-host', - template: ` -

Hero Host in Decorators

-
Heading clicks: {{clicks}}
- `, - // Styles within (but excluding) the element - styles: ['.active {background-color: yellow;}'] -}) -export class HeroHostComponent { - // HostBindings to the element - @HostBinding() title = 'Hero Host in Decorators Tooltip'; - @HostBinding('class.heading') headingClass = true; - - active = false; - clicks = 0; - - // HostListeners on the entire element - @HostListener('click') - clicked() { - this.clicks += 1; - } - - @HostListener('mouseenter', ['$event']) - enter(event: Event) { - this.active = true; - this.headingClass = false; - } - - @HostListener('mouseleave', ['$event']) - leave(event: Event) { - this.active = false; - this.headingClass = true; - } -} -// #enddocregion diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-io.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-io.component.ts deleted file mode 100644 index 4b36411e78..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/hero-io.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'hero-io', - template: ` - - - OK clicked - Cancel clicked - ` -}) -export class HeroIOComponent { - okClicked = false; - cancelClicked = false; - - onOk() { - this.okClicked = true; - } - - onCancel() { - this.cancelClicked = true; - } -} diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-lifecycle.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-lifecycle.component.ts deleted file mode 100644 index 2629c85a1a..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/hero-lifecycle.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'hero-lifecycle', - template: `

Hero: {{name}}

` -}) -export class HeroComponent implements OnInit { - name: string; - ngOnInit() { - // todo: fetch from server async - setTimeout(() => this.name = 'Windstorm', 0); - } -} diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-queries.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-queries.component.ts deleted file mode 100644 index 8b2d91ea85..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/hero-queries.component.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { - Component, - ContentChild, - Input, - QueryList, - ViewChildren -} from '@angular/core'; - -@Component({ - selector: 'content-child', - template: ` - - Active - ` -}) -export class ContentChildComponent { - active = false; - - activate() { - this.active = !this.active; - } -} - -//////////////////// - -// #docregion content -@Component({ - selector: 'view-child', - template: ` -

- {{hero.name}} - -

`, - styles: ['.active {font-weight: bold; background-color: skyblue;}'] -}) -export class ViewChildComponent { - @Input() hero: any; - active = false; - - @ContentChild(ContentChildComponent) content: ContentChildComponent; - - activate() { - this.active = !this.active; - this.content.activate(); - } -} -// #enddocregion content - -//////////////////// - -// #docregion view -@Component({ - selector: 'hero-queries', - template: ` - - - - - ` -}) -export class HeroQueriesComponent { - active = false; - heroData = [ - {id: 1, name: 'Windstorm'}, - {id: 2, name: 'LaughingGas'} - ]; - - @ViewChildren(ViewChildComponent) views: QueryList; - - 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/aio/content/examples/ts-to-js/ts/src/app/hero-title.component.html b/aio/content/examples/ts-to-js/ts/src/app/hero-title.component.html deleted file mode 100644 index 164683cb7c..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/hero-title.component.html +++ /dev/null @@ -1,4 +0,0 @@ - -

{{titlePrefix}} {{title}}

- -

{{ msg }}

diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero-title.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero-title.component.ts deleted file mode 100644 index 078421ecc7..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/hero-title.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -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 = ''; - constructor( - @Inject('titlePrefix') @Optional() private titlePrefix: string, - @Attribute('title') private title: string - ) { } - - ok() { - this.msg = 'OK!'; - } -} -// #enddocregion diff --git a/aio/content/examples/ts-to-js/ts/src/app/hero.component.ts b/aio/content/examples/ts-to-js/ts/src/app/hero.component.ts deleted file mode 100644 index 2976ec605e..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/app/hero.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #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/aio/content/examples/ts-to-js/ts/src/index.html b/aio/content/examples/ts-to-js/ts/src/index.html deleted file mode 100644 index d9ad1f7aef..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - TypeScript to JavaScript - - - - - - - - - - - - - Loading... - - - diff --git a/aio/content/examples/ts-to-js/ts/src/main.ts b/aio/content/examples/ts-to-js/ts/src/main.ts deleted file mode 100644 index f22933ba8e..0000000000 --- a/aio/content/examples/ts-to-js/ts/src/main.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/aio/content/guide/change-log.md b/aio/content/guide/change-log.md index 4b68f71b22..3da78c2096 100644 --- a/aio/content/guide/change-log.md +++ b/aio/content/guide/change-log.md @@ -120,8 +120,8 @@ The documentation for the version prior to v.2.2.0 has been removed. ## ES6 described in "TypeScript to JavaScript" (2016-11-14) -The updated [TypeScript to JavaScript](guide/ts-to-js) guide -now explains how to write apps in ES6/7 +The updated TypeScript to JavaScript guide (removed August 2017, PR #18694) +explains how to write apps in ES6/7 by translating the common idioms in the TypeScript documentation examples (and elsewhere on the web) to ES6/7 and ES5. diff --git a/aio/content/guide/ts-to-js.md b/aio/content/guide/ts-to-js.md deleted file mode 100644 index 6de85d78dd..0000000000 --- a/aio/content/guide/ts-to-js.md +++ /dev/null @@ -1,621 +0,0 @@ -# TypeScript to JavaScript - -## Introduction - -Anything you can do with Angular in _TypeScript_, you can also do -in JavaScript. Translating from one language to the other is mostly a -matter of changing the way you organize your code and access Angular APIs. - -_TypeScript_ is a popular language option for Angular development. -Most code examples on the Internet as well as on this site are written in _TypeScript_. -This cookbook contains recipes for translating _TypeScript_ -code examples to _ES6_ and to _ES5_ so that JavaScript developers -can read and write Angular apps in their preferred dialect. - -Run and compare the live TypeScript and JavaScript -code shown in this cookbook. - - -## _TypeScript_ to _ES6_ to _ES5_ - -_TypeScript_ -is a typed superset of _ES6 JavaScript_. -_ES6 JavaScript_ is a superset of _ES5 JavaScript_. _ES5_ is the kind of JavaScript that runs natively in all modern browsers. -The transformation of _TypeScript_ code all the way down to _ES5_ code can be seen as "shedding" features. - -The downgrade progression is as follows: - -* _TypeScript_ to _ES6-with-decorators_. -* _ES6-with-decorators_ to _ES6-without-decorators_ ("_plain ES6_"). -* _ES6-without-decorators_ to _ES5_. - -When translating from _TypeScript_ to _ES6-with-decorators_, remove -[class property access modifiers](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers) -such as `public` and `private`. -Remove most of the -[type declarations](https://www.typescriptlang.org/docs/handbook/basic-types.html), -such as `:string` and `:boolean` -but **keep the constructor parameter types, which are used for dependency injection**. - -From _ES6-with-decorators_ to _plain ES6_, remove all -[decorators](https://www.typescriptlang.org/docs/handbook/decorators.html) -and the remaining types. -You must declare properties in the class constructor (`this.title = '...'`) rather than in the body of the class. - -Finally, from _plain ES6_ to _ES5_, the main missing features are `import` -statements and `class` declarations. - -For _plain ES6_ transpilation you can _start_ with a setup similar to the -[_TypeScript_ quickstart](https://github.com/angular/quickstart) and adjust the application code accordingly. -Transpile with [Babel](https://babeljs.io/) using the `es2015` preset. -To use decorators and annotations with Babel, install the -[`angular2`](https://github.com/shuhei/babel-plugin-angular2-annotations) preset as well. - -{@a modularity} - -## Importing and Exporting - -### Importing Angular Code - -In both _TypeScript_ and _ES6_, you import Angular classes, functions, and other members with _ES6_ `import` statements. - -In _ES5_, you access the Angular entities of the [the Angular packages](guide/glossary#scoped-package) -through the global `ng` object. -Anything you can import from `@angular` is a nested member of this `ng` object: - - - - - - - - - - - - -### Exporting application code - -Each file in a _TypeScript_ or _ES6_ Angular application constitutes an _ES6_ module. -When you want to make something available to other modules, you `export` it. - -_ES5_ lacks native support for modules. -In an Angular _ES5_ application, you load each file manually by adding a `