diff --git a/public/docs/_examples/template-syntax/ts/package.json b/public/docs/_examples/template-syntax/ts/package.json
index b2b21e7953..882f2434bc 100644
--- a/public/docs/_examples/template-syntax/ts/package.json
+++ b/public/docs/_examples/template-syntax/ts/package.json
@@ -11,11 +11,11 @@
"author": "",
"license": "ISC",
"dependencies": {
- "angular2": "2.0.0-alpha.46",
- "systemjs": "0.19.2"
+ "angular2": "2.0.0-alpha.48",
+ "systemjs": "0.19.6"
},
"devDependencies": {
"live-server": "^0.8.1",
- "typescript": "^1.6.2"
+ "typescript": "^1.7.2"
}
}
diff --git a/public/docs/_examples/template-syntax/ts/src/app/app.component.html b/public/docs/_examples/template-syntax/ts/src/app/app.component.html
new file mode 100644
index 0000000000..4e9def478d
--- /dev/null
+++ b/public/docs/_examples/template-syntax/ts/src/app/app.component.html
@@ -0,0 +1,658 @@
+
+My First Angular Application
+
+
+
+Interpolation
+
+
+My current hero is {{currentHero.firstName}}
+
+
+
+
+ {{title}}
+
+
+
+
+
+ The sum of 1 + 1 is {{1 + 1}}
+
+
+
+
+ The sum of 1 + 1 is not {{1+1+getVal()}}
+
+
+
+
+New Mental Model
+
+
+
+
+Mental Model
+{{currentHero.fullName}}
+Save
+
+
+
+
+ Save
+
+
+
+
+
+
+
+
+
Save
+click me
+
+{{clicked}}
+
+
+
+help
+
+Special
+
+
+
+button
+
+kebab-case
+
+
+
+
+
+
+Property vs. Attribute (img examples)
+
+Buttons
+
+Enabled (but does nothing)
+Disabled
+Still disabled
+disabled by attribute
+disabled by property binding
+Disabled Cancel
+Enabled Save
+
+
+
+Property Binding
+
+
+Cancel
+
+
+NgClass is special
+
+
+The title is {{title}}
+
+
+
+
+Attribute Binding
+
+
+
+
+
+ One-Two Five Six
+
+
+{{actionName}} with Aria
+
+
+
+ Disabled
+
+ Disabled as well
+
+
+ Still disabled
+
+
+ Enabled (but inert)
+
+
+
+
+
+
+
+Class Binding
+
+
+
+Bad curly special
+
+
+
+
+Bad curly
+
+
+
+
+
+The class binding is special
+
+
+
+This one is not so special
+
+
+This class binding is special too
+
+
+
+
+Style Binding
+
+
+Red
+Save
+
+
+
+Big
+Small
+
+
+
+Event Binding
+
+
+Save
+
+
+
+On Save
+
+
+
+
+
+
click with my-click
+
+{{clickity}}
+
+
+
+
+
+
+
+Click me
+
Click me too!
+
+ Save, no propagation
+
+
+
+ Save w/ propagation
+
+
+NgModel Binding
+
+Result: {{currentHero.firstName}}
+
+
+NgClass Binding
+
+setClasses returns {{setClasses() | json}}
+
+This div is saveable and special
+
+
+After setClasses(), the classes are "{{classDiv.className}}"
+
+
+
+
+This div is special
+
+Bad curly special
+Curly special
+
+
+
+NgStyle Binding
+
+
+
+ This div is x-large
+
+
+
+setStyles returns {{setStyles() | json}}
+
+
+ This div is italic, normal weight, and x-large
+
+
+
+ After setStyles(), the styles are "{{getStyles(styleDiv)}}"
+
+
+
+
+
+
+
+NgIf Binding
+
+
+Hello, {{currentHero.firstName}}
+
+
+
+
+Hello, {{nullHero.firstName}}
+
+
+Add {{currentHero.firstName}} with template
+
+
+Hero Detail removed from DOM (via template) because isActive is false
+
+
+
+
+
+Show with class
+Hide with class
+
+
+Show with style
+Hide with style
+
+
+
+
+
+NgSwitch Binding
+
+
+
+
+You picked
+
+ Eenie
+ Meanie
+ Miney
+ Moe
+ Other
+
+
+
+
+
+
+NgFor Binding
+
+
+
+
{{hero.fullName}}
+
+
+
+
+
+
+
+
+
{{i+1}} - {{hero.fullName}}
+
+
* and Template
+
+NgIf expansion
+
+
+
+
+
+NgFor expansion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Template local variables
+
+
+
+Call
+
+
+Fax
+
+
+Example Form
+
+
+
+
+
+Inputs and Outputs
+
+
+Save
+
+
+
+
+
+
+
+my-click2
+{{clicked2}}
+
+
+Pipes
+
+
+
+{{ title | uppercase }}
+
+
+
+
+{{ title | uppercase | lowercase }}
+
+
+
+
+Birthdate: {{currentHero?.birthdate | date:'longDate'}}
+
+
+
+{{currentHero | json}}
+
+
+
+
+
+Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
+
+
+
+ Price: {{product.price | currency:'USD':true}}
+
+
+
+
+Elvis
+
+
+
+The title is {{ title }}
+
+
+
+
+
+The current hero's name is {{currentHero?.firstName}}
+
+
+
+
+
+The current hero's name is {{currentHero.firstName}}
+
+
+
+
+
+
+
+
+The null hero's name is {{nullHero.firstName}}
+
+
+
+
+The null hero's name is {{nullHero && nullHero.firstName}}
+
+
+
+
+
+
+The null hero's name is {{nullHero?.firstName}}
+
+
+
+
+
+
+Enums in binding
+
+The name of the Color.Red enum is {{Color[Color.Red]}}
+The current color number is {{color}}
+Enum Toggle
diff --git a/public/docs/_examples/template-syntax/ts/src/app/app.component.ts b/public/docs/_examples/template-syntax/ts/src/app/app.component.ts
new file mode 100644
index 0000000000..047c856ca0
--- /dev/null
+++ b/public/docs/_examples/template-syntax/ts/src/app/app.component.ts
@@ -0,0 +1,134 @@
+import {Component, NgForm} from 'angular2/core';
+
+import {Hero} from './hero';
+import {HeroDetailComponent, BigHeroDetailComponent} from './hero-detail.component';
+import {MyClickDirective, MyClickDirective2} from './my-click.directive';
+
+// Alerter fn: monkey patch during test
+export function alerter(msg?:string) {
+ window.alert(msg);
+}
+
+export enum Color {Red, Green, Blue};
+
+/**
+ * Giant grab bag of stuff to drive the chapter
+ */
+@Component({
+ selector: 'my-app',
+ templateUrl: 'app/app.component.html',
+ directives: [
+ HeroDetailComponent, BigHeroDetailComponent,
+ MyClickDirective, MyClickDirective2
+ ]
+})
+export class AppComponent {
+
+ actionName = 'Go for it';
+ alert = alerter;
+ callFax(value:string) {this.alert(`Faxing ${value} ...`)}
+ callPhone(value:string) {this.alert(`Calling ${value} ...`)}
+ canSave = true;
+
+ Color = Color;
+ color = Color.Red;
+ colorToggle() {this.color = (this.color === Color.Red)? Color.Blue : Color.Red}
+
+ currentHero = Hero.MockHeroes[0];
+
+ getStyles(el:Element){
+ let styles = window.getComputedStyle(el);
+ let showStyles = {};
+ for (var p in this.setStyles()){
+ showStyles[p] = styles[p];
+ }
+ return JSON.stringify(showStyles);
+ }
+
+ getVal() {return this.val};
+
+ heroes = Hero.MockHeroes;
+
+ // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
+ // Public Domain terms of use: http://www.wpclipart.com/terms.html
+ heroImageUrl = 'images/hero.png';
+
+ //iconUrl = 'https://angular.io/resources/images/logos/standard/shield-large.png';
+ iconUrl = 'images/ng-logo.png';
+ isActive = false;
+ isSpecial = true;
+ isUnchanged = true;
+
+ nullHero:Hero = null; // or undefined
+
+ onCancel(event:KeyboardEvent){
+ let evtMsg = event ? ' Event target is '+ (event.target).innerHTML : '';
+ this.alert('Canceled.'+evtMsg)
+ }
+
+ onClickMe(event:KeyboardEvent){
+ let evtMsg = event ? ' Event target class is '+ (event.target).className : '';
+ this.alert('Click me.'+evtMsg)
+ }
+
+ onHeroDeleted(hero:Hero){
+ this.alert('Deleted hero: '+ (hero && hero.firstName))
+ }
+
+ onSave(event:KeyboardEvent){
+ let evtMsg = event ? ' Event target is '+ (event.target).innerText : '';
+ this.alert('Saved.'+evtMsg)
+ }
+
+ onSubmit(form:NgForm){
+ let evtMsg = form.valid ?
+ ' Form value is '+ JSON.stringify(form.value) :
+ ' Form is invalid';
+ this.alert('Form submitted.'+evtMsg)
+ }
+
+ product = {
+ name: 'frimfram',
+ price: 42
+ };
+
+ setUpperCaseFirstName(firstName:string){
+ //console.log(firstName);
+ this.currentHero.firstName = firstName.toUpperCase();
+ }
+
+ // #docregion setClasses
+ setClasses() {
+ return {
+ saveable: this.canSave, // true
+ modified: !this.isUnchanged, // false
+ special: this.isSpecial, // true
+ }
+ }
+ // #enddocregion setClasses
+
+ // #docregion setStyles
+ setStyles() {
+ return {
+ 'font-style': this.canSave ? 'italic' : 'normal', // italic
+ 'font-weight': !this.isUnchanged ? 'bold' : 'normal', // normal
+ 'font-size': this.isSpecial ? 'x-large': 'smaller', // larger
+ }
+ }
+ // #enddocregion setStyles
+
+ toeChoice(picker:HTMLFieldSetElement){
+ let choices = picker.children;
+ for (let i=0; ichoices[i];
+ if (choice.checked) {return choice.value}
+ }
+ }
+
+ title = 'Template Syntax'
+ val=2;
+ // villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png'
+ // Public Domain terms of use http://www.clker.com/disclaimer.html
+ villainImageUrl = 'images/villain.png'
+
+}
diff --git a/public/docs/_examples/template-syntax/ts/src/app/app.html b/public/docs/_examples/template-syntax/ts/src/app/app.html
deleted file mode 100644
index 5c404f25e5..0000000000
--- a/public/docs/_examples/template-syntax/ts/src/app/app.html
+++ /dev/null
@@ -1,383 +0,0 @@
-
-My First Angular Application
-
- {{title}}
-
-My current hero is {{currentHero.firstName}}
-
-
- Hey there, {{currentHero.firstName}}
-
-
-The title is {{title}}
-The sum of 1 + 1 is not {{1+1+getVal()}}
-The element id is {{f.id}}
-
-The title is {{title}}
-Mental Model
-
-
-
-
-
Save
-
-
-
-Enabled
-Disabled
-Still disabled
-disabled by attribute
-disabled by property binding
-
-Disabled Cancel
-Enabled Save
-Save
-On Save
-Save w/ propagation
-
-Click me!
-
-Click me
-
Click me too!
-
keyup loop-back component
-
-
-
-
-Disabled
-Disabled as well
-
-
-Enabled
-
-
-{{actionName}} with Aria
-
-
-
- One Two Five-Six
-The class is special
-The class is special
-
-The class binding is special
-
-This one is not so special
-
-This class binding is special too
-
-
-
-
-
-Red
-Save
-Big
-Small
-
-
-
-
-
-{{currentHero?.firstName}}
-
-{{currentHero.fullName}}
-
-
-
-
-
-This div is special
-
-This div is saveable and special
-
- After setClasses(), the classes are "{{classDiv.className}}"
-
-
-
-
-
-
-This div is larger
-
-This div is italic, normal weight, and larger
-
- After setStyles(), the styles are "{{getStyles(classDiv)}}"
-
-
-
-
-
-
-NgIf Binding
-
-Add {{currentHero.firstName}}
-Remove {{nullHero.firstName}}
-
-Hero Detail removed from DOM because isActive is false
-Add {{currentHero.firstName}} with template
-
-
-Hero Detail removed from DOM (via template) because isActive is false
-
-
-
-
-Show with class
-Hide with class
-Show with style
-Hide with style
-
-
-
-
-
-NgSwitch Binding
-
-
-You picked
-
- Eenie
- Meanie
- Miney
- Moe
- Other
-
-
-
-
-
-
-NgFor Binding
-
-
-
-
{{i+1}} - {{hero.fullName}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{{ title | uppercase }}
-
-
-{{ title | uppercase | lowercase }}
-
-
-Birthdate: {{currentHero?.birthdate | date:'longDate'}}
-
-Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
-
-
-
-
- Price: {{product.price | currency:'USD':true}}
-
-
-
-
-The title is {{ title }}
-
-The current hero's name is {{currentHero?.firstName}}
-
-The current hero's name is {{currentHero.firstName}}
-
-
-
-The null hero's name is {{nullHero?.firstName}}
-
-
-
-
-The null hero's name is {{nullHero?.firstName}}
-
-
-
-
-
-Template Driven Form
-
-Call
-
-
-Fax
-
-
-Enums in bindings
-The name of the Color.Red enum is {{Color[Color.Red]}}
-The current color number is {{color}}
-Enum Toggle
diff --git a/public/docs/_examples/template-syntax/ts/src/app/app.ts b/public/docs/_examples/template-syntax/ts/src/app/app.ts
deleted file mode 100644
index 2840ca58ec..0000000000
--- a/public/docs/_examples/template-syntax/ts/src/app/app.ts
+++ /dev/null
@@ -1,299 +0,0 @@
-// NOT EVERYTHING IS NEEDED BY TEMPLATE-SYNTAX CHAPTER
-// Much left-over from support for "User Input" chapter such as
-// ClickMeComponent,
-// KeyUpComponent, KeyUpComponentV2, KeyUpComponentV3,
-// LittleTour, LoopbackComponent,
-// TODO: purge extraneous material
-
-
-/// #docplaster
-
-import {bootstrap, Component, CORE_DIRECTIVES,
- Input, Output,
- Directive,
- ElementRef, EventEmitter,
- NgForm, FORM_DIRECTIVES
-} from 'angular2/angular2';
-
-class Hero {
- public id:number
-
- constructor(
- public firstName:string,
- public lastName?:string,
- public birthdate?:Date,
- public url?:string,
- public rate:number = 100) {
- this.id = Hero.nextId++;
- }
-
- get fullName() {return `${this.firstName} ${this.lastName}`;}
-
- static nextId = 1;
-
- static MockHeroes = [
- new Hero(
- 'Hercules',
- 'Son of Zeus',
- new Date(1970, 1, 25),
- 'http://www.imdb.com/title/tt0065832/',
- 325),
-
- new Hero('eenie', 'toe'),
- new Hero('Meanie', 'Toe'),
- new Hero('Miny', 'Toe'),
- new Hero('Moe', 'Toe')
- ];
-}
-
-// for fun; not used (yet)
-@Directive({selector: 'select'})
-class DecoratorDirective {
- constructor(el: ElementRef){
- console.log(el)
- }
-}
-
-@Component({
- selector: 'hero-detail',
- /*
- inputs: ['hero'],
- outputs: ['deleted'],
- */
- template: `
-
-
Hero Detail: {{hero?.fullName}}
-
First: {{hero?.firstName}}
-
Last: {{hero?.lastName}}
-
Birthdate: {{hero?.birthdate | date:'longDate'}}
-
-
Rate/hr: {{hero?.rate | currency:'EUR'}}
-
Delete
-
();
-
- onDelete() {
- this.deleted.next(this.hero);
- }
-}
-
-@Component({
- selector: 'little-hero',
- template: '{{hero?.fullName}}
'
-})
-class LittleHeroComponent {
- @Input()
- hero: Hero;
-}
-
-@Component({
- selector: 'click-me',
- template: 'Click me '
-})
-class ClickMeComponent {
- onClickMe(){
- alert('You are my hero!')
- }
-}
-
-@Component({
- selector: 'loop-back',
- template: '{{box.value}}
'
-})
-class LoopbackComponent {
-}
-
-@Component({
- selector: 'key-up',
- template: `
- Give me some keys!
-
-
{{values}}
- `
-})
-class KeyUpComponent {
- values='';
- onKey(event:KeyboardEvent) {
- this.values += (
event.target).value + ' | ';
- }
-}
-
-@Component({
- selector: 'key-up2',
- template: `
- Give me some more keys!
-
-
{{values}}
- `
-})
-class KeyUpComponentV2 {
- values='';
- onKey(value:string) {
- this.values += value + ' | ';
- }
-}
-
-@Component({
- selector: 'key-up3',
- template: `
-
Type away! Press [enter] when done.
-
-
{{values}}
- `
-})
-class KeyUpComponentV3 {
- values='';
-}
-
-@Component({
- selector: 'little-tour',
- template: `
-
Little Tour of Heroes
-
-
Add
-
- `,
- directives: [CORE_DIRECTIVES]
-})
-class LittleTour {
- heroes=['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
-
- addHero(newHero:string) {
- if (newHero) {
- this.heroes.push(newHero);
- newHero = null; // clear the newHero textbox
- }
- }
-}
-
-bootstrap(LittleTour);
-
-enum Color {Red, Green, Blue};
-
-@Component({
- selector: 'my-app',
- templateUrl: 'app/app.html',
- directives: [
- CORE_DIRECTIVES, FORM_DIRECTIVES,
- ClickMeComponent,
- KeyUpComponent, KeyUpComponentV2, KeyUpComponentV3,
- LittleTour, LoopbackComponent,
- HeroDetailComponent, LittleHeroComponent
- ]
-})
-class AppComponent {
-
- actionName = 'Go for it';
- callFax(value:string) {alert(`Faxing ${value} ...`)}
- callPhone(value:string) {alert(`Calling ${value} ...`)}
- canSave = true;
-
- Color = Color;
- color = Color.Red;
- colorToggle() {this.color = (this.color === Color.Red)? Color.Blue : Color.Red}
-
- currentHero = Hero.MockHeroes[0];
-
- getStyles(el:Element){
- let styles = window.getComputedStyle(el);
- let showStyles = {};
- for (var p in this.setStyles()){
- showStyles[p] = styles[p];
- }
- return JSON.stringify(showStyles);
- }
-
- getVal() {return this.val};
-
- heroes = Hero.MockHeroes;
-
- //heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
- heroImageUrl = 'images/hero.png';
-
- //iconUrl = 'https://angular.io/resources/images/logos/standard/shield-large.png';
- iconUrl = 'images/ng-logo.png';
- isActive = false;
- isSpecial = true;
- isUnchanged = true;
-
- nullHero:Hero = null; // or undefined
-
- onCancel(event:KeyboardEvent){
- let evtMsg = event ? ' Event target is '+ (
event.target).innerHTML : '';
- alert('Canceled.'+evtMsg)
- }
-
- onClickMe(event:KeyboardEvent){
- let evtMsg = event ? ' Event target class is '+ (event.target).className : '';
- alert('Click me.'+evtMsg)
- }
-
- onDeleted(hero:Hero){
- alert('Deleted hero: '+ (hero && hero.firstName))
- }
-
- onSave(event:KeyboardEvent){
- let evtMsg = event ? ' Event target is '+ (event.target).innerText : '';
- alert('Saved.'+evtMsg)
- }
-
- onSubmit(form:NgForm){
- let evtMsg = form.valid ?
- ' Form value is '+ JSON.stringify(form.value) :
- ' Form is invalid';
- alert('Form submitted.'+evtMsg)
- }
-
- product = {
- name: 'frimfram',
- price: 42
- };
-
- setLastName(lastName:string){
- console.log(lastName);
- this.currentHero.lastName = lastName;
- }
-
- setClasses() {
- return {
- saveable: this.canSave, // true
- modified: !this.isUnchanged, // false
- special: this.isSpecial, // true
- }
- }
-
- setStyles() {
- return {
- 'font-style': this.canSave ? 'italic' : 'normal', // italic
- 'font-weight': !this.isUnchanged ? 'bold' : 'normal', // normal
- 'font-size': this.isSpecial ? 'larger' : 'smaller', // larger
- }
- }
-
- toeChoice(picker:HTMLFieldSetElement){
- let choices = picker.children;
- for (let i=0; ichoices[i];
- if (choice.checked) {return choice.value}
- }
- }
-
- title = 'Template Syntax'
- val=2;
- // villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png'
- villainImageUrl = 'images/villain.png'
-
-
-}
-
-bootstrap(AppComponent);
diff --git a/public/docs/_examples/template-syntax/ts/src/app/boot.ts b/public/docs/_examples/template-syntax/ts/src/app/boot.ts
new file mode 100644
index 0000000000..0d6c42ba10
--- /dev/null
+++ b/public/docs/_examples/template-syntax/ts/src/app/boot.ts
@@ -0,0 +1,3 @@
+import {bootstrap} from 'angular2/platform/browser';
+import {AppComponent} from './app.component';
+bootstrap(AppComponent);
\ No newline at end of file
diff --git a/public/docs/_examples/template-syntax/ts/src/app/decorator.directive.ts b/public/docs/_examples/template-syntax/ts/src/app/decorator.directive.ts
new file mode 100644
index 0000000000..aca06f3974
--- /dev/null
+++ b/public/docs/_examples/template-syntax/ts/src/app/decorator.directive.ts
@@ -0,0 +1,11 @@
+// Useful for spying on an element
+// for fun; not used (yet)
+import {Directive, ElementRef} from 'angular2/core';
+
+// set the selector for the element type to spy on.
+@Directive({selector: 'select'})
+export class DecoratorDirective {
+ constructor(el: ElementRef){
+ console.log(el)
+ }
+}
\ No newline at end of file
diff --git a/public/docs/_examples/template-syntax/ts/src/app/hero-detail.component.ts b/public/docs/_examples/template-syntax/ts/src/app/hero-detail.component.ts
new file mode 100644
index 0000000000..0851191ca6
--- /dev/null
+++ b/public/docs/_examples/template-syntax/ts/src/app/hero-detail.component.ts
@@ -0,0 +1,70 @@
+import {Component, Input, Output, EventEmitter} from 'angular2/core';
+
+import {Hero} from './hero';
+
+let nextHeroDetailId = 1;
+
+// #docregion input-output-2
+@Component({
+// #enddocregion input-output-2
+ selector: 'hero-detail',
+ // #docregion input-output-2
+ inputs: ['hero'],
+ outputs: ['deleted'],
+ // #enddocregion input-output-2
+ template: `
+
+ {{hero?.fullName}}
+
+
delete
+
();
+ onDelete() {
+ this.deleted.emit(this.hero);
+ }
+// #enddocregion
+
+ // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
+ // Public Domain terms of use: http://www.wpclipart.com/terms.html
+ heroImageUrl = 'images/hero.png';
+ id = nextHeroDetailId++;
+
+}
+
+@Component({
+ selector: 'big-hero-detail',
+ /*
+ inputs: ['hero'],
+ outputs: ['deleted'],
+ */
+ template: `
+
+
+
{{hero?.fullName}}
+
First: {{hero?.firstName}}
+
Last: {{hero?.lastName}}
+
Birthdate: {{hero?.birthdate | date:'longDate'}}
+
+
Rate/hr: {{hero?.rate | currency:'EUR'}}
+
+
Delete
+
();
+ // #enddocregion input-output-1
+
+ onDelete() {
+ this.deleted.emit(this.hero);
+ }
+}
diff --git a/public/docs/_examples/template-syntax/ts/src/app/hero.ts b/public/docs/_examples/template-syntax/ts/src/app/hero.ts
new file mode 100644
index 0000000000..e332511cff
--- /dev/null
+++ b/public/docs/_examples/template-syntax/ts/src/app/hero.ts
@@ -0,0 +1,30 @@
+export class Hero {
+ public id:number
+
+ constructor(
+ public firstName:string,
+ public lastName?:string,
+ public birthdate?:Date,
+ public url?:string,
+ public rate:number = 100) {
+ this.id = Hero.nextId++;
+ }
+
+ get fullName() {return `${this.firstName} ${this.lastName}`;}
+
+ static nextId = 1;
+
+ static MockHeroes = [
+ new Hero(
+ 'Hercules',
+ 'Son of Zeus',
+ new Date(1970, 1, 25),
+ 'http://www.imdb.com/title/tt0065832/',
+ 325),
+
+ new Hero('eenie', 'toe'),
+ new Hero('Meanie', 'Toe'),
+ new Hero('Miny', 'Toe'),
+ new Hero('Moe', 'Toe')
+ ];
+}
\ No newline at end of file
diff --git a/public/docs/_examples/template-syntax/ts/src/app/my-click.directive.ts b/public/docs/_examples/template-syntax/ts/src/app/my-click.directive.ts
new file mode 100644
index 0000000000..a547740836
--- /dev/null
+++ b/public/docs/_examples/template-syntax/ts/src/app/my-click.directive.ts
@@ -0,0 +1,32 @@
+import {Directive, Output, ElementRef, EventEmitter} from 'angular2/core';
+
+@Directive({selector:'[my-click]'})
+export class MyClickDirective {
+ // #docregion my-click-output-1
+ @Output('myClick') clicks = new EventEmitter();
+ // #enddocregion my-click-output-1
+ constructor(el: ElementRef){
+ el.nativeElement
+ .addEventListener('click', (event:Event) => {
+ this.clicks.emit('Click!');
+ });
+ }
+}
+
+// #docregion my-click-output-2
+@Directive({
+// #enddocregion my-click-output-2
+ selector:'[my-click2]',
+// #docregion my-click-output-2
+ outputs:['clicks:myClick']
+})
+// #enddocregion my-click-output-2
+export class MyClickDirective2 {
+ clicks = new EventEmitter();
+ constructor(el: ElementRef){
+ el.nativeElement
+ .addEventListener('click', (event:Event) => {
+ this.clicks.emit('Click!');
+ });
+ }
+}
\ No newline at end of file
diff --git a/public/docs/_examples/template-syntax/ts/src/index.html b/public/docs/_examples/template-syntax/ts/src/index.html
index 6424b81743..f3a2e467d7 100644
--- a/public/docs/_examples/template-syntax/ts/src/index.html
+++ b/public/docs/_examples/template-syntax/ts/src/index.html
@@ -2,21 +2,19 @@
Template Syntax
- Loading...
- Loading...
\ No newline at end of file
diff --git a/public/docs/_examples/template-syntax/ts/src/styles.css b/public/docs/_examples/template-syntax/ts/src/styles.css
index b2133e5103..996c47fc16 100644
--- a/public/docs/_examples/template-syntax/ts/src/styles.css
+++ b/public/docs/_examples/template-syntax/ts/src/styles.css
@@ -4,6 +4,8 @@ img {height: 100px;}
.child-div {margin-left: 1em; font-weight: normal}
.hidden {display: none}
.parent-div {margin-top: 1em; font-weight: bold}
-.special {font-weight:bold;}
+.special {font-weight:bold; font-size: x-large}
+.bad {color: red;}
+.curly {font-family: "Brush Script MT"}
.toe {margin-left: 1em; font-style: italic;}
little-hero {color:blue; font-size: smaller; background-color: Turquoise }
\ No newline at end of file
diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade
index 5666aea0d4..6ef6495113 100644
--- a/public/docs/ts/latest/guide/template-syntax.jade
+++ b/public/docs/ts/latest/guide/template-syntax.jade
@@ -36,15 +36,14 @@ include ../../../../_includes/_util-fns
>[Template Expression Operators](#expression-operators)
- [Live Example](/resources/live-examples/template-syntax/ts/src/plnkr.html)
+ [Live Example](/resources/live-examples/template-syntax/ts/src/plnkr.html).
.l-main-section
:marked
## HTML
HTML is the language of the Angular template. Our “[QuickStart](./quickstart.html)” application had a template that was pure HTML
-code-example(format="" language="html" escape="html").
- My First Angular Application
++makeExample('template-syntax/ts/src/app/app.component.html', 'my-first-app')(format=".")
:marked
Almost all HTML syntax is valid template syntax. The `
+
+
+
+
+