honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change all the For and If directives to NgFor and NgIf

This commit is contained in:
Sam Verschueren 2015-06-04 12:41:47 +02:00 committed by Naomi Black
parent 253d29badf
commit d61e884e08
1 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
public/docs/js/latest/guide/displaying-data.jade
View File

@ -104,7 +104,7 @@
want to move them to a separate file and load them with <code>templateUrl:</code> 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 @@
<span class='otl'>this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];</span>
}
p.
You can then use this array in your template with the <code>For</code> directive to create copies of DOM elements
You can then use this array in your template with the <code>NgFor</code> directive to create copies of DOM elements
with one for each item in the array.
code-tabs
@ -137,7 +137,7 @@
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p&gt;Friends:&lt;/p&gt;
&lt;ul&gt;
&lt;li *for=&quot;#name of names&quot;&gt;
&lt;li *ng-for=&quot;#name of names&quot;&gt;
{{ name }}
&lt;/li&gt;
&lt;/ul&gt;
@ -148,22 +148,22 @@
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
&#39;&lt;ul&gt;&#39; +
&#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
&#39;&lt;li *ng-for=&quot;#name of names&quot;&gt;&#39; +
&#39;{{ name }}&#39; +
&#39;&lt;/li&gt;&#39; +
&#39;&lt;/ul&gt;&#39;,
p.
To make this work, you'll also need to add the <code>For</code> directive used by the template so
To make this work, you'll also need to add the <code>NgFor</code> 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
&lt;li *for=&quot;#name of names&quot;&gt;
&lt;li *ng-for=&quot;#name of names&quot;&gt;
{{ name }}
&lt;/li&gt;
p The way to read this is:
ul
li.
<code>*for</code> : create a DOM element for each item in an
<code>*ng-for</code> : create a DOM element for each item in an
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">iterable</a>
like an array
li <code>#name</code> : refer to individual values of the iterable as 'name'
@ -236,7 +236,7 @@
code-pane(language="javascript" name="TypeScript" format="linenums").
@Component({
...
<span class='otl'>injectables: [FriendsService]</span>
<span class='otl'>appInjector: [FriendsService]</span>
})
class DisplayComponent {
myName: string;
@ -257,11 +257,11 @@
DisplayComponent.annotations = [
new angular.ComponentAnnotation({
selector: "display",
<span class='otl'>injectables: [FriendsService]</span>
<span class='otl'>appInjector: [FriendsService]</span>
}),
new angular.ViewAnnotation({
template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&gt;{{ name }}&lt;/li&gt; &lt;/ul&gt;',
directives: [angular.For]
directives: [angular.NgFor]
})
];
<span class='otl'>DisplayComponent.parameters = [[FriendsService]];</span>
@ -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 <code>If</code>. The
<code>If</code> 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 <code>NgIf</code>. The
<code>NgIf</code> 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.
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
p You'll also need to add the <code>If</code> directive so Angular knows to include it.
&lt;p *ng-if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
p You'll also need to add the <code>NgIf</code> 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({
<span class='otl'>template</span>: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p&gt;Friends:&lt;/p&gt;
&lt;ul&gt;
&lt;li *for=&quot;#name of names&quot;&gt;
&lt;li *ng-for=&quot;#name of names&quot;&gt;
{{ name }}
&lt;/li&gt;
&lt;/ul&gt;
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
&lt;p *ng-if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
`,
directives: [For, If]
directives: [NgFor, NgIf]
})
class DisplayComponent {
...
@ -333,12 +333,12 @@
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
&#39;&lt;ul&gt;&#39; +
&#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
&#39;&lt;li *ng-for=&quot;#name of names&quot;&gt;&#39; +
&#39;{{ name }}&#39; +
&#39;&lt;/li&gt;&#39; +
&#39;&lt;/ul&gt;&#39; +
&#39;&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;',
directives: [angular.For, angular.If]
&#39;&lt;p *ng-if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;',
directives: [angular.NgFor, angular.NgIf]
})
];