user input formatting

This commit is contained in:
Alex Wolfe 2015-04-22 07:21:09 -07:00
parent b66786ed55
commit 345a013156
1 changed files with 99 additions and 97 deletions

View File

@ -1,7 +1,7 @@
.statement .statement
h4 Live Examples h4 Live Examples
p. p.
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview> ES5 Example</a>. If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview'> ES5 Example</a>.
.l-main-section .l-main-section
h2#section-responding-to-user-input Responding to user input with event syntax h2#section-responding-to-user-input Responding to user input with event syntax
@ -31,7 +31,7 @@
event. And the <code>{{myname.value}}</code> binds the text node of the <code>&lt;p&gt;</code> element to the event. And the <code>{{myname.value}}</code> binds the text node of the <code>&lt;p&gt;</code> element to the
input's value property. 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 users enter items and add them to a list like this:
div(align='center') figure.image-display
img(src='user-input-example1.png') img(src='user-input-example1.png')
@ -42,7 +42,8 @@
list. Inside the controller, add an array with an initial list of items. Then add a method that pushes new items 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. on the array when called.
pre.prettyprint.linenums.lang-javascript .code-box
pre.prettyprint.linenums.lang-javascript(data-name="es5")
code. code.
//ES5 //ES5
function TodoList() { function TodoList() {
@ -52,7 +53,7 @@
}; };
} }
pre.prettyprint.linenums.lang-typescript pre.prettyprint.linenums.lang-typescript(data-name="typescript")
code. code.
//TypeScript //TypeScript
class TodoList { class TodoList {
@ -116,7 +117,8 @@
.l-main-section .l-main-section
h2#section-final-code Final Code h2#section-final-code Final Code
pre.prettyprint.lang-javascript .code-box
pre.prettyprint.lang-javascript(data-name="es5")
code. code.
//ES5 //ES5
function TodoList() { function TodoList() {
@ -155,7 +157,7 @@
angular.bootstrap(TodoList); angular.bootstrap(TodoList);
}); });
pre.prettyprint.lang-typescript pre.prettyprint.lang-typescript(data-name="typescript")
code. code.
//TypeScript //TypeScript
import {Component, View, bootstrap, For, If} from 'angular2/angular2'; import {Component, View, bootstrap, For, If} from 'angular2/angular2';