diff --git a/public/docs/js/latest/guide/displaying-data-example1.png b/public/docs/js/latest/guide/displaying-data-example1.png new file mode 100644 index 0000000000..d0f02a6464 Binary files /dev/null and b/public/docs/js/latest/guide/displaying-data-example1.png differ diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index e69de29bb2..9dad624a91 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -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 + + + pre.prettyprint.linenums.lang-typescript + code. + //TypeScript + + + p + | The <display> 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 {{ }}. + + p To see this working, create another file, show-properties.js, and add the following: +