From 9133173babb9056a5d851a6467d7594b687c815f Mon Sep 17 00:00:00 2001
From: Naomi Black <naomitraveller@gmail.com>
Date: Sun, 19 Apr 2015 15:12:29 -0700
Subject: [PATCH] docs(user-input): First 2 sections of this chapter. Alex to
 comment on my use of aside.

---
 public/docs/js/latest/guide/user-input.jade | 74 +++++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/public/docs/js/latest/guide/user-input.jade b/public/docs/js/latest/guide/user-input.jade
index e69de29bb2..45bb5e9e77 100644
--- a/public/docs/js/latest/guide/user-input.jade
+++ b/public/docs/js/latest/guide/user-input.jade
@@ -0,0 +1,74 @@
+.l-main-section
+    p.
+      <strong>Mission:</strong> By the end of this chapter, you should be able to add to a list on a page when a
+      button is clicked and update the text displayed when the user types into a textbox.
+    .l-sub-section
+      h3#section-examples Examples:
+        ul
+          li
+            a(href='') TypeScript
+          li
+            a(href='') ES5
+    p.
+      You can make your application respond to user input by associating events with functions in your controller
+      using the event syntax using <strong>()</strong> to surround the name of an event.
+    p.
+      For a particular control like an input you can have it call methods on your controller on keyup event like so:
+
+    pre.prettyprint.lang-html
+      code.
+        &lt;input (keyup)="myControllerMethod()"&gt;
+    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:
+
+    pre.prettyprint.lang-html
+      code.
+        &lt;input #myname (keyup)&gt;
+        &lt;p&gt;{{myname.value}}&lt;/p&gt;
+
+    p.text-body(ng-non-bindable).
+      The <code>#my-name</code> creates a local variable in the template that we'll refer to below in the
+      <code>&lt;p&gt;</code> element.  The <code>(keyup)</code> tells Angular to trigger updates when it gets a keyup
+      event.  And the <code>{{my-name.value}}</code> binds the text node of the  <code>&lt;p&gt;</code> 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:
+    div(align='center')
+        img(src='user-input-example1.png')
+
+
+.l-main-section
+    h2#section-create-an-array-property Create an array 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.
+
+    aside.is-right.
+        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.
+
+    pre.prettyprint.linenums.lang-javascript
+      code.
+        //ES5
+        function TodoList() {
+          this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
+                  this.addTodo = function(todo) {
+            this.todos.push(todo);
+          };
+        }
+
+    pre.prettyprint.linenums.lang-typescript
+      code.
+        //TypeScript
+        class TodoList {
+          todos: Array<string>;
+                  constructor() {
+            this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
+          }
+                  addTodo(todo: string) {
+            this.todos.push(todo);
+          }
+        }
+
+