honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(template-syntax): drive jade from sample 

closes #456
This commit is contained in:
Ward Bell 2015-12-07 13:31:26 -08:00
parent b7897eef85
commit c33ee37144
15 changed files with 1418 additions and 1264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/docs/_examples/template-syntax/ts/package.json
View File

@ -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"
}
}

658
public/docs/_examples/template-syntax/ts/src/app/app.component.html Normal file
View File

@ -0,0 +1,658 @@
<!-- #docregion my-first-app -->
<h3>My First Angular Application</h3>
<!-- #enddocregion my-first-app -->
<!-- Interpolation and expressions -->
<hr><h2>Interpolation</h2>
<!-- #docregion first-interpolation -->
<p>My current hero is {{currentHero.firstName}}</p>
<!-- #enddocregion first-interpolation -->
<!-- #docregion title+image -->
<h3>
{{title}}
<img src="{{heroImageUrl}}" style="height:30px">
</h3>
<!-- #enddocregion title+image -->
<!-- #docregion sum-1 -->
<!-- "The sum of 1 + 1 is 2" -->
<p>The sum of 1 + 1 is {{1 + 1}}</p>
<!-- #enddocregion sum-1 -->
<!-- #docregion sum-2 -->
<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{1+1+getVal()}}</p>
<!-- #enddocregion sum-2 -->
<!-- New Mental Model -->
<hr><h2>New Mental Model</h2>
<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
<!-- #docregion img+button -->
<div class="special">Mental Model</div>
<div><b>{{currentHero.fullName}}</b></div>
<img src="images/hero.png">
<button disabled>Save</button>
<!-- #enddocregion img+button -->
<br><br>
<div>
<!-- #docregion hero-detail-1 -->
<div class="special">Mental Model</div>
<hero-detail></hero-detail>
<!-- #enddocregion hero-detail-1 -->
</div>
<br><br>
<div>
<!-- #docregion disabled-button-1 -->
<!-- Bind button disabled state to `isUnchanged` property -->
<button [disabled]="isUnchanged">Save</button>
<!-- #enddocregion disabled-button-1 -->
</div>
<br><br>
<div>
<!-- #docregion property-binding-syntax-1 -->
<img [src] = "heroImageUrl">
<hero-detail [hero]="currentHero"></hero-detail>
<div [ng-class] = "{selected: isSelected}"></div>
<!-- #enddocregion property-binding-syntax-1 -->
</div>
<br><br>
<!-- #docregion event-binding-syntax-1 -->
<button (click) = "onSave()">Save</button>
<hero-detail (deleted)="onHeroDeleted()"></hero-detail>
<div my-click (my-click)="clicked=$event">click me</div>
<!-- #enddocregion event-binding-syntax-1 -->
{{clicked}}
<br><br>
<div>
<!-- #docregion 2-way-binding-syntax-1 -->
<input [(ng-model)]="heroName">
<!-- #enddocregion 2-way-binding-syntax-1 -->
Hero Name: {{heroName}}
</div>
<br><br>
<!-- #docregion attribute-binding-syntax-1 -->
<button [attr.aria-label]="help">help</button>
<!-- #enddocregion attribute-binding-syntax-1 -->
<br><br>
<!-- #docregion class-binding-syntax-1 -->
<div [class.special]="isSpecial">Special</div>
<!-- #enddocregion class-binding-syntax-1 -->
<br><br>
<!-- #docregion style-binding-syntax-1 -->
<button [style.color] = "isSpecial ? 'red' : 'green'">
<!-- #enddocregion style-binding-syntax-1 -->
button</button>
<hr><h2>kebab-case</h2>
<!-- #docregion bad-mixed-case -->
<!-- BAD: mixed case target names don't work
<label [textContent] = "title"></label>
<hero-detail [isActive] = "isActive"></hero-detail>
-->
<!-- #enddocregion bad-mixed-case -->
<!-- #docregion kebab-case -->
<!-- lower kebab-case -->
<label [text-content] = "title"></label>
<hero-detail [is-active] = "isActive"></hero-detail>
<!-- #enddocregion kebab-case -->
<!-- property vs. attribute -->
<hr><h2>Property vs. Attribute (img examples)</h2>
<!-- examine the following <img> tag in the browser tools -->
<img src="images/ng-logo.png"
[src]="heroImageUrl">
<br><br>
<img [src]="iconUrl"/>
<img bind-src="heroImageUrl"/>
<img [attr.src]="villainImageUrl"/>
<!-- buttons -->
<hr><h2>Buttons</h2>
<button>Enabled (but does nothing)</button>
<button disabled>Disabled</button>
<button disabled=false>Still disabled</button>
<br><br>
<button disabled>disabled by attribute</button>
<button [disabled]="isUnchanged">disabled by property binding</button>
<br><br>
<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
<button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>
<!-- property binding -->
<hr><h2>Property Binding</h2>
<!-- #docregion property-binding-1 -->
<img [src]="heroImageUrl">
<!-- #enddocregion property-binding-1 -->
<!-- #docregion property-binding-2 -->
<button [disabled]="isUnchanged">Cancel</button>
<!-- #enddocregion property-binding-2 -->
<!-- #docregion property-binding-3 -->
<div [ng-class]="'special'">NgClass is special</div>
<!-- #enddocregion property-binding-3 -->
<!-- #docregion property-binding-4 -->
<hero-detail [hero]="selectedHero"></hero-detail>
<!-- #enddocregion property-binding-4 -->
<!-- #docregion property-binding-5 -->
<img bind-src="heroImageUrl">
<!-- #enddocregion property-binding-5 -->
<!-- #docregion property-binding-6 -->
<!-- Doesn't work! HeroDetailComponent expects a Hero, not a string -->
<hero-detail hero="…what do we do here??? …"></hero-detail>
<!-- #enddocregion property-binding-6 -->
<!-- #docregion property-binding-v-interpolation -->
<img src="{{heroImageUrl}}">
<img [src]="'' + heroImageUrl">
<div>The title is {{title}}</div>
<div [text-content]="'The title is '+title"></div>
<!-- #enddocregion property-binding-v-interpolation -->
<!-- attribute binding -->
<hr><h2>Attribute Binding</h2>
<!-- create and set a colspan attribute -->
<!-- #docregion attrib-binding-colspan -->
<table border=1>
<!-- expression calculates colspan=2 -->
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
<!-- ERROR: There is no `colspan` property to set!
<tr><td colspan="{{1+1}}">Three-Four</td></tr>
-->
<tr><td>Five</td><td>Six</td></tr>
</table>
<!-- #enddocregion attrib-binding-colspan -->
<br>
<!-- #docregion attrib-binding-aria -->
<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
<!-- #enddocregion attrib-binding-aria -->
<br><br>
<!-- The following effects are not discussed in the chapter -->
<div>
<!-- any use of [attr.disabled] creates the disabled attribute -->
<button [attr.disabled]="isUnchanged">Disabled</button>
<button [attr.disabled]="!isUnchanged">Disabled as well</button>
<!-- can't remove it with [attr.disabled] either -->
<button disabled [attr.disabled]>Still disabled</button>
<!-- we'd have to remove it with property binding -->
<button disabled [disabled]="false">Enabled (but inert)</button>
</div>
<!-- class binding -->
<hr><h2>Class Binding</h2>
<!-- #docregion class-binding-1 -->
<!-- standard class attribute setting -->
<div class="bad curly special">Bad curly special</div>
<!-- #enddocregion class-binding-1 -->
<!-- #docregion class-binding-2 -->
<!-- reset all class names with a string binding -->
<div class="bad curly special"
[class]="'bad curly'">Bad curly</div>
<!-- #enddocregion class-binding-2 -->
<!-- #docregion class-binding-3 -->
<!-- #docregion class-binding-3a -->
<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>
<!-- #enddocregion class-binding-3a -->
<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
[class.special]="!isSpecial">This one is not so special</div>
<!-- #enddocregion class-binding-3 -->
<div bind-class.special="isSpecial">This class binding is special too</div>
<!--style binding -->
<hr><h2>Style Binding</h2>
<!-- #docregion style-binding-1 -->
<button [style.color] = "isSpecial ? 'red' : 'green'">Red</button>
<button [style.background-color]="canSave ?'cyan' : 'grey'" >Save</button>
<!-- #enddocregion style-binding-1 -->
<!-- #docregion style-binding-2 -->
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
<!-- #enddocregion style-binding-2 -->
<!-- event binding -->
<hr><h2>Event Binding</h2>
<!-- #docregion event-binding-1 -->
<button (click)="onSave()">Save</button>
<!-- #enddocregion event-binding-1 -->
<!-- #docregion event-binding-2 -->
<button on-click="onSave()">On Save</button>
<!-- #enddocregion event-binding-2 -->
<div>
<!-- #docregion event-binding-3 -->
<!-- `my-click` is an event on the custom `MyClickDirective` -->
<div my-click (my-click)="clickity=$event">click with my-click</div>
<!-- #enddocregion event-binding-3 -->
{{clickity}}
</div>
<!-- binding to a nested component -->
<!-- #docregion event-binding-to-component -->
<hero-detail (deleted)="onHeroDeleted($event)" [hero]="currentHero">
</hero-detail>
<!-- #enddocregion event-binding-to-component -->
<br>
<big-hero-detail
(deleted)="onHeroDeleted($event)"
[hero]="currentHero">
</big-hero-detail>
<!-- #docregion event-binding-bubbling -->
<div class="parent-div" (click)="onClickMe($event)">Click me
<div class="child-div">Click me too!</div>
</div>
<!-- #enddocregion event-binding-bubbling -->
<br><br>
<!-- #docregion event-binding-no-propagation -->
<!-- Will save only once -->
<div (click)="onSave()">
<button (click)="onSave()">Save, no propagation</button>
</div>
<!-- #enddocregion event-binding-no-propagation -->
<br><br>
<!-- #docregion event-binding-propagation -->
<!-- Will save twice -->
<div (click)="onSave()">
<button (click)="onSave() || true">Save w/ propagation</button>
</div>
<!-- #enddocregion event-binding-propagation -->
<br><br>
<!-- Two way data binding unwound;
passing the changed display value to the event handler via `$event` -->
<hr><h2>NgModel Binding</h2>
<h3>Result: {{currentHero.firstName}}</h3>
<!-- #docregion without-NgModel -->
<input [value]="currentHero.firstName"
(input)="currentHero.firstName=$event.target.value" >
<!-- #enddocregion without-NgModel -->
without NgModel
<br>
<!-- #docregion NgModel-1 -->
<input [(ng-model)]="currentHero.firstName">
<!-- #enddocregion NgModel-1 -->
[(ng-model)]
<br>
<!-- #docregion NgModel-2 -->
<input bindon-ng-model="currentHero.firstName">
<!-- #enddocregion NgModel-2 -->
bindon-ng-model
<br>
<!-- #docregion NgModel-3 -->
<input
[ng-model]="currentHero.firstName"
(ng-model-change)="currentHero.firstName=$event">
<!-- #enddocregion NgModel-3 -->
(ng-model-change) = "...firstName=$event"
<br>
<!-- #docregion NgModel-4 -->
<input
[ng-model]="currentHero.firstName"
(ng-model-change)="setUpperCaseFirstName($event)">
<!-- #enddocregion NgModel-4 -->
(ng-model-change) = "setUpperCaseFirstName($event)"
<br>
<!-- NgClass binding -->
<hr><h2>NgClass Binding</h2>
<p>setClasses returns {{setClasses() | json}}</p>
<!-- #docregion NgClass-1 -->
<div [ng-class]="setClasses()">This div is saveable and special</div>
<!-- #enddocregion NgClass-1 -->
<div [ng-class]="setClasses()" #class-div>
After setClasses(), the classes are "{{classDiv.className}}"
</div>
<!-- not used in chapter -->
<div [ng-class]="isSpecial ? 'special' : ''">This div is special</div>
<div class="bad curly special">Bad curly special</div>
<div [ng-class]="{bad:false, curly:true, special:true}">Curly special</div>
<!-- NgStyle binding -->
<hr><h2>NgStyle Binding</h2>
<!-- #docregion NgStyle-1 -->
<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
This div is x-large
</div>
<!-- #enddocregion NgStyle-1 -->
<p>setStyles returns {{setStyles() | json}}</p>
<!-- #docregion NgStyle-2 -->
<div [ng-style]="setStyles()">
This div is italic, normal weight, and x-large
</div>
<!-- #enddocregion NgStyle-2 -->
<div [ng-style]="setStyles()" #style-div>
After setStyles(), the styles are "{{getStyles(styleDiv)}}"
</div>
<!-- not used in chapter -->
<!-- NgIf binding -->
<hr><h2>NgIf Binding</h2>
<!-- #docregion NgIf-1 -->
<div *ng-if="currentHero">Hello, {{currentHero.firstName}}</div>
<!-- #enddocregion NgIf-1 -->
<!-- #docregion NgIf-2 -->
<!-- not displayed because nullHero is falsey.
`nullHero.firstName` never has a chance to fail -->
<div *ng-if="nullHero">Hello, {{nullHero.firstName}}</div>
<!-- Hero Detail is not in the DOM because isActive is false-->
<hero-detail *ng-if="isActive"></hero-detail>
<!-- #enddocregion NgIf-2 -->
<!-- NgIf binding with template (no *) -->
<template [ng-if]="currentHero">Add {{currentHero.firstName}} with template</template>
<!-- Does not show because isActive is false! -->
<div>Hero Detail removed from DOM (via template) because isActive is false</div>
<template [ng-if]="isActive">
<hero-detail></hero-detail>
</template>
<!-- #docregion NgIf-3 -->
<!-- isSpecial is true -->
<div [class.hidden]="!isSpecial">Show with class</div>
<div [class.hidden]="isSpecial">Hide with class</div>
<!-- HeroDetail is in the DOM but hidden -->
<hero-detail [class.hidden]="isSpecial"></hero-detail>
<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
<div [style.display]="isSpecial ? 'none' : 'block'">Hide with style</div>
<!-- #enddocregion NgIf-3 -->
<!-- NgSwitch binding -->
<hr><h2>NgSwitch Binding</h2>
<fieldset #toe-picker (click)="null" >
<input type="radio" name="toes" value="Eenie">Eenie
<input type="radio" name="toes" checked value="Meanie">Meanie
<input type="radio" name="toes" value="Miney">Miney
<input type="radio" name="toes" value="Moe">Moe
<input type="radio" name="toes" value="???">???
</fieldset>
<!-- #docregion NgSwitch -->
<div class="toe">You picked
<span [ng-switch]="toeChoice(toePicker)">
<template [ng-switch-when]="'Eenie'">Eenie</template>
<template [ng-switch-when]="'Meanie'">Meanie</template>
<template [ng-switch-when]="'Miney'">Miney</template>
<template [ng-switch-when]="'Moe'">Moe</template>
<template ng-switch-default>Other</template>
</span>
</div>
<!-- #enddocregion NgSwitch -->
<!-- NgFor binding -->
<hr><h2>NgFor Binding</h2>
<div class="box">
<!-- #docregion NgFor-1 -->
<div *ng-for="#hero of heroes">{{hero.fullName}}</div>
<!-- #enddocregion NgFor-1 -->
</div>
<br>
<div class="box">
<!-- *ng-for w/ hero-detail Component -->
<!-- #docregion NgFor-2 -->
<hero-detail *ng-for="#hero of heroes" [hero]="hero"></hero-detail>
<!-- #enddocregion NgFor-2 -->
</div>
<br>
<div class="box">
<!-- Ex: 1 - Hercules Son of Zeus -->
<!-- #docregion NgFor-3 -->
<div *ng-for="#hero of heroes, #i=index">{{i+1}} - {{hero.fullName}}</div>
<!-- #enddocregion NgFor-3 -->
</div>
<br>
<!-- * and template -->
<hr><h2>* and Template</h2>
<h3>NgIf expansion</h3>
<!-- #docregion Template-1 -->
<hero-detail *ng-if="currentHero" [hero]="currentHero"></hero-detail>
<!-- #enddocregion Template-1 -->
<!-- #docregion Template-2 -->
<template [ng-if]="currentHero">
<hero-detail [hero]="currentHero"></hero-detail>
</template>
<!-- #enddocregion Template-2 -->
<h3>NgFor expansion</h3>
<div class="box">
<!-- ng-for w/ hero-detail Component and a template "attribute" directive -->
<!-- #docregion Template-3 -->
<hero-detail template="ng-for #hero of heroes" [hero]="hero"></hero-detail>
<!-- #enddocregion Template-3 -->
</div>
<br>
<div class="box">
<!-- ng-for w/ hero-detail Component inside a template element -->
<!-- #docregion Template-4 -->
<template ng-for #hero [ng-for-of]="heroes">
<hero-detail [hero]="hero"></hero-detail>
</template>
<!-- #enddocregion Template-4 -->
</div>
<!-- template local variable -->
<hr><h2>Template local variables</h2>
<!-- #docregion var-phone -->
<!-- phone refers to the input element; pass its `value` to an event handler -->
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>
<!-- fax refers to the input element; pass its `value` to an event handler -->
<input var-fax placeholder="phone number">
<button (click)="callFax(fax.value)">Fax</button>
<!-- #enddocregion var-phone -->
<h4>Example Form</h4>
<!-- #docregion var-form -->
<!-- #docregion var-form-a -->
<form (ng-submit)="onSubmit(theForm)" #theForm="form">
<!-- #enddocregion var-form-a -->
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" required ng-control="firstName"
[(ng-model)]="currentHero.firstName">
</div>
<!-- #docregion var-form-a -->
<button type="submit" [disabled]="!theForm.form.valid">Submit</button>
</form>
<!-- #enddocregion var-form-a -->
<!-- #enddocregion var-form -->
<br><br>
<!-- btn refers to the button element; show its disabled state -->
<button #btn disabled [text-content]="'disabled by attribute: '+btn.disabled"></button>
<!-- inputs and output -->
<hr><h2>Inputs and Outputs</h2>
<!-- #docregion io-1 -->
<img [src]="iconUrl"/>
<button (click)="onSave()">Save</button>
<!-- #enddocregion io-1 -->
<!-- #docregion io-2 -->
<hero-detail [hero]="currentHero" (deleted)="onHeroDeleted($event)">
</hero-detail>
<!-- #enddocregion io-2 -->
<div my-click2 (my-click)="clicked2=$event">my-click2</div>
{{clicked2}}
<!-- Pipes -->
<hr><h2>Pipes</h2>
<!-- #docregion pipes-1 -->
<!-- Force title to uppercase -->
<div>{{ title | uppercase }}</div>
<!-- #enddocregion pipes-1 -->
<!-- #docregion pipes-2 -->
<!-- Pipe chaining: force title to uppercase, then to lowercase -->
<div>{{ title | uppercase | lowercase }}</div>
<!-- #enddocregion pipes-2 -->
<!-- #docregion pipes-3 -->
<!-- pipe with configuration argument => "February 25, 1970" -->
<div>Birthdate: {{currentHero?.birthdate | date:'longDate'}}</div>
<!-- #enddocregion pipes-3 -->
<!-- #docregion pipes-json -->
<div>{{currentHero | json}}</div>
<!-- Output:
{ "firstName": "Hercules", "lastName": "Son of Zeus",
"birthdate": "1970-02-25T08:00:00.000Z",
"url": "http://www.imdb.com/title/tt0065832/",
"rate": 325, "id": 1 }
-->
<!-- #enddocregion pipes-json -->
<div>Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}</div>
<div>
<!-- pipe price to USD and display the $ symbol -->
<label>Price: </label>{{product.price | currency:'USD':true}}
</div>
<!-- Null values and the Elvis operator -->
<hr><h2>Elvis</h2>
<div>
<!-- #docregion elvis-1 -->
The title is {{ title }}
<!-- #enddocregion elvis-1 -->
</div>
<div>
<!-- #docregion elvis-2 -->
The current hero's name is {{currentHero?.firstName}}
<!-- #enddocregion elvis-2 -->
</div>
<div>
<!-- #docregion elvis-3 -->
The current hero's name is {{currentHero.firstName}}
<!-- #enddocregion elvis-3 -->
</div>
<!--
The null hero's name is {{nullHero.firstName}}
See console log
TypeError: Cannot read property 'firstName' of null in [null]
-->
<!-- #docregion elvis-4 -->
<!--No hero, div not displayed, no error -->
<div *ng-if="nullHero">The null hero's name is {{nullHero.firstName}}</div>
<!-- #enddocregion elvis-4 -->
<div>
<!-- #docregion elvis-5 -->
The null hero's name is {{nullHero && nullHero.firstName}}
<!-- #enddocregion elvis-5 -->
</div>
<div>
<!-- #docregion elvis-6 -->
<!-- No hero, no problem! -->
The null hero's name is {{nullHero?.firstName}}
<!-- #enddocregion elvis-6 -->
</div>
<!-- Todo: discuss this in the Style binding section -->
<!-- enums in bindings -->
<hr><h2>Enums in binding</h2>
<p>The name of the Color.Red enum is {{Color[Color.Red]}}</p>
<p>The current color number is {{color}}</p>
<p><button [style.color]="Color[color]" (click)="colorToggle()">Enum Toggle</button>

134
public/docs/_examples/template-syntax/ts/src/app/app.component.ts Normal file
View File

@ -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 '+ (<HTMLElement>event.target).innerHTML : '';
this.alert('Canceled.'+evtMsg)
}
onClickMe(event:KeyboardEvent){
let evtMsg = event ? ' Event target class is '+ (<HTMLElement>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 '+ (<HTMLElement>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; i<choices.length; i++){
var choice = <HTMLInputElement>choices[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'
}

383
public/docs/_examples/template-syntax/ts/src/app/app.html
View File

@ -1,383 +0,0 @@
<!-- Interpolation and expressions</h1> -->
<h3>My First Angular Application</h3>
<h3>
{{title}}
<img src="{{heroImageUrl}}" style="height:30px">
</h3>
<p>My current hero is {{currentHero.firstName}}</p>
<div title="Hello {{currentHero.firstName}}">
Hey there, {{currentHero.firstName}}
</div>
<h3 [text-content]="'The title is '+title"></h3>
<h3>The title is {{title}}</h3>
<h3>The sum of 1 + 1 is not {{1+1+getVal()}}</h3>
<h3 id="3" #f>The element id is {{f.id}}</h3>
<hr>
<img src="{{heroImageUrl}}"/>
<img [src]="'' + heroImageUrl"/>
<h3>The title is {{title}}</h3>
<h3 [text-content]="'The title is '+title"></h3>
<!-- New Mental Model -->
<hr>
<div class="special">Mental Model</div>
<div class="special">
<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
<img src="images/hero.png">
<button disabled>Save</button>
</div>
<div *ng-if="false">
<hero-detail></hero-detail>
</div>
<hr>
<!-- BAD: No Mixed Case
<h3 [textContent]="title"></h3>
-->
<!-- property over attribute -->
<!-- examine the following <img> tag in the browser tools -->
<img src="images/ng-logo.png"
[src]="heroImageUrl">
<hr>
<h3 [text-content]="title"></h3>
<hr/>
<img [src]="iconUrl"/>
<img bind-src="heroImageUrl"/>
<img [attr.src]="villainImageUrl"/>
<!-- buttons -->
<hr>
<button>Enabled</button>
<button disabled>Disabled</button>
<button disabled=false>Still disabled</button>
<hr>
<button disabled>disabled by attribute</button>
<button [disabled]="isUnchanged">disabled by property binding</button>
<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
<button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>
<hr>
<!-- event binding -->
<button (click)="onSave()">Save</button>
<button on-click="onSave()">On Save</button>
<button (click)="onSave() || true">Save w/ propagation</button>
<button (click)="onClickMe()">Click me!</button>
<div class="parent-div" (click)="onClickMe($event)">Click me
<div class="child-div">Click me too!</div>
</div>
<click-me></click-me>
<h4>keyup loop-back component</h4>
<loop-back></loop-back>
<key-up></key-up>
<key-up2></key-up2>
<key-up3></key-up3>
<br>
<div class="box">
<little-tour></little-tour>
</div>
<!-- attribute binding -->
<hr>
<!-- any value creates the disabled attribute -->
<button [attr.disabled]="isUnchanged">Disabled</button>
<button [attr.disabled]="isUnchanged">Disabled as well</button>
<!-- lack of expression removes the attribute -->
<button disabled [attr.disabled]>Enabled</button>
<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
<!-- create and set a span attribute -->
<table border=1>
<tr><td>One</td><td>Two</td></tr>
<!-- ERROR: There is no `colspan` property to set!
<tr><td colspan="{{1+1}}">Three-Four</td></tr>
-->
<!-- expression calculates colspan=2 -->
<tr><td [attr.colspan]="1 + 1">Five-Six</td></tr>
</table>
<hr>
<!-- class binding -->
<hr>
<div class="special">The class is special</div>
<div [class]="'special'">The class is special</div>
<!-- toggle the "special" class on and ohf -->
<div [class.special]="isSpecial">The class binding is special</div>
<div class="special" [class.special]="!isSpecial">This one is not so special</div>
<div bind-class.special="isSpecial">This class binding is special too</div>
<!--style binding -->
<hr>
<button [style.color] = "isSpecial ? 'red' : 'green'">Red</button>
<button [style.background-color]="canSave ?'cyan' : 'grey'" >Save</button>
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
<!-- binding to a nested component -->
<hr>
<div>{{currentHero?.firstName}}</div>
<hero-detail [hero]="currentHero" (deleted)="onDeleted($event)"></hero-detail>
<!-- Two way data binding unwound;
passing the changed display value to the event handler via `$event` -->
<hr>
<input [value]="currentHero.firstName"
(input)="currentHero.firstName=$event.target.value" >
<br>
<input [(ng-model)]="currentHero.firstName">
<br>
<input
[ng-model]="currentHero.firstName"
(ng-model-change)="currentHero.firstName=$event">
<br>
<input
[ng-model]="currentHero.lastName"
(ng-model-change)="setLastName($event)">
<br>
<div>{{currentHero.fullName}}</div>
<!-- NgClass binding -->
<hr>
<div [ng-class]="isSpecial ? special : ''">This div is special</div>
<div [ng-class]="setClasses()">This div is saveable and special</div>
<div [ng-class]="setClasses()" #class-div>
After setClasses(), the classes are "{{classDiv.className}}"
</div>
<!-- NgStyle binding -->
<hr>
<div [style.font-size]="isSpecial ? 'larger' : 'smaller'" >This div is larger</div>
<div [ng-style]="setStyles()">This div is italic, normal weight, and larger</div>
<div [ng-style]="setStyles()" #class-div>
After setStyles(), the styles are "{{getStyles(classDiv)}}"
</div>
<!-- NgIf binding -->
<hr>
<div><b>NgIf Binding</b></div>
<div *ng-if="currentHero">Add {{currentHero.firstName}}</div>
<div *ng-if="nullHero">Remove {{nullHero.firstName}}</div>
<div>Hero Detail removed from DOM because isActive is false</div>
<hero-detail *ng-if="isActive" [hero]="currentHero"></hero-detail>
<!-- NgIf binding with template (no *) -->
<template [ng-if]="currentHero">Add {{currentHero.firstName}} with template</template>
<!-- Does not show because isActive is false! -->
<div>Hero Detail removed from DOM (via template) because isActive is false</div>
<template [ng-if]="isActive">
<hero-detail [hero]="currentHero"></hero-detail>
</template>
<!-- isSpecial is true -->
<div [class.hidden]="!isSpecial">Show with class</div>
<div [class.hidden]="isSpecial">Hide with class</div>
<hero-detail [class.hidden]="isSpecial" [hero]="currentHero"></hero-detail>
<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
<div [style.display]="isSpecial ? 'none' : 'block'">Hide with style</div>
<!-- NgSwitch binding -->
<hr>
<div><b>NgSwitch Binding</b></div>
<fieldset #toe-picker (click)="null" >
<input type="radio" name="toes" value="Eenie">Eenie
<input type="radio" name="toes" checked value="Meanie">Meanie
<input type="radio" name="toes" value="Miney">Miney
<input type="radio" name="toes" value="Moe">Moe
<input type="radio" name="toes" value="???">???
</fieldset>
<div class="toe">You picked
<span [ng-switch]="toeChoice(toePicker)">
<template [ng-switch-when]="'Eenie'">Eenie</template>
<template [ng-switch-when]="'Meanie'">Meanie</template>
<template [ng-switch-when]="'Miney'">Miney</template>
<template [ng-switch-when]="'Moe'">Moe</template>
<template ng-switch-default>Other</template>
</span>
</div>
<!-- NgFor binding -->
<hr>
<div><b>NgFor Binding</b></div>
<br>
<div class="box">
<!-- *ng-for of div w/ interpolation -->
<div *ng-for="#hero of heroes">{{hero.fullName}}</div>
</div>
<br>
<div class="box">
<!-- *ng-for of div w/ interpolation -->
<!-- Ex: 1 - Hercules Son of Zeus -->
<div *ng-for="#hero of heroes, #i=index">{{i+1}} - {{hero.fullName}}</div>
</div>
<br>
<div class="box">
<!-- *ng-for w/ little-hero Component -->
<little-hero *ng-for="#hero of heroes" [hero]="hero"></little-hero>
</div>
<br>
<div class="box">
<!-- ng-for w/ little-hero Component and a template "attribute" directive -->
<little-hero template="ng-for #hero of heroes" [hero]="hero"></little-hero>
</div>
<br>
<div class="box">
<!-- ng-for w/ little-hero Component inside a template element -->
<template ng-for #hero [ng-for-of]="heroes">
<little-hero [hero]="hero"></little-hero>
</template>
</div>
<!-- Pipe operator -->
<hr>
<!-- Force title to uppercase -->
<div>{{ title | uppercase }}</div>
<!-- Pipe chaining: force title to uppercase, then to lowercase -->
<div>{{ title | uppercase | lowercase }}</div>
<!-- pipe with configuration argument -->
<div>Birthdate: {{currentHero?.birthdate | date:'longDate'}}</div>
<div>Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}</div>
<div>
<!-- pipe price to USD and display the $ symbol -->
<label>Price: </label>{{product.price | currency:'USD':true}}
</div>
<!-- Null values and the Elvis operator -->
<hr>
<div>The title is {{ title }}</div>
<div>The current hero's name is {{currentHero?.firstName}}</div>
<div>The current hero's name is {{currentHero.firstName}}</div>
<!--
<div>The null hero's name is {{nullHero.firstName}}</div>
See console log
TypeError: Cannot read property 'firstName' of null in [null]
-->
<!--No hero, div not displayed, no error -->
<div *ng-if="nullHero">The null hero's name is {{nullHero?.firstName}}</div>
<!--guard in the expression, no display, no error
[FAILS No short-circuiting of logical operators]
<div>The null hero's name is {{nullHero && nullHero.firstName}}</div>
-->
<!-- No hero, no problem! -->
<div>The null hero's name is {{nullHero?.firstName}}</div>
<!-- template local variable -->
<hr>
<h3>Template Driven Form</h3>
<form (ng-submit)="onSubmit(hf)" #hf="form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" required
ng-control="firstName"
[(ng-model)]="currentHero.firstName">
</div>
<button type="submit" [disabled]="!hf.form.valid">Submit</button>
</form>
<hr>
<!-- btn refers to the button element; show its disabled state -->
<button #btn disabled [text-content]="'disabled by attribute: '+btn.disabled"></button>
<!-- phone refers to the input element; pass its `value` to an event handler -->
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>
<!-- ohficFax refers to the input element; pass its `value` to an event handler -->
<input var-ohfice-fax placeholder="phone number">
<button (click)="callFax(ohficeFax.value)">Fax</button>
<!-- enums in bindings -->
<hr>
<h2>Enums in bindings </h2>
<p>The name of the Color.Red enum is {{Color[Color.Red]}}</p>
<p>The current color number is {{color}}</p>
<p><button [style.color]="Color[color]" (click)="colorToggle()">Enum Toggle</button>

299
public/docs/_examples/template-syntax/ts/src/app/app.ts
View File

@ -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: `
<div style="border: 1px solid black; padding:3px">
<div><b>Hero Detail: {{hero?.fullName}}</b></div>
<div>First: {{hero?.firstName}}</div>
<div>Last: {{hero?.lastName}}</div>
<div>Birthdate: {{hero?.birthdate | date:'longDate'}}</div>
<div>Web: <a href="{{hero?.url}}" target="_blank">{{hero?.url}}</a></div>
<div>Rate/hr: {{hero?.rate | currency:'EUR'}}</div>
<button (click)="onDelete()">Delete</button>
</div>
`
})
class HeroDetailComponent {
@Input()
hero: Hero;
@Output()
deleted = new EventEmitter<Hero>();
onDelete() {
this.deleted.next(this.hero);
}
}
@Component({
selector: 'little-hero',
template: '<div>{{hero?.fullName}}</div>'
})
class LittleHeroComponent {
@Input()
hero: Hero;
}
@Component({
selector: 'click-me',
template: '<button (click)="onClickMe()">Click me</button>'
})
class ClickMeComponent {
onClickMe(){
alert('You are my hero!')
}
}
@Component({
selector: 'loop-back',
template: '<input #box (keyup)="0"> <p>{{box.value}}</p>'
})
class LoopbackComponent {
}
@Component({
selector: 'key-up',
template: `
<h4>Give me some keys!</h4>
<div><input (keyup)="onKey($event)"><div>
<div>{{values}}</div>
`
})
class KeyUpComponent {
values='';
onKey(event:KeyboardEvent) {
this.values += (<HTMLInputElement>event.target).value + ' | ';
}
}
@Component({
selector: 'key-up2',
template: `
<h4>Give me some more keys!</h4>
<div><input #box (keyup)="onKey(box.value)"><div>
<div>{{values}}</div>
`
})
class KeyUpComponentV2 {
values='';
onKey(value:string) {
this.values += value + ' | ';
}
}
@Component({
selector: 'key-up3',
template: `
<h4>Type away! Press [enter] when done.</h4>
<div><input #box (keyup.enter)="values=box.value"><div>
<div>{{values}}</div>
`
})
class KeyUpComponentV3 {
values='';
}
@Component({
selector: 'little-tour',
template: `
<h4>Little Tour of Heroes</h4>
<input #box
(keyup.enter)="addHero(box.value)"
(blur)="addHero(box.value)">
<button (click)=addHero(box.value)>Add</button>
<ul><li *ng-for="#hero of heroes">{{hero}}</li></ul>
`,
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 '+ (<HTMLElement>event.target).innerHTML : '';
alert('Canceled.'+evtMsg)
}
onClickMe(event:KeyboardEvent){
let evtMsg = event ? ' Event target class is '+ (<HTMLElement>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 '+ (<HTMLElement>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; i<choices.length; i++){
var choice = <HTMLInputElement>choices[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);

3
public/docs/_examples/template-syntax/ts/src/app/boot.ts Normal file
View File

@ -0,0 +1,3 @@
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);

11
public/docs/_examples/template-syntax/ts/src/app/decorator.directive.ts Normal file
View File

@ -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)
}
}

70
public/docs/_examples/template-syntax/ts/src/app/hero-detail.component.ts Normal file
View File

@ -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: `
<div id="lh{{id}}">
{{hero?.fullName}}
<img src="{{heroImageUrl}}" style="height:24px">
<a href="#lh{{id}}" (click)="onDelete()">delete</a>
</div>`
// #docregion input-output-2
})
// #enddocregion input-output-2
export class HeroDetailComponent {
hero: Hero;
// #docregion deleted
deleted = new EventEmitter<Hero>();
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: `
<div style="border: 1px solid black; padding:3px">
<img src="{{heroImageUrl}}" style="float:left; margin-right:8px;">
<div><b>{{hero?.fullName}}</b></div>
<div>First: {{hero?.firstName}}</div>
<div>Last: {{hero?.lastName}}</div>
<div>Birthdate: {{hero?.birthdate | date:'longDate'}}</div>
<div>Web: <a href="{{hero?.url}}" target="_blank">{{hero?.url}}</a></div>
<div>Rate/hr: {{hero?.rate | currency:'EUR'}}</div>
<br clear="all">
<button (click)="onDelete()">Delete</button>
</div>
`
})
export class BigHeroDetailComponent extends HeroDetailComponent {
// #docregion input-output-1
@Input() hero: Hero;
@Output() deleted = new EventEmitter<Hero>();
// #enddocregion input-output-1
onDelete() {
this.deleted.emit(this.hero);
}
}

30
public/docs/_examples/template-syntax/ts/src/app/hero.ts Normal file
View File

@ -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')
];
}

32
public/docs/_examples/template-syntax/ts/src/app/my-click.directive.ts Normal file
View File

@ -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<string>();
// #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<string>();
constructor(el: ElementRef){
el.nativeElement
.addEventListener('click', (event:Event) => {
this.clicks.emit('Click!');
});
}
}

4
public/docs/_examples/template-syntax/ts/src/index.html
View File

@ -9,14 +9,12 @@
System.config({
packages: {'app': {defaultExtension: 'js'}}
});
System.import('app/app');
System.import('app/boot');
</script>
</head>
<body>
<my-app>Loading...</my-app>
<hr>
<little-tour>Loading...</little-tour>
</body>
</html>

4
public/docs/_examples/template-syntax/ts/src/styles.css
View File

@ -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 }

1022
public/docs/ts/latest/guide/template-syntax.jade
View File

File diff suppressed because it is too large Load Diff

2
public/docs/ts/latest/guide/user-input.jade
View File

@ -5,6 +5,8 @@ include ../../../../_includes/_util-fns
we want to know about it. These user actions all raise DOM events.
In this chapter we learn to bind to those events using the Angular Event Binding syntax.
[Live Example](/resources/live-examples/user-input/ts/src/plnkr.html).
:marked
## Binding to User Input Events

BIN
public/resources/images/devguide/template-syntax/ng-model-anim.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB