diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade
index 343e9fcd2c..bfafc2dbf9 100644
--- a/public/docs/js/latest/guide/displaying-data.jade
+++ b/public/docs/js/latest/guide/displaying-data.jade
@@ -1,24 +1,20 @@
-.l-main-section
- p.
- Displaying data is job number one for any good application. In Angular, you bind data to elements in HTML
- templates and Angular automatically updates the UI as data changes.
- p.
- 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')
+.callout.is-helpful
+ header 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.
+
h2#section-install-or-plunker Install Angular or Use Plunker
p There are four steps to create any Angular app:
ol
@@ -22,10 +28,6 @@
pre.prettyprint.lang-bash
code python -m SimpleHTTPServer 8000
- p.
- If you want to skip the working examples you can check out these links on Plunker. TypeScript Example or
- ES5 Example.
-
.l-main-section
h2#section-create-an-entry-point Create an entry point
p.
@@ -195,4 +197,4 @@
// window.angular is available because the script file attaches the angular property to the window
document.addEventListener('DOMContentLoaded', function() {
angular.bootstrap(AppComponent);
- });
\ No newline at end of file
+ });
diff --git a/public/docs/js/latest/guide/user-input.jade b/public/docs/js/latest/guide/user-input.jade
index 2f837680c0..a991bae389 100644
--- a/public/docs/js/latest/guide/user-input.jade
+++ b/public/docs/js/latest/guide/user-input.jade
@@ -1,7 +1,13 @@
.l-main-section
+
+ .callout.is-helpful
+ header Live Examples
+ p.
+ If you want to skip to the working examples you can check out these links on Plunker. TypeScript Example or #myname 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
+ 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')
img(src='user-input-example1.png')
-.l-main-section
+.l-ain-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
+ With the default bootstrapping in place, create a controller class that will manage interactions with the
+ 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
@@ -39,7 +45,7 @@
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
- this.addTodo = function(todo) {
+ this.addTodo = function(todo) {
this.todos.push(todo);
};
}
@@ -48,11 +54,11 @@
code.
//TypeScript
class TodoList {
- todos: Array;
- constructor() {
+ todos: Array<string>
+ constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
- addTodo(todo: string) {
+ addTodo(todo: string) {
this.todos.push(todo);
}
}
@@ -61,7 +67,7 @@
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.
+ and inject it into TodoList. We've omitted it here for brevity.
.l-main-section
h2#section-display-the-list-of-todos Display the list of todos
@@ -95,7 +101,7 @@
code.
<button (click)="addTodo(todotext.domElement.value)">Add Todo</button>
- p And then create the doneTyping() method on TodoList and handle adding the todo text.
+ p And then create the doneTyping() method on TodoList and handle adding the todo text.
pre.prettyprint.lang-javascript
code.
@@ -188,7 +194,3 @@
}
bootstrap(TodoList);
-
-
-
-