diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 259fd013d7..2943ba134f 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -1,7 +1,4 @@ .l-main-section - p. - Mission: By the end of this chapter, you should be able to display data from both properties and - lists from a component’s controller to the view. 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. @@ -14,7 +11,9 @@ img(src='displaying-data-example1.png') .l-sub-section - h3#section-examples Examples: + h3#section-examples Live Examples + p. + If you want to skip the working examples you can check out these links on Plunker. ul li a(href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview') TypeScript @@ -302,24 +301,24 @@ new angular.Component({ selector: "display" }), - new angular.View({ - template: - '<p>My name: {{ myName }}</p>' + - '<p>Friends:</p>' + - '<ul>' + - '<li *for="#name of names">' + - '{{ name }}' + - '</li>' + - '</ul>' + - '<p *if="names.length > 3">You have many friends!</p>', - directives: [angular.For, angular.If] - }) + new angular.View({ + template: + '<p>My name: {{ myName }}</p>' + + '<p>Friends:</p>' + + '<ul>' + + '<li *for="#name of names">' + + '{{ name }}' + + '</li>' + + '</ul>' + + '<p *if="names.length > 3">You have many friends!</p>', + directives: [angular.For, angular.If] + }) ]; pre.prettyprint.lang-typescript code. //TypeScript import {Component, View, bootstrap, For, If} from 'angular2/angular2'; - @Component({ + @Component({ selector: 'display' }) @View({ @@ -338,8 +337,8 @@ class DisplayComponent { myName: string; todos: Array; - constructor() { + constructor() { this.myName = "Alice"; this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; } - } \ No newline at end of file + } diff --git a/public/docs/js/latest/guide/setup.jade b/public/docs/js/latest/guide/setup.jade index d6d6423cf6..0f97acb3fb 100644 --- a/public/docs/js/latest/guide/setup.jade +++ b/public/docs/js/latest/guide/setup.jade @@ -21,6 +21,16 @@ pre.prettyprint.lang-bash code python -m SimpleHTTPServer 8000 + + .l-sub-section + h3#section-examples Live Examples + p. + If you want to skip the working examples you can check out these links on Plunker. + ul + li + a(href='http://plnkr.co/edit/MRz2i7sjupzxERPAa3SF?p=preview') TypeScript + li + a(href='http://plnkr.co/edit/wzzKo4etk24t0oAnL6ep?p=preview') ES5 .l-main-section h2#section-create-an-entry-point Create an entry point