diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade index 4f16adbeca..a234a0c091 100644 --- a/public/docs/js/latest/guide/displaying-data.jade +++ b/public/docs/js/latest/guide/displaying-data.jade @@ -104,7 +104,7 @@ want to move them to a separate file and load them with templateUrl: instead. .l-main-section - h2#Create-an-array Create an array property and use For on the view + h2#Create-an-array Create an array property and use NgFor on the view p Moving up from a single property, create an array to display as a list. code-tabs @@ -127,7 +127,7 @@ this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; } p. - You can then use this array in your template with the For directive to create copies of DOM elements + You can then use this array in your template with the NgFor directive to create copies of DOM elements with one for each item in the array. code-tabs @@ -137,7 +137,7 @@ <p>My name: {{ myName }}</p> <p>Friends:</p> <ul> - <li *for="#name of names"> + <li *ng-for="#name of names"> {{ name }} </li> </ul> @@ -148,22 +148,22 @@ '<p>My name: {{ myName }}</p>' + '<p>Friends:</p>' + '<ul>' + - '<li *for="#name of names">' + + '<li *ng-for="#name of names">' + '{{ name }}' + '</li>' + '</ul>', p. - To make this work, you'll also need to add the For directive used by the template so + To make this work, you'll also need to add the NgFor directive used by the template so that Angular knows to include it: code-tabs code-pane(language="javascript" name="TypeScript" format="linenums"). //Typescript - import {Component, View, bootstrap, For} from 'angular2/angular2'; + import {Component, View, bootstrap, NgFor} from 'angular2/angular2'; @View({ ... - directives: [For] + directives: [NgFor] }) @@ -173,7 +173,7 @@ ... new angular.ViewAnnotation({ ... - directives: [angular.For] + directives: [angular.NgFor] }) ]; @@ -185,13 +185,13 @@ p Let's look at the few lines that do the work again: code-example(language="html" format="linenums"). //HTML - <li *for="#name of names"> + <li *ng-for="#name of names"> {{ name }} </li> p The way to read this is: ul li. - *for : create a DOM element for each item in an + *ng-for : create a DOM element for each item in an iterable like an array li #name : refer to individual values of the iterable as 'name' @@ -236,7 +236,7 @@ code-pane(language="javascript" name="TypeScript" format="linenums"). @Component({ ... - injectables: [FriendsService] + appInjector: [FriendsService] }) class DisplayComponent { myName: string; @@ -257,11 +257,11 @@ DisplayComponent.annotations = [ new angular.ComponentAnnotation({ selector: "display", - injectables: [FriendsService] + appInjector: [FriendsService] }), new angular.ViewAnnotation({ template: '{{ myName }} <ul> <li *for="#name of names">{{ name }}</li> </ul>', - directives: [angular.For] + directives: [angular.NgFor] }) ]; DisplayComponent.parameters = [[FriendsService]]; @@ -269,25 +269,25 @@ angular.bootstrap(DisplayComponent); }); .l-main-section - h2#Conditionally-displaying-data-with-If Conditionally displaying data with If + h2#Conditionally-displaying-data-with-NgIf Conditionally displaying data with NgIf p. - Lastly, before we move on, let's handle showing parts of our UI conditionally with If. The - If directive adds or removes elements from the DOM based on the expression you provide. + Lastly, before we move on, let's handle showing parts of our UI conditionally with NgIf. The + NgIf directive adds or removes elements from the DOM based on the expression you provide. p See it in action by adding a paragraph at the end of your template pre.prettyprint.lang-html code. - <p *if="names.length > 3">You have many friends!</p> - p You'll also need to add the If directive so Angular knows to include it. + <p *ng-if="names.length > 3">You have many friends!</p> + p You'll also need to add the NgIf directive so Angular knows to include it. code-tabs code-pane(language="javascript" name="TypeScript" format="linenums"). //Typescript - import {Component, View, bootstrap, For, If} from 'angular2/angular2'; + import {Component, View, bootstrap, NgFor, NgIf} from 'angular2/angular2'; ... - directives: [For, If] + directives: [NgFor, NgIf] code-pane(language="javascript" name="ES5" format="linenums"). //ES5 - directives: [angular.For, angular.If] + directives: [angular.NgFor, angular.NgIf] p. As there are currently 6 items in the list, you'll see the message congratulating you on your many friends. Remove three items from the list, reload your browser, and see that the message no longer displays. @@ -295,20 +295,20 @@ code-tabs code-pane(language="javascript" name="TypeScript" format="linenums"). //TypeScript - import {Component, View, bootstrap, For, If} from 'angular2/angular2'; + import {Component, View, bootstrap, NgFor, NgIf} from 'angular2/angular2'; ... @View({ template: ` <p>My name: {{ myName }}</p> <p>Friends:</p> <ul> - <li *for="#name of names"> + <li *ng-for="#name of names"> {{ name }} </li> </ul> - <p *if="names.length > 3">You have many friends!</p> + <p *ng-if="names.length > 3">You have many friends!</p> `, - directives: [For, If] + directives: [NgFor, NgIf] }) class DisplayComponent { ... @@ -333,12 +333,12 @@ '<p>My name: {{ myName }}</p>' + '<p>Friends:</p>' + '<ul>' + - '<li *for="#name of names">' + + '<li *ng-for="#name of names">' + '{{ name }}' + '</li>' + '</ul>' + - '<p *if="names.length > 3">You have many friends!</p>'', - directives: [angular.For, angular.If] + '<p *ng-if="names.length > 3">You have many friends!</p>'', + directives: [angular.NgFor, angular.NgIf] }) ];