diff --git a/public/docs/_examples/template-syntax/ts/.gitignore b/public/docs/_examples/template-syntax/ts/.gitignore new file mode 100644 index 0000000000..6724ce3596 --- /dev/null +++ b/public/docs/_examples/template-syntax/ts/.gitignore @@ -0,0 +1 @@ +src/**/*.js \ No newline at end of file diff --git a/public/docs/_examples/template-syntax/ts/images/hero.png b/public/docs/_examples/template-syntax/ts/images/hero.png new file mode 100644 index 0000000000..b60c3ecc30 Binary files /dev/null and b/public/docs/_examples/template-syntax/ts/images/hero.png differ diff --git a/public/docs/_examples/template-syntax/ts/images/ng-logo.png b/public/docs/_examples/template-syntax/ts/images/ng-logo.png new file mode 100644 index 0000000000..7929242740 Binary files /dev/null and b/public/docs/_examples/template-syntax/ts/images/ng-logo.png differ diff --git a/public/docs/_examples/template-syntax/ts/images/villain.png b/public/docs/_examples/template-syntax/ts/images/villain.png new file mode 100644 index 0000000000..d1e71cf00b Binary files /dev/null and b/public/docs/_examples/template-syntax/ts/images/villain.png differ diff --git a/public/docs/_examples/template-syntax/ts/package.json b/public/docs/_examples/template-syntax/ts/package.json new file mode 100644 index 0000000000..245a10d30a --- /dev/null +++ b/public/docs/_examples/template-syntax/ts/package.json @@ -0,0 +1,21 @@ +{ + "name": "angular2-template-syntax", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "tsc": "tsc -p src -w", + "start": "live-server --open=src" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "angular2": "2.0.0-alpha.44", + "systemjs": "0.19.2" + }, + "devDependencies": { + "live-server": "^0.8.1", + "typescript": "^1.6.2" + } +} diff --git a/public/docs/_examples/template-syntax/ts/src/app/app.html b/public/docs/_examples/template-syntax/ts/src/app/app.html new file mode 100644 index 0000000000..98f95b7f83 --- /dev/null +++ b/public/docs/_examples/template-syntax/ts/src/app/app.html @@ -0,0 +1,378 @@ + +

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
+ +
+ + + +
+ +
+ +
+ +
+ + + + +
+

+
+ + + + + + + +
+ + + + +
+ + + + + +
+ + + + + + + + + + + + + + +
Click me +
Click me too!
+
+ + + +

keyup loop-back component

+ + + + + + + +
+
+ +
+ + +
+ + + + + + + + + + + + + + + + + + +
OneTwo
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
+ + + + + +
+ + + + + + + + + +
+
{{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
+ + + + + + + + + + +
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
+
+ Eenie + Meanie + Miney + Moe + ??? +
+
You picked + + + + + + + +
+ + + + +
+
NgFor Binding
+
+ +
+ +
{{hero.fullName}}
+
+
+ +
+ + +
{{i+1}} - {{hero.fullName}}
+
+
+ +
+ + +
+
+ +
+ + +
+
+ +
+ + +
+ + + + + +
+ +
{{ title | uppercase }}
+ + +
{{ title | uppercase | lowercase }}
+ + +
Birthdate: {{currentHero?.birthdate | date:'longDate'}}
+ +
Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
+ + +
+ + {{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

+
+
+ + +
+ +
+
+ + + + + + + + + + + + diff --git a/public/docs/_examples/template-syntax/ts/src/app/app.ts b/public/docs/_examples/template-syntax/ts/src/app/app.ts new file mode 100644 index 0000000000..fe027bf51d --- /dev/null +++ b/public/docs/_examples/template-syntax/ts/src/app/app.ts @@ -0,0 +1,304 @@ +//**** Referenced in template-syntax and user-input chapters +// #docplaster + +// imports formatted for dev guide only +// #docregion little-tour-of-heroes-app +import {bootstrap, Component, CORE_DIRECTIVES} from 'angular2/angular2'; + +// #enddocregion little-tour-of-heroes-app + +import { + Input, Output, + Directive, + ElementRef, EventEmitter, + 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'}}
+
Web: {{hero?.url}}
+
Rate/hr: {{hero?.rate | currency:'EUR'}}
+ +
+ ` +}) +class HeroDetailComponent { + + @Input() + hero: Hero; + + @Output() + deleted = new EventEmitter(); + + onDelete() { + this.deleted.next(this.hero); + } +} + +@Component({ + selector: 'little-hero', + template: '
{{hero?.fullName}}
' +}) +class LittleHeroComponent { + @Input() + hero: Hero; +} + +// #docregion click-me-component +@Component({ + selector: 'click-me', + template: '' +}) +class ClickMeComponent { + onClickMe(){ + alert('You are my hero!') + } +} +// #enddocregion click-me-component + +// #docregion loop-back-component +@Component({ + selector: 'loop-back', + template: '

{{box.value}}

' +}) +class LoopbackComponent { +} +// #enddocregion loop-back-component + +// #docregion key-up-component +@Component({ + selector: 'key-up', + template: ` +

Give me some keys!

+
+
{{values}}
+ ` +}) +class KeyUpComponent { + values=''; + onKey(event) { + this.values += event.target.value + ' | '; + } +} +// #enddocregion key-up-component + +// #docregion key-up2-component +@Component({ + selector: 'key-up2', + template: ` +

Give me some more keys!

+
+
{{values}}
+ ` +}) +class KeyUpComponentV2 { + values=''; + onKey(value) { + this.values += value + ' | '; + } +} +// #enddocregion key-up2-component + + +// #docregion key-up3-component +@Component({ + selector: 'key-up3', + template: ` +

Type away! Press [enter] when done.

+
+
{{values}}
+ ` +}) +class KeyUpComponentV3 { + values=''; +} +// #enddocregion key-up3-component + +// #docregion little-tour-of-heroes-app +// #docregion little-tour-of-heroes-component +@Component({ + selector: 'little-tour', + template: ` +

Little Tour of Heroes

+ + +
  • {{hero}}
+ `, + directives: [CORE_DIRECTIVES] +}) +class LittleTour { + heroes=['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; + + addHero(newHero) { + if (newHero.value) { + this.heroes.push(newHero.value); + newHero.value = null; // clear the newHero textbox + } + } +} +// #enddocregion little-tour-of-heroes-component + +bootstrap(LittleTour); +// #enddocregion little-tour-of-heroes-app + +@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; + + currentHero = Hero.MockHeroes[0]; + + getStyles(el){ + 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){ + let evtMsg = event ? ' Event target is '+ event.target.innerHTML : ''; + alert('Canceled.'+evtMsg) + } + + onClickMe(event){ + let evtMsg = event ? ' Event target class is '+ event.target.className : ''; + alert('Click me.'+evtMsg) + } + + onDeleted(hero){ + alert('Deleted hero: '+ (hero && hero.firstName)) + } + + onSave(event){ + let evtMsg = event ? ' Event target is '+ event.target.innerText : ''; + alert('Saved.'+evtMsg) + } + + onSubmit(form){ + let evtMsg = form.valid ? + ' Form value is '+ JSON.stringify(form.value) : + ' Form is invalid'; + alert('Form submitted.'+evtMsg) + } + + product = { + name: 'frimfram', + price: 42 + }; + + setLastName(event){ + console.log(event); + this.currentHero.lastName = event; + } + + 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){ + let choices = picker.children; + for (let i=0; i + + + 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 new file mode 100644 index 0000000000..b2133e5103 --- /dev/null +++ b/public/docs/_examples/template-syntax/ts/src/styles.css @@ -0,0 +1,9 @@ +fieldset {border-style:none} +img {height: 100px;} +.box {border: 1px solid black; padding:3px} +.child-div {margin-left: 1em; font-weight: normal} +.hidden {display: none} +.parent-div {margin-top: 1em; font-weight: bold} +.special {font-weight:bold;} +.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/_examples/template-syntax/ts/src/tsconfig.json b/public/docs/_examples/template-syntax/ts/src/tsconfig.json new file mode 100644 index 0000000000..6a58b35a58 --- /dev/null +++ b/public/docs/_examples/template-syntax/ts/src/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "target": "ES5", + "module": "commonjs", + "sourceMap": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "removeComments": false, + "noImplicitAny": false + } +} \ No newline at end of file