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.