diff --git a/public/docs/js/latest/guide/user-input.jade b/public/docs/js/latest/guide/user-input.jade
index a88d287d6a..25429533f4 100644
--- a/public/docs/js/latest/guide/user-input.jade
+++ b/public/docs/js/latest/guide/user-input.jade
@@ -1,11 +1,11 @@
.statement
h4 Live Examples
p.
- If you want to skip to the working examples you can check out these links on Plunker. TypeScript Example or TypeScript Example or ES5 Example.
.l-main-section
h2#section-responding-to-user-input Responding to user input with event syntax
-
+
p.
You can make your application respond to user input by using the event syntax. The event syntax starts with an event name surrounded by parenthesis: (event). A controller function is then assigned to the event name: (event)="controllerFn()".
p.
@@ -14,7 +14,7 @@
pre.prettyprint.lang-html
code.
<input (keyup)="myControllerMethod()">
-
+
h3#local-variables Local variables
p.
As in previous examples, you can make element references available to other parts of the template as a local
@@ -31,7 +31,7 @@
event. And the {{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:
- div(align='center')
+ figure.image-display
img(src='user-input-example1.png')
@@ -42,28 +42,29 @@
list. Inside the controller, add an array with an initial list of items. Then add a method that pushes new items
on the array when called.
- 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() {
+ .code-box
+ pre.prettyprint.linenums.lang-javascript(data-name="es5")
+ code.
+ //ES5
+ function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
+ this.addTodo = function(todo) {
+ this.todos.push(todo);
+ };
}
- addTodo(todo: string) {
- this.todos.push(todo);
+
+ pre.prettyprint.linenums.lang-typescript(data-name="typescript")
+ code.
+ //TypeScript
+ class TodoList {
+ todos: Array<string>
+ constructor() {
+ this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
+ }
+ addTodo(todo: string) {
+ this.todos.push(todo);
+ }
}
- }
.callout.is-helpful
header Production Best Practice
@@ -116,83 +117,84 @@
.l-main-section
h2#section-final-code Final Code
- pre.prettyprint.lang-javascript
- code.
- //ES5
- function TodoList() {
- this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
-
- this.addTodo = function(todo) {
- this.todos.push(todo);
- };
-
- this.doneTyping = function($event) {
- if($event.which === 13) {
- this.addTodo($event.target.value);
- $event.target.value = null;
- }
- }
- }
-
- TodoList.annotations = [
- new angular.Component({
- selector: "todo-list"
- }),
- new angular.View({
- template:
- '<ul>' +
- '<li *for="#todo of todos">' +
- '{{ todo }}' +
- '</li>' +
- '</ul>' +
- '<input #textbox (keyup)="doneTyping($event)">' +
- '<button (click)="addTodo(textbox.value)">Add Todo</button>',
- directives: [angular.For, angular.If]
- })
- ];
-
- document.addEventListener("DOMContentLoaded", function() {
- angular.bootstrap(TodoList);
- });
-
- pre.prettyprint.lang-typescript
- code.
- //TypeScript
- import {Component, View, bootstrap, For, If} from 'angular2/angular2';
-
- @Component({
- selector: 'todo-list'
- })
- @View({
- template: `
- <ul>
- <li *for="#todo of todos">
- {{ todo }}
- </li>
- </ul>
-
- <input #todotext (keyup)="doneTyping($event)">
- <button (click)="addTodo(todotext.value)">Add Todo</button>
- `,
- directives: [For, If]
- })
- class TodoList {
- todos: Array;
-
- constructor() {
+ .code-box
+ pre.prettyprint.lang-javascript(data-name="es5")
+ code.
+ //ES5
+ function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
- }
- addTodo(todo: string) {
- this.todos.push(todo);
- }
+ this.addTodo = function(todo) {
+ this.todos.push(todo);
+ };
- doneTyping($event) {
- if($event.which === 13) {
- this.addTodo($event.target.value);
- $event.target.value = null;
+ this.doneTyping = function($event) {
+ if($event.which === 13) {
+ this.addTodo($event.target.value);
+ $event.target.value = null;
+ }
}
}
- }
- bootstrap(TodoList);
+ TodoList.annotations = [
+ new angular.Component({
+ selector: "todo-list"
+ }),
+ new angular.View({
+ template:
+ '<ul>' +
+ '<li *for="#todo of todos">' +
+ '{{ todo }}' +
+ '</li>' +
+ '</ul>' +
+ '<input #textbox (keyup)="doneTyping($event)">' +
+ '<button (click)="addTodo(textbox.value)">Add Todo</button>',
+ directives: [angular.For, angular.If]
+ })
+ ];
+
+ document.addEventListener("DOMContentLoaded", function() {
+ angular.bootstrap(TodoList);
+ });
+
+ pre.prettyprint.lang-typescript(data-name="typescript")
+ code.
+ //TypeScript
+ import {Component, View, bootstrap, For, If} from 'angular2/angular2';
+
+ @Component({
+ selector: 'todo-list'
+ })
+ @View({
+ template: `
+ <ul>
+ <li *for="#todo of todos">
+ {{ todo }}
+ </li>
+ </ul>
+
+ <input #todotext (keyup)="doneTyping($event)">
+ <button (click)="addTodo(todotext.value)">Add Todo</button>
+ `,
+ directives: [For, If]
+ })
+ class TodoList {
+ todos: Array;
+
+ constructor() {
+ this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
+ }
+
+ addTodo(todo: string) {
+ this.todos.push(todo);
+ }
+
+ doneTyping($event) {
+ if($event.which === 13) {
+ this.addTodo($event.target.value);
+ $event.target.value = null;
+ }
+ }
+ }
+
+ bootstrap(TodoList);