2015-04-18 16:56:30 -04:00
|
|
|
|
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:
|
|
|
|
|
|
|
