diff --git a/public/docs/dart/latest/api/index.jade b/public/docs/dart/latest/api/index.jade index f39b9e7df7..b23313ae2e 100644 --- a/public/docs/dart/latest/api/index.jade +++ b/public/docs/dart/latest/api/index.jade @@ -2,9 +2,12 @@ h2 Developer Preview p. - The Angular 2.0 API is currently in active development and not production ready. - This page will showcase a preview of proposed methods to help further the discussion - in the development community. + The proposed Angular 2 API does not yet have Dart-specific documentation. + However, because the Dart and JavaScript APIs are generated from the same source, + you might find the JavaScript API docs helpful: + + p.text-center + Angular 2 API Preview (JavaScript) .l-sub-section h3 Angular 1.X for Production diff --git a/public/docs/dart/latest/guide/making-components.jade b/public/docs/dart/latest/guide/making-components.jade index 1295bcb8ed..63418c0f04 100644 --- a/public/docs/dart/latest/guide/making-components.jade +++ b/public/docs/dart/latest/guide/making-components.jade @@ -1,10 +1,13 @@ .l-main-section p. - As mentioned earlier, you build Angular applications as a tree of nested components. You've seen how to create - a top-level component. You add child components to a parent component by using them in the parent component's - template. + As mentioned earlier, you build Angular applications as a tree of nested components. + You've seen how to create a top-level component. + You add child components to a parent component by using them in + the parent component's template, + and by specifying the child component classes in the parent's list of directives. p. - Given a bootstrapping template with a <parent> tag in the body, you can create a parent + Given a bootstrapping template with a <parent> tag in the body, + you can create a parent component that uses a <child> component like so: pre.prettyprint.linenums.lang-dart @@ -17,9 +20,9 @@ @View( template: ''' <h1>{{ message }}</h1> - <child></child> + <child></child> ''', - directives: const[ChildComponent] + directives: const[ChildComponent] ) class ParentComponent { String message = "I'm the parent"; @@ -43,8 +46,5 @@ String message = "I'm the child"; } - p. - Notice that in addition to using the <child> element in the parent template, you also need to - add ChildComponent in ParentComponent's list of directives //p. [TODO: Motivate communication between components with iterator example that passes index to the child] diff --git a/public/docs/dart/latest/guide/user-input-example1.png b/public/docs/dart/latest/guide/user-input-example1.png index 91e2dcfed1..822abea3c9 100644 Binary files a/public/docs/dart/latest/guide/user-input-example1.png and b/public/docs/dart/latest/guide/user-input-example1.png differ diff --git a/public/docs/dart/latest/guide/user-input.jade b/public/docs/dart/latest/guide/user-input.jade index a32b6b8b9a..08548853cb 100644 --- a/public/docs/dart/latest/guide/user-input.jade +++ b/public/docs/dart/latest/guide/user-input.jade @@ -1,40 +1,52 @@ .l-main-section p. - You can make your application respond to user input by associating events with functions in your controller - using the event syntax using () to surround the name of an event. + Use the event syntax (eventName) to + make your application respond to user input. p. - For a particular control like an input you can have it call methods on your controller on keyup event like so: + You can specify the event handler—a method in the component controller—like this: pre.prettyprint.lang-html code. <input (keyup)="myControllerMethod()"> p. - As in previous examples, you can make element references available to other parts of the template as a local - variable using the # syntax. With this and events, we can do the old "update text as you type" example: + As in previous examples, you can make element references available to + other parts of the template as a local + variable using the # syntax. + Using # and events, + you can write the old "update text as you type" example: + pre.prettyprint.lang-html code. - <input #my-name (keyup)> - <p>{{my-name.value}}</p> + <input #myname (keyup)> + <p>{{myname.value}}</p> p.text-body(ng-non-bindable). - The #my-name creates a local variable in the template that we'll refer to below in the - <p> element. The (keyup) tells Angular to trigger updates when it gets a keyup - event. And the {{my-name.value}} binds the text node of the <p> element to the + In that example, #myname creates a local variable in the template that + the <p> element can refer to. + The (keyup) tells Angular to trigger updates when it gets a keyup + event. And {{myname.value}} binds the text node of the + <p> element to the input's value property. - p Let's do something a little more complex where users enter items and add them to a list like this: + + p. + Let's do something a little more complex, where the user enters items + that the app adds to a list: figure.image-display img(src='user-input-example1.png') .l-main-section - h2#section-create-an-array-property Create an array property + h2#section-create-an-array-property Create a list property p. - With the default bootstrapping in place, create a TodoController class that will manage interactions with the - list. Inside TodoController, add an array with an initial list of items. Then add a method that pushes new items - on the array when called. + With the default files in place, + create a TodoController class to manage interactions with the + list. Inside TodoController, add a list with some initial items. + Then add a method that adds new items + to the list. - pre.prettyprint.linenums.lang-dart + pre.prettyprint.lang-dart code. class TodoList { List<String> todos = @@ -42,21 +54,26 @@ addTodo(String todo) { todos.add(todo); - } + } + } .callout.is-helpful header Production Best Practice p. - As with the previous example, in a production application you will separate your model out into another class - and inject it into TodoController. We've omitted it here for brevity. + As shown in the previous example, a production application you would + separate the model out into another class + and inject it into TodoController. + We've omitted that here for brevity. + +

.l-main-section h2#section-display-the-list-of-todos Display the list of todos p. - Using the *for iterator, create an <li> for each item in the todos array and set + Using the *for iterator, create an <li> for each item in the todos list and set its text to the value. - pre.prettyprint.linenums.lang-html + pre.prettyprint.lang-html code. <ul> <li *for="#todo of todos"> @@ -74,64 +91,126 @@ code. <input #todotext> p. - Lastly, specify the target of the click event binding as your controller's addTodo() method and pass - it the value. Since you created a reference called todotext, you can get the value with - todotext.value. + Specify the target of the click event binding as your controller's + addTodo() method and pass + it the value. Since you created a reference called todotext, + you can get the value with todotext.value. pre.prettyprint.lang-html code. <button (click)="addTodo(todotext.value)">Add Todo</button> - p And then create the doneTyping() method on TodoList and handle adding the todo text. + p. + To make pressing Enter do something useful, + you can add a keyup event handler to the input field. + This event handler uses APIs defined in + dart:html, + so be sure to import that library. + + .code-box + pre.prettyprint.lang-dart(data-name="todo_list.dart") + code. + // In the template: + <input #todotext (keyup)="doneTyping(\$event)"> + + // In the component controller class: + doneTyping(KeyboardEvent event) { + if (event.keyCode == KeyCode.ENTER) { + InputElement e = event.target; + addTodo(e.value); + e.value = null; + } + } + pre.prettyprint.lang-dart(data-name="main.dart") + code. + library user_input; + + import 'dart:html'; + ... - pre.prettyprint.lang-dart - code. - doneTyping(KeyboardEvent event) { - if (event.which == 13) { - InputElement e = event.target; - addTodo(e.value); - e.value = null; - } - } .l-main-section - h2#section-final-code Final Code - p Here's the final todo_list.dart - pre.prettyprint.lang-dart - code. - part of user_input; + h2#section-final-code Final code - @Component( - selector: 'todo-list' - ) - @View( - // Without r before ''' (a raw string), $event breaks Angular! - // An alternative is to use \$event instead. - template: ''' - <ul> - <li *for="#todo of todos"> - {{ todo }} - </li> - </ul> + .code-box + pre.prettyprint.lang-dart(data-name="todo_list.dart") + code. + // web/todo_list.dart + part of user_input; - <input #todotext (keyup)="doneTyping($event)"> - <button (click)="addTodo(todotext.value)">Add Todo</button> - ''', - directives: const[For] - ) - class TodoList { - List<String> todos = - ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular']; + @Component( + selector: 'todo-list' + ) + @View( + // Without r before ''' (a raw string), $event breaks Angular. + // An alternative to a raw string is to use \$event instead. + template: r''' + <ul> + <li *for="#todo of todos"> + {{ todo }} + </li> + </ul> - addTodo(String todo) { - todos.add(todo); - } + <input #todotext (keyup)="doneTyping($event)"> + <button (click)="addTodo(todotext.value)">Add Todo</button> + ''', + directives: const[For] + ) + class TodoList { + List<String> todos = + ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular']; - doneTyping(KeyboardEvent event) { - if (event.which == 13) { - InputElement e = event.target; - addTodo(e.value); - e.value = null; - } - } - } \ No newline at end of file + addTodo(String todo) { + todos.add(todo); + } + + doneTyping(KeyboardEvent event) { + if (event.keyCode == KeyCode.ENTER) { + InputElement e = event.target; + addTodo(e.value); + e.value = null; + } + } + } + pre.prettyprint.lang-dart(data-name="main.dart") + code. + // web/main.dart + library user_input; + + import 'dart:html'; + + import 'package:angular2/angular2.dart'; + import 'package:angular2/src/reflection/reflection.dart' show reflector; + import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; + + part 'todo_list.dart'; + + main() { + reflector.reflectionCapabilities = new ReflectionCapabilities(); + bootstrap(TodoList); + } + pre.prettyprint.lang-html(data-name="html") + code. + <!-- web/index.html --> + <!DOCTYPE html> + <html> + <head> + <link rel="stylesheet" href="style.css"> + </head> + <body> + + <todo-list></todo-list> + + <script type="application/dart" src="main.dart"></script> + <script src="packages/browser/dart.js"></script> + </body> + </html> + pre.prettyprint.lang-yaml(data-name="yaml") + code. + # pubspec.yaml + name: user_input + description: Dart version of Angular 2 example, Responding to User Input + version: 0.0.1 + dependencies: + angular2: 2.0.0-alpha.20 + browser: any diff --git a/public/docs/js/latest/api/index.jade b/public/docs/js/latest/api/index.jade index 9b23b0e015..948962aea2 100644 --- a/public/docs/js/latest/api/index.jade +++ b/public/docs/js/latest/api/index.jade @@ -4,7 +4,7 @@ header Developer Preview p. The Angular 2.0 API is currently in active development and not production ready. - This page will showcase a preview of proposed methods to help further the discussion + This page showcases a preview of proposed methods to help further the discussion in the development community. If you're building a production app today, please use Angular 1.X.