first draft, code examples not working, for alex to review
This commit is contained in:
parent
2f95c0d68d
commit
8cf88739f3
BIN
public/docs/js/latest/guide/displaying-data-example1.png
Normal file
BIN
public/docs/js/latest/guide/displaying-data-example1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,47 @@
|
|||||||
|
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
|
||||||
|
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')
|
||||||
|
|
||||||
|
.l-main-section
|
||||||
|
h2#section-create-an-entry-point Create an entry point
|
||||||
|
p Open your favorite editor and create a show-properties.html file with the content:
|
||||||
|
pre.prettyprint.linenums.lang-javascript
|
||||||
|
code.
|
||||||
|
//ES5
|
||||||
|
<display></display>
|
||||||
|
|
||||||
|
pre.prettyprint.linenums.lang-typescript
|
||||||
|
code.
|
||||||
|
//TypeScript
|
||||||
|
<display></display>
|
||||||
|
|
||||||
|
p
|
||||||
|
| The <code><display></code> component here acts as the site where you'll insert your application.
|
||||||
|
| We'll assume a structure like this for the rest of the examples here and just focus on the parts that
|
||||||
|
| are different.
|
||||||
|
|
||||||
|
.l-main-section
|
||||||
|
h2#section-showing-properties-with-interpolation Showing properties with interpolation
|
||||||
|
p.text-body(ng-non-bindable)
|
||||||
|
| The simple method for binding text into templates is through interpolation where you put the name of a property
|
||||||
|
| inside <strong>{{ }}</strong>.
|
||||||
|
|
||||||
|
p To see this working, create another file, show-properties.js, and add the following:
|
||||||
|
|
Loading…
x
Reference in New Issue
Block a user