Merge branch 'api-branch' of https://github.com/angular/angular.io into api-branch

public/docs/js/latest/guide/displaying-data.jade

@@ -1,23 +1,25 @@
-p.
-    Mission: You should be able to display data from both properties and lists from a component’s controller to the
-    view.
 .l-main-section
-    h2#section-examples Examples:
-    ul
-     li
-        a(href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview') TypeScript
-     li
-        a(href='http://plnkr.co/edit/GOJiWOEem9jrOyEeY3uW?p=preview') ES5
     p.
-     Displaying data is job number one for any good application.  In Angular, you bind data to elements in HTML
+      <strong>Mission:</strong> By the end of this chapter, you should be able to display data from both properties and
-     templates and Angular automatically updates the UI as data changes.
+      lists from a component’s controller to the view.
     p.
-     Let's walk through how we'd display a property, a list of properties, and then conditionally show content
+        Displaying data is job number one for any good application.  In Angular, you bind data to elements in HTML
-     based on state.
+        templates and Angular automatically updates the UI as data changes.
     p.
-     We'll end up with a UI that looks like this:
+        Let's walk through how we'd display a property, a list of properties, and then conditionally show content
+        based on state.
+    p.
+        We'll end up with a UI that looks like this:
     div(align='center')
-      img(src='displaying-data-example1.png')
+        img(src='displaying-data-example1.png')
+
+    .l-sub-section
+        h3#section-examples Examples:
+        ul
+         li
+            a(href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview') TypeScript
+         li
+            a(href='http://plnkr.co/edit/GOJiWOEem9jrOyEeY3uW?p=preview') ES5
 
 .l-main-section
     h2#section-create-an-entry-point Create an entry point

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