diff --git a/public/docs/js/latest/guide/displaying-data.jade b/public/docs/js/latest/guide/displaying-data.jade
index 12a26979b5..c5cd39b0d2 100644
--- a/public/docs/js/latest/guide/displaying-data.jade
+++ b/public/docs/js/latest/guide/displaying-data.jade
@@ -297,11 +297,9 @@
code-pane(language="javascript" name="TypeScript" format="linenums").
//TypeScript
import {Component, View, bootstrap, For, If} from 'angular2/angular2';
- @Component({
- selector: 'display'
- })
+ ...
@View({
- template: `
+ template: `
<p>My name: {{ myName }}</p>
<p>Friends:</p>
<ul>
@@ -314,25 +312,25 @@
directives: [For, If]
})
class DisplayComponent {
- myName: string;
- names: Array<string>
+ ...
+ }
+
+ class FriendsService {
+ names: Array;
constructor() {
- this.myName = "Alice";
- this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+ this.names = ["Aarav", "Martín", "Shannon"];
}
}
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
- function DisplayComponent() {
+ function DisplayComponent(friends) {
this.myName = "Alice";
- this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
+ this.names = friends.names;
}
DisplayComponent.annotations = [
- new angular.ComponentAnnotation({
- selector: "display"
- }),
+ ...
new angular.ViewAnnotation({
- template:
+ template: '
'<p>My name: {{ myName }}</p>' +
'<p>Friends:</p>' +
'<ul>' +
@@ -340,7 +338,11 @@
'{{ name }}' +
'</li>' +
'</ul>' +
- '<p *if="names.length > 3">You have many friends!</p>',
+ '<p *if="names.length > 3">You have many friends!</p>'',
directives: [angular.For, angular.If]
})
];
+
+ function FriendsService () {
+ this.names = ["Aarav", "Martín", "Shannon"];
+ }