first draft, code examples not working, for alex to review
This commit is contained in:
parent
2f95c0d68d
commit
8cf88739f3
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…
Reference in New Issue