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

style(guide): incorporate FriendsService into final example, If directive

This commit is contained in:
Jeff Cross 2015-05-19 15:09:37 -07:00
parent 7722b596fb
commit f096b9bc6a
1 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -297,11 +297,9 @@
code-pane(language="javascript" name="TypeScript" format="linenums"). code-pane(language="javascript" name="TypeScript" format="linenums").
//TypeScript //TypeScript
import {Component, View, bootstrap, For, If} from 'angular2/angular2'; import {Component, View, bootstrap, For, If} from 'angular2/angular2';
@Component({ ...
selector: 'display'
})
@View({ @View({
template: ` <span class='otl'>template</span>: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt; &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p&gt;Friends:&lt;/p&gt; &lt;p&gt;Friends:&lt;/p&gt;
&lt;ul&gt; &lt;ul&gt;
@ -314,25 +312,25 @@
directives: [For, If] directives: [For, If]
}) })
class DisplayComponent { class DisplayComponent {
myName: string; ...
names: Array&lt;string&gt; }
class FriendsService {
names: Array<string>;
constructor() { constructor() {
this.myName = "Alice"; <span class='otl'>this.names = ["Aarav", "Martín", "Shannon"];</span>
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
} }
} }
code-pane(language="javascript" name="ES5" format="linenums"). code-pane(language="javascript" name="ES5" format="linenums").
//ES5 //ES5
function DisplayComponent() { function DisplayComponent(friends) {
this.myName = "Alice"; this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; this.names = friends.names;
} }
DisplayComponent.annotations = [ DisplayComponent.annotations = [
new angular.ComponentAnnotation({ ...
selector: "display"
}),
new angular.ViewAnnotation({ new angular.ViewAnnotation({
template: <span class='otl'>template</span>: '
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; + &#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; + &#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
&#39;&lt;ul&gt;&#39; + &#39;&lt;ul&gt;&#39; +
@ -340,7 +338,11 @@
&#39;{{ name }}&#39; + &#39;{{ name }}&#39; +
&#39;&lt;/li&gt;&#39; + &#39;&lt;/li&gt;&#39; +
&#39;&lt;/ul&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;, &#39;&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;',
directives: [angular.For, angular.If] directives: [angular.For, angular.If]
}) })
]; ];
function FriendsService () {
<span class='otl'>this.names = ["Aarav", "Martín", "Shannon"];</span>
}