diff --git a/public/docs/_examples/user-input/dart/lib/app-component.html b/public/docs/_examples/user-input/dart/lib/app-component.html new file mode 100644 index 0000000000..ecda463827 --- /dev/null +++ b/public/docs/_examples/user-input/dart/lib/app-component.html @@ -0,0 +1,28 @@ + +

+ +

+ +

+ +

+ +

Give me some keys!

+
+ +

keyup loop-back component

+
+

+ +

Give me some more keys!

+
+ +

Type away! Press [enter] when done.

+
+ +

Type away! Press [enter] or click elsewhere when done.

+
+ +

Little Tour of Heroes

+

Add a new hero

+
diff --git a/public/docs/_examples/user-input/dart/lib/app_component.dart b/public/docs/_examples/user-input/dart/lib/app_component.dart new file mode 100644 index 0000000000..5aacf15756 --- /dev/null +++ b/public/docs/_examples/user-input/dart/lib/app_component.dart @@ -0,0 +1,24 @@ +// #docregion +library user_input.app_component; + +import 'package:angular2/angular2.dart'; +import 'package:user_input/click_me_component.dart'; +import 'package:user_input/click_me_component_2.dart'; +import 'package:user_input/loop_back_component.dart'; +import 'package:user_input/key_up_components.dart'; +import 'package:user_input/little_tour_component.dart'; + +@Component( + selector: 'my-app', + templateUrl: 'app-component.html', + directives: const [ + ClickMeComponent, + ClickMeComponent2, + KeyUpComponentV1, + KeyUpComponentV2, + KeyUpComponentV3, + KeyUpComponentV4, + LoopBackComponent, + LittleTourComponent + ]) +class AppComponent {} diff --git a/public/docs/_examples/user-input/dart/lib/click_me_component.dart b/public/docs/_examples/user-input/dart/lib/click_me_component.dart new file mode 100644 index 0000000000..1c11cca4bf --- /dev/null +++ b/public/docs/_examples/user-input/dart/lib/click_me_component.dart @@ -0,0 +1,18 @@ +// #docregion +library user_input.click_me_component; + +import 'package:angular2/angular2.dart'; + +// #docregion click-me-component +@Component( + selector: 'click-me', + template: ''' + {{clickMessage}}''') +class ClickMeComponent { + String clickMessage = ''; + + onClickMe() { + clickMessage = 'You are my hero!'; + } +} +// #enddocregion click-me-component diff --git a/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart b/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart new file mode 100644 index 0000000000..7b1a66418e --- /dev/null +++ b/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart @@ -0,0 +1,19 @@ +// #docregion +library user_input.click_me_component_2; + +import 'package:angular2/angular2.dart'; + +@Component( + selector: 'click-me2', + template: ''' + {{clickMessage}}''') +class ClickMeComponent2 { + String clickMessage = ''; + int clicks = 1; + + onClickMe2(dynamic event) { + var evtMsg = + event != null ? ' Event target is ' + event.target.tagName : ''; + clickMessage = ('Click #${clicks++}. ${evtMsg}'); + } +} diff --git a/public/docs/_examples/user-input/dart/lib/key_up_components.dart b/public/docs/_examples/user-input/dart/lib/key_up_components.dart new file mode 100644 index 0000000000..3af1f77958 --- /dev/null +++ b/public/docs/_examples/user-input/dart/lib/key_up_components.dart @@ -0,0 +1,85 @@ +// #docplaster +// #docregion +library user_input.key_up_components; + +import 'dart:html'; + +import 'package:angular2/angular2.dart'; + +// #docregion key-up-component-1 +@Component( + selector: 'key-up1', +// #docregion key-up-component-1-template + template: ''' + +

{{values}}

+ ''' +// #enddocregion key-up-component-1-template + ) +// #docregion key-up-component-1-class, key-up-component-1-class-no-type +class KeyUpComponentV1 { + String values = ''; + + // #enddocregion key-up-component-1-class, key-up-component-1-class-no-type + /* + // #docregion key-up-component-1-class-no-type + onKey(dynamic event) { + values += event.target.value + ' | '; + } + // #enddocregion key-up-component-1-class-no-type + */ + // #docregion key-up-component-1-class + onKey(KeyboardEvent event) { + InputElement el = event.target; + values += '${el.value} | '; + } +// #docregion key-up-component-1-class-no-type +} +// #enddocregion key-up-component-1,key-up-component-1-class, key-up-component-1-class-no-type + +////////////////////////////////////////// + +// #docregion key-up-component-2 +@Component( + selector: 'key-up2', + template: ''' + +

{{values}}

+ ''') +class KeyUpComponentV2 { + String values = ''; + onKey(value) { + values += '$value | '; + } +} +// #enddocregion key-up-component-2 + +////////////////////////////////////////// + +// #docregion key-up-component-3 +@Component( + selector: 'key-up3', + template: ''' + +

{{values}}

+ ''') +class KeyUpComponentV3 { + String values = ''; +} +// #enddocregion key-up-component-3 + +////////////////////////////////////////// + +// #docregion key-up-component-4 +@Component( + selector: 'key-up4', + template: ''' + +

{{values}}

+ ''') +class KeyUpComponentV4 { + String values = ''; +} +// #enddocregion key-up-component-4 diff --git a/public/docs/_examples/user-input/dart/lib/little_tour_component.dart b/public/docs/_examples/user-input/dart/lib/little_tour_component.dart new file mode 100644 index 0000000000..3cbc36c4a6 --- /dev/null +++ b/public/docs/_examples/user-input/dart/lib/little_tour_component.dart @@ -0,0 +1,29 @@ +// #docregion +library user_input.little_tour_component; + +import 'dart:html'; + +import 'package:angular2/angular2.dart'; + +// #docregion little-tour +@Component( + selector: 'little-tour', + template: ''' + + + + + + ''') +class LittleTourComponent { + List heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; + + void addHero(String newHero) { + if (newHero?.length > 0) { + heroes.add(newHero); + } + } +} +// #enddocregion little-tour diff --git a/public/docs/_examples/user-input/dart/lib/loop_back_component.dart b/public/docs/_examples/user-input/dart/lib/loop_back_component.dart new file mode 100644 index 0000000000..a65a135255 --- /dev/null +++ b/public/docs/_examples/user-input/dart/lib/loop_back_component.dart @@ -0,0 +1,14 @@ +// #docregion +library user_input.loop_back_component; + +import 'package:angular2/angular2.dart'; + +// #docregion loop-back-component +@Component( + selector: 'loop-back', + template: ''' + +

{{box.value}}

+ ''') +class LoopBackComponent {} +// #enddocregion loop-back-component diff --git a/public/docs/_examples/user-input/dart/pubspec.yaml b/public/docs/_examples/user-input/dart/pubspec.yaml new file mode 100644 index 0000000000..7789ff50be --- /dev/null +++ b/public/docs/_examples/user-input/dart/pubspec.yaml @@ -0,0 +1,10 @@ +name: user_input +description: User Input +version: 0.0.1 +dependencies: + angular2: 2.0.0-beta.0 + browser: ^0.10.0 +transformers: +- angular2: + platform_directives: 'package:angular2/src/common/directives.dart#CORE_DIRECTIVES' + entry_points: web/main.dart diff --git a/public/docs/_examples/user-input/dart/web/index.html b/public/docs/_examples/user-input/dart/web/index.html new file mode 100644 index 0000000000..760bf63340 --- /dev/null +++ b/public/docs/_examples/user-input/dart/web/index.html @@ -0,0 +1,12 @@ + + + + + User Input + + + + + Loading... + + diff --git a/public/docs/_examples/user-input/dart/web/main.dart b/public/docs/_examples/user-input/dart/web/main.dart new file mode 100644 index 0000000000..f74bf40a09 --- /dev/null +++ b/public/docs/_examples/user-input/dart/web/main.dart @@ -0,0 +1,7 @@ +// #docregion +import 'package:angular2/bootstrap.dart'; +import 'package:user_input/app_component.dart'; + +main() { + bootstrap(AppComponent); +} diff --git a/public/docs/_examples/user-input/dart/web/style.css b/public/docs/_examples/user-input/dart/web/style.css new file mode 100644 index 0000000000..cab2e32d5e --- /dev/null +++ b/public/docs/_examples/user-input/dart/web/style.css @@ -0,0 +1,10 @@ +/* #docregion */ +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 }