diff --git a/public/docs/_examples/template-syntax/dart/lib/app_component.dart b/public/docs/_examples/template-syntax/dart/lib/app_component.dart new file mode 100644 index 0000000000..7d24be4155 --- /dev/null +++ b/public/docs/_examples/template-syntax/dart/lib/app_component.dart @@ -0,0 +1,148 @@ +// #docregion +library template_syntax.app_component; + +import 'dart:html'; +import 'dart:convert'; + +import 'package:angular2/angular2.dart'; +import 'package:template_syntax/hero.dart'; +import 'package:template_syntax/hero_detail_component.dart'; +import 'package:template_syntax/my_click_directive.dart'; + +enum _Color { Red, Green, Blue } + +@Component( + selector: 'my-app', + templateUrl: 'app_component.html', + directives: const [ + HeroDetailComponent, + BigHeroDetailComponent, + MyClickDirective, + MyClickDirective2 + ]) +class AppComponent { + String heroName; + String help; + String actionName = 'Go for it'; + String title = 'Template Syntax'; + String heroImageUrl = 'assets/images/hero.png'; + String villainImageUrl = 'assets/images/villain.png'; + String iconUrl = 'assets/images/ng-logo.png'; + String chosenToe; + int val = 2; + bool canSave = true; + bool isActive = false; + bool isSpecial = true; + bool isUnchanged = true; + bool isSelected = false; + _Color color = _Color.Red; + List heroes = Hero.MockHeroes; + Hero selectedHero = Hero.MockHeroes[0]; + Hero currentHero = Hero.MockHeroes[0]; + Hero nullHero = null; + Map product = {'name': 'frimfram', 'price': 42}; + Event clickity; + FormElement form; + + Map classes = { + 'saveable': false, // true + 'modified': false, // false + 'special': false // true + }; + + Map styles = { + 'font-style': 'normal', + 'font-weight': 'normal', + 'font-size': 'smaller' + }; + + Map styles2 = { + 'fontStyle': 'normal', + 'fontWeight': 'normal', + 'fontSize': 'smaller' + }; + + void alerter(String msg) => window.alert(msg); + void callFax(String value) => alerter('Faxing $value ...'); + void callPhone(String value) => alerter('Calling $value ...'); + void colorToggle() { + color = color == _Color.Red ? _Color.Blue : _Color.Red; + } + + int get getVal => val; + + void onCancel(MouseEvent event) { + DivElement el = event.target; + var evtMsg = event != null ? 'Event target is ${el.innerHtml}' : ''; + alerter('Canceled. $evtMsg'); + } + + void onClickMe(MouseEvent event) { + DivElement el = event.target; + var evtMsg = event != null ? 'Event target class is ${el.className}' : ''; + alerter('Click me. $evtMsg'); + } + + bool onSave([MouseEvent event = null]) { + var evtMsg = + event != null ? ' Event target is ${event.target.innerHtml}' : ''; + alerter('Saved.$evtMsg'); + return false; + } + + void onHeroDeleted(Hero hero) => alerter('Deleted hero: ${hero.firstName}'); + + void onSubmit(NgForm form) { + var evtMsg = form.valid + ? ' Form value is ${JSON.encode(form.value)}' + : ' Form is invalid'; + alerter('Form submitted. $evtMsg'); + } + + void setUpperCaseFirstName(String firstName) { + currentHero.firstName = firstName.toUpperCase(); + } + + String getStyles(Element el) { + var showStyles = setStyles(); + return JSON.encode(showStyles); + } + + // #docregion setStyles + Map setStyles() { + styles['font-style'] = canSave ? 'italic' : 'normal'; + styles['font-weight'] = !isUnchanged ? 'bold' : 'normal'; + styles['font-size'] = isSpecial ? 'x-large' : 'smaller'; + return styles; + } + // #enddocregion setStyles + + // #docregion setStyles2 + Map setStyles2() { + // camelCase style properties work too [PENDING: no, they don't] + styles2['fontStyle'] = canSave ? 'italic' : 'normal'; + styles2['fontWeight'] = !isUnchanged ? 'bold' : 'normal'; + styles2['fontSize'] = isSpecial ? 'x-large' : 'smaller'; + return styles2; + } + // #enddocregion setStyles2 + + Map setClasses() { + classes['saveable'] = canSave; + classes['modified'] = !isUnchanged; + classes['special'] = isSpecial; + + return classes; + } + + String toeChooser(Element picker) { + List choices = picker.children; + for (var i = 0; i < choices.length; i++) { + var choice = choices[i]; + if (choice.checked) { + chosenToe = choice.value; + return chosenToe; + } + } + } +} diff --git a/public/docs/_examples/template-syntax/dart/lib/app_component.html b/public/docs/_examples/template-syntax/dart/lib/app_component.html new file mode 100644 index 0000000000..5139df32c9 --- /dev/null +++ b/public/docs/_examples/template-syntax/dart/lib/app_component.html @@ -0,0 +1,667 @@ + +

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

+ +
+ +
Mental Model
+ + +
+

+ +
+ + + + +
+

+ +
+ + + +
+ +
+

+ + + + + +
click me
+ + +

+ +
+ + + + Hero Name: {{heroName}} +
+

+ + + + +

+ + +
Special
+ +

+ + + + + +

Property vs. Attribute (img examples)

+ + + +

+ + + + + + + + +

Buttons

+ + + + +

+ + +

+ + + + + +

Property Binding

+ + + + + + + + +
NgClass is special
+ + + + + + + + + + + + + + + + + +
The title is {{title}}
+
+ + + +

Attribute Binding

+ + + + + + + + + + +
One-Two
FiveSix
+ + +
+ + + + +

+ + +
+ + + + + + + + + + +
+ + + + + + +

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

+ + + + + + + + + + + + +

Event Binding

+ + + + + + + + + +
+ + + + +
click with myClick
+ + +{{clickity}} +
+ + + + + + + +
+ + + + + +
Click me +
Click me too!
+
+ +

+ + + +
+ +
+ +

+ + +
+ +
+ +

+ + + +

NgModel Binding

+ +

Result: {{currentHero.firstName}}

+ + + + +without NgModel +
+ + + +[(ngModel)] +
+ + + +bindon-ngModel +
+ + + +(ngModelChange) = "...firstName=$event" +
+ + + +(ngModelChange) = "setUpperCaseFirstName($event)" +
+ + + + +

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

Use setStyles() - CSS property names

+

setStyles returns {{setStyles() | json}}

+ +
+ This div is italic, normal weight, and x-large +
+ +
+ After setStyles(), the styles are "{{getStyles(styleDiv)}}" +
+ + +

Use setStyles2() - camelCase style property names

+

setStyles2 returns {{setStyles2() | json}}

+ +
+ This div is italic, normal weight, and x-large +
+ +
+ After setStyles2(), the styles are "{{getStyles(styleDiv2)}}" +
+ + + + + + +

NgIf Binding

+ + +
Hello, {{currentHero.firstName}}
+ + + + +
Hello, {{nullHero.firstName}}
+ + + + + + + + + + + +
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 + ??? +
+ +
+
Pick a toe
+
You picked + + + + + + + + + +
+ +
+ + +

NgFor Binding

+ +
+ +
{{hero.fullName}}
+ +
+
+ +
+ + + + +
+
+ +
+ + +
{{i + 1}} - {{hero.fullName}}
+ +
+
+ + +

* and Template

+ +

NgIf expansion

+ + + + + + + + +

NgFor expansion

+
+ + + + +
+
+ +
+ + + + +
+ + + + +

Template local variables

+ + + + + + + + + + + +

Example Form

+ + +
+ +
+ + +
+ + +
+ + +

+ + + + + +

Inputs and Outputs

+ + + + + + + + + + + + + + +

Pipes

+ + + +
{{ title | uppercase }}
+ + + + +
{{ title | uppercase | lowercase }}
+ + + + +
Birthdate: {{currentHero?.birthdate | date:'longDate'}}
+ + + + + + + + + +
Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
+ +
+ + +
+ + + +

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 != null && nullHero.firstName != null}} + +
+ +
+ + + The null hero's name is {{nullHero?.firstName}} + +
+ + + + +

Enums in binding

+ +

The name of the Color.Red enum is {{color}}

+

The current color number is {{color}}

+

diff --git a/public/docs/_examples/template-syntax/dart/lib/assets/images/hero.png b/public/docs/_examples/template-syntax/dart/lib/assets/images/hero.png new file mode 100644 index 0000000000..b60c3ecc30 Binary files /dev/null and b/public/docs/_examples/template-syntax/dart/lib/assets/images/hero.png differ diff --git a/public/docs/_examples/template-syntax/dart/lib/assets/images/ng-logo.png b/public/docs/_examples/template-syntax/dart/lib/assets/images/ng-logo.png new file mode 100644 index 0000000000..7929242740 Binary files /dev/null and b/public/docs/_examples/template-syntax/dart/lib/assets/images/ng-logo.png differ diff --git a/public/docs/_examples/template-syntax/dart/lib/assets/images/villain.png b/public/docs/_examples/template-syntax/dart/lib/assets/images/villain.png new file mode 100644 index 0000000000..d1e71cf00b Binary files /dev/null and b/public/docs/_examples/template-syntax/dart/lib/assets/images/villain.png differ diff --git a/public/docs/_examples/template-syntax/dart/lib/hero.dart b/public/docs/_examples/template-syntax/dart/lib/hero.dart new file mode 100644 index 0000000000..730cac5f7a --- /dev/null +++ b/public/docs/_examples/template-syntax/dart/lib/hero.dart @@ -0,0 +1,31 @@ +// #docregion +library template_syntax.hero; + +class Hero { + static int _nextId = 1; + + int id; + String firstName; + String lastName; + DateTime birthdate; + String url; + int rate = 100; + + Hero(this.firstName, {this.lastName, this.birthdate, this.url, this.rate}) { + id = _nextId++; + } + + static List MockHeroes = [ + new Hero('Hercules', + lastName: 'Son of Zeus', + birthdate: new DateTime(1970, 1, 25), + url: 'http://www.imdb.com/title/tt0065832/', + rate: 325), + new Hero('eenie', lastName: 'toe'), + new Hero('Meanie', lastName: 'Toe'), + new Hero('Miny', lastName: 'Toe'), + new Hero('Moe', lastName: 'Toe') + ]; + + String get fullName => '$firstName $lastName'; +} diff --git a/public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart b/public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart new file mode 100644 index 0000000000..11af1be00b --- /dev/null +++ b/public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart @@ -0,0 +1,67 @@ +// #docregion +library template_syntax.hero_detail_component; + +import 'package:angular2/angular2.dart'; +import 'package:template_syntax/hero.dart'; + +var nextHeroDetailId = 1; + +// #docregion input-output-2 +@Component( +// #enddocregion input-output-2 + selector: 'hero-detail', +// #docregion input-output-2 + inputs: const ['hero'], + outputs: const ['deleted'], +// #enddocregion input-output-2 + template: '''

+ {{hero?.fullName}} + + delete +
''' +// #docregion input-output-2 + ) +// #enddocregion input-output-2 +class HeroDetailComponent { + Hero hero; + // #docregion deleted + + String heroImageUrl = 'assets/images/hero.png'; + final EventEmitter deleted = new EventEmitter(); + + onDelete() { + deleted.add(hero); + } +// #enddocregion deleted +} + +@Component( + selector: 'big-hero-detail', + /* + inputs: ['hero'], + outputs: ['deleted'], + */ + template: '''
+ +
{{hero?.fullName}}
+
First: {{hero?.firstName}}
+
Last: {{hero?.lastName}}
+
Birthdate: {{hero?.birthdate | date:'longDate'}}
+
Web: {{hero?.url}}
+
Rate/hr: {{hero?.rate | currency:'EUR'}}
+
+ +
''') +class BigHeroDetailComponent extends HeroDetailComponent { + // #docregion input-output-1 + @Input() Hero hero; + @Output() + final EventEmitter deleted = new EventEmitter(); + // #enddocregion input-output-1 + + String heroImageUrl = 'assets/images/hero.png'; + + onDelete() { + deleted.add(hero); + } +} diff --git a/public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart b/public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart new file mode 100644 index 0000000000..c0aaa77e4b --- /dev/null +++ b/public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart @@ -0,0 +1,33 @@ +// #docregion +library template_syntax.my_click_directive; + +import 'dart:html'; + +import 'package:angular2/angular2.dart'; + +@Directive(selector: '[myClick]') +class MyClickDirective { + // #docregion my-click-output-1 + @Output() + final EventEmitter clicks = new EventEmitter(); + // #enddocregion my-click-output-1 + + MyClickDirective(ElementRef el) { + el.nativeElement.onClick.listen(this.clicks.add('Click!')); + } +} + +// #docregion my-click-output-2 +@Directive( +// #enddocregion my-click-output-2 + selector: '[myClick2]', +// #docregion my-click-output-2 + outputs: const ['clicks:myClick']) +// #enddocregion my-click-output-2 +class MyClickDirective2 { + final EventEmitter clicks = new EventEmitter(); + + MyClickDirective(ElementRef el) { + el.nativeElement.onClick.listen(this.clicks.add('Click!')); + } +} diff --git a/public/docs/_examples/template-syntax/dart/pubspec.yaml b/public/docs/_examples/template-syntax/dart/pubspec.yaml new file mode 100644 index 0000000000..5eca0898e5 --- /dev/null +++ b/public/docs/_examples/template-syntax/dart/pubspec.yaml @@ -0,0 +1,12 @@ +name: template_syntax +description: Template Syntax +version: 0.0.1 +dependencies: + angular2: 2.0.0-beta.0 + browser: ^0.10.0 +transformers: +- angular2: + platform_directives: + - 'package:angular2/common.dart#COMMON_DIRECTIVES' + - 'package:angular2/common.dart#FORM_DIRECTIVES' + entry_points: web/main.dart diff --git a/public/docs/_examples/template-syntax/dart/web/assets/images/hero.png b/public/docs/_examples/template-syntax/dart/web/assets/images/hero.png new file mode 100644 index 0000000000..b60c3ecc30 Binary files /dev/null and b/public/docs/_examples/template-syntax/dart/web/assets/images/hero.png differ diff --git a/public/docs/_examples/template-syntax/dart/web/assets/images/ng-logo.png b/public/docs/_examples/template-syntax/dart/web/assets/images/ng-logo.png new file mode 100644 index 0000000000..7929242740 Binary files /dev/null and b/public/docs/_examples/template-syntax/dart/web/assets/images/ng-logo.png differ diff --git a/public/docs/_examples/template-syntax/dart/web/assets/images/villain.png b/public/docs/_examples/template-syntax/dart/web/assets/images/villain.png new file mode 100644 index 0000000000..d1e71cf00b Binary files /dev/null and b/public/docs/_examples/template-syntax/dart/web/assets/images/villain.png differ diff --git a/public/docs/_examples/template-syntax/dart/web/index.html b/public/docs/_examples/template-syntax/dart/web/index.html new file mode 100644 index 0000000000..70b49ac772 --- /dev/null +++ b/public/docs/_examples/template-syntax/dart/web/index.html @@ -0,0 +1,13 @@ + + + + + Template Syntax + + + + + + Loading... + + \ No newline at end of file diff --git a/public/docs/_examples/template-syntax/dart/web/main.dart b/public/docs/_examples/template-syntax/dart/web/main.dart new file mode 100644 index 0000000000..771958fea6 --- /dev/null +++ b/public/docs/_examples/template-syntax/dart/web/main.dart @@ -0,0 +1,7 @@ +// #docregion +import 'package:angular2/bootstrap.dart'; +import 'package:template_syntax/app_component.dart'; + +main() { + bootstrap(AppComponent); +} diff --git a/public/docs/_examples/template-syntax/dart/web/style.css b/public/docs/_examples/template-syntax/dart/web/style.css new file mode 100644 index 0000000000..996c47fc16 --- /dev/null +++ b/public/docs/_examples/template-syntax/dart/web/style.css @@ -0,0 +1,11 @@ +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; 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