first draft, code examples not working, for alex to review

This commit is contained in:
Naomi Black 2015-04-18 13:56:30 -07:00
parent 2f95c0d68d
commit 8cf88739f3
2 changed files with 47 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -0,0 +1,47 @@
p.
Mission: You should be able to display data from both properties and lists from a components 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>&lt;display&gt;</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: