8000 feat(ts): moving dev guide TS. · rusongyu/angular.io@bdf28bc · GitHub
[go: up one dir, main page]
Skip to content

Commit bdf28bc

Browse files
rkirovrkirov
committed
feat(ts): moving dev guide TS.
Removes plunker links as they don't support TS yet.
1 parent 8455cf4 commit bdf28bc

File tree

4 files changed

+238
-235
lines changed

4 files changed

+238
-235
lines changed

‎public/docs/js/latest/guide/displaying-data.jade

Lines changed: 101 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
.statement
2-
h4 Live Examples
3-
p.
4-
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/GOJiWOEem9jrOyEeY3uW?p=preview'> ES5 Example</a>.
5-
61
.l-main-section
72

83
h2#section-displaying-controller-properties Displaying controller properties
@@ -15,6 +10,14 @@
1510
figure.image-display
1611
img(src='displaying-data-example1.png')
1712

13+
.callout.is-helpful
14+
header Typescript vs ES5
15+
p.
16+
Although we work through the examples in TypeScript, you can also use
17+
regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
18+
version. Note that in ES5, you'd want to name your files <code>.js</code> rather than
19+
<code>.ts</code>.
20+
1821
.l-main-section
1922
h2#section-create-an-entry-point Create an entry point
2023

@@ -33,26 +36,9 @@
3336
| The simple method for binding text into templates is through interpolation where you put the name of a property
3437
| inside <strong>{{ }}</strong>.
3538

36-
p To see this working, create another file, <code>show-properties.js</code>, and add the following:
39+
p To see this working, create another file, <code>show-properties.ts</code>, and add the following:
3740

3841
.code-box
39-
pre.prettyprint.linenums.lang-javascript(data-name="es5")
40-
code.
41-
// ES5
42-
function DisplayComponent() {
43-
this.myName = "Alice";
44-
}
45-
DisplayComponent.annotations = [
46-
new angular.Component({
47-
selector: "display"
48-
}),
49-
new angular.View({
50-
template:
51-
'&lt;p&gt;My name: {{ myName }}&lt;/p&gt;',
52-
directives: [angular.For, angular.If]
53-
})
54-
];
55-
5642
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
5743
code.
5844
// TypeScript
@@ -75,6 +61,22 @@
7561
this.myName = "Alice";
7662
}
7763
}
64+
pre.prettyprint.linenums.lang-javascript(data-name="es5")
65+
code.
66+
// ES5
67+
function DisplayComponent() {
68+
this.myName = "Alice";
69+
}
70+
DisplayComponent.annotations = [
71+
new angular.ComponentAnnotation({
72+
selector: "display"
73+
}),
74+
new angular.ViewAnnotation({
75+
template:
76+
'&lt;p&gt;My name: {{ myName }}&lt;/p&gt;',
77+
directives: [angular.For, angular.If]
78+
})
79+
];
7880
p.
7981
You've just defined a component that encompasses a view and controller for the app. The view
8082
defines a template:
@@ -124,17 +126,17 @@
124126
h2#Create-an-array Create an array property and use For on the view
125127
p Moving up from a single property, create an array to display as a list.
126128
.code-box
127-
pre.prettyprint.lang-javascript(data-name="es5")
129+
pre.prettyprint.lang-typescript(data-name="typescript")
128130
code.
129-
//ES5
130-
function DisplayComponent() {
131+
//Typescript
132+
constructor() {
131133
this.myName = "Alice";
132134
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
133135
}
134-
pre.prettyprint.lang-typescript(data-name="typescript")
136+
pre.prettyprint.lang-javascript(data-name="es5")
135137
code.
136-
//Typescript
137-
constructor() {
138+
//ES5
139+
function DisplayComponent() {
138140
this.myName = "Alice";
139141
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
140142
}
@@ -167,20 +169,20 @@
167169
&lt;/ul&gt;
168170
`,
169171
p.
170-
To make this work, you'll also need to add the <code>angular.For</code> directive used by the template so
172+
To make this work, you'll also need to add the <code>For</code> directive used by the template so
171173
that Angular knows to include it:
172174

173175
.code-box
174-
pre.prettyprint.lang-javascript(data-name="es5")
175-
code.
176-
//ES5
177-
directives: [angular.For]
178176
pre.prettyprint.lang-typescript(data-name="typescript")
179177
code.
180178
//Typescript
181179
import {Component, View, bootstrap, For} from
182180
...
183181
directives: [For]
182+
pre.prettyprint.lang-javascript(data-name="es5")
183+
code.
184+
//ES5
185+
directives: [angular.For]
184186
p Reload and you've got your list of friends!
185187
p.
186188
Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your
@@ -211,35 +213,57 @@
211213
p Make a <code>FriendsService</code> class to provide the model with the list of friends.
212214
pre.prettyprint.lang-javascript
213215
code.
214-
function FriendsService() {
215-
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
216+
class FriendsService {
217+
names: Array&lt;string&gt;;
218+
constructor() {
219+
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
220+
}
216221
}
217222
p.
218223
Replace the current list of friends in DisplayComponent by passing in the FriendsService and setting the list of
219224
names in DisplayComponent to the names provided by the service you passed in.
220225
pre.prettyprint.lang-javascript
221226
code.
222-
function DisplayComponent(friends) {
223-
this.myName = "Alice";
224-
this.names = friends.names;
227+
class DisplayComponent {
228+
names: Array&lt;string&gt;;
229+
constructor(friendsService: FriendsService) {
230+
this.names = friendsService.names;
231+
}
225232
}
226233
p And then make FriendsService available to dependency injection
227234
pre.prettyprint.lang-javascript
228235
code.
229-
DisplayComponent.annotations = [
230-
new angular.Component({
231-
selector: "display",
232-
injectables: [FriendsService]
233-
}),
236+
@Component({
237+
...
238+
injectables: [DisplayComponent]
239+
})
234240
...
235-
DisplayComponent.parameters = [[FriendsService]];
241+
class DisplayComponent {...
236242
.callout.is-helpful
237243
header ES5 Note
238244
p.
239245
The dependency injection syntax here is using the low-level API and is...well...not very nice. We're
240246
working on sugaring the syntax to match the way it works in Angular 1. Expect this to change soon.
241247

242248
.code-box
249+
pre.prettyprint.lang-typescript(data-name="typescript")
250+
code.
251+
//TypeScript
252+
class FriendsService {
253+
names: Array&lt;string&gt;;
254+
constructor() {
255+
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
256+
}
257+
}
258+
...
259+
class DisplayComponent {
260+
names: Array&lt;string&gt;;
261+
262+
constructor(friendsService: FriendsService) {
263+
this.names = friendsService.names;
264+
}
265+
}
266+
243267
pre.prettyprint.lang-javascript(data-name="es5")
244268
code.
245269
//ES5
@@ -251,11 +275,11 @@
251275
this.names = friends.names;
252276
}
253277
DisplayComponent.annotations = [
254-
new angular.Component({
278+
new angular.ComponentAnnotation({
255279
selector: "display",
256280
injectables: [FriendsService]
257281
}),
258-
new angular.View({
282+
new angular.ViewAnnotation({
259283
template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&gt;{{ name }}&lt;/li&gt; &lt;/ul&gt;',
260284
directives: [angular.For, angular.If]
261285
})
@@ -264,12 +288,6 @@
264288
document.addEventListener("DOMContentLoaded", function() {
265289
angular.bootstrap(DisplayComponent);
266290
});
267-
pre.prettyprint.lang-typescript(data-name="typescript")
268-
code.
269-
//TypeScript
270-
import {Component, View, bootstrap, For} from
271-
...
272-
directives: [For]
273291
.l-main-section
274292
h2#Conditionally-displaying-data-with-If Conditionally displaying data with If
275293
p.
@@ -279,47 +297,23 @@
279297
pre.prettyprint.lang-html
280298
code.
281299
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
282-
p You'll also need to add the If directive so Angular knows to include it.
300+
p You'll also need to add the <code>If</code> directive so Angular knows to include it.
283301

284302
.code-box
285-
pre.prettyprint.lang-javascript(data-name="es5")
286-
code.
287-
//ES5
288-
directives: [angular.For, angular.If]
289303
pre.prettyprint.lang-typescript(data-name="typescript")
290304
code.
291305
//Typescript
292306
import {Component, View, bootstrap, For, If} from
293307
...
294308
directives: [For, If]
309+
pre.prettyprint.lang-javascript(data-name="es5")
310+
code.
311+
//ES5
312+
directives: [angular.For, angular.If]
295313
p.
296314
As there are currently 5 items it the list, you'll see the message congratulating you on your many friends.
297315
Remove two items from the list, reload your browser, and see that the message no longer displays.
298316
.code-box
299-
pre.prettyprint.lang-javascript(data-name="es5")
300-
code.
301-
//ES5
302-
function DisplayComponent() {
303-
this.myName = "Alice";
304-
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
305-
}
306-
DisplayComponent.annotations = [
307-
new angular.Component({
308-
selector: "display"
309-
}),
310-
new angular.View({
311-
template:
312-
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
313-
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
314-
&#39;&lt;ul&gt;&#39; +
315-
&#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
316-
&#39;{{ name }}&#39; +
317-
&#39;&lt;/li&gt;&#39; +
318-
&#39;&lt;/ul&gt;&#39; +
319-
&#39;&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;,
320-
directives: [angular.For, angular.If]
321-
})
322-
];
323317
pre.prettyprint.lang-typescript(data-name="typescript")
324318
code.
325319
//TypeScript
@@ -342,9 +336,33 @@
342336
})
343337
class DisplayComponent {
344338
myName: string;
345-
todos: Array<string>;
339+
todos: Array&lt;string&gt;
346340
constructor() {
347341
this.myName = "Alice";
348342
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
349343
}
350344
}
345+
pre.prettyprint.lang-javascript(data-name="es5")
346+
code.
347+
//ES5
348+
function DisplayComponent() {
349+
this.myName = "Alice";
350+
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
351+
}
352+
DisplayComponent.annotations = [
353+
new angular.ComponentAnnotation({
354+
selector: "display"
355+
}),
356+
new angular.ViewAnnotation({
357+
template:
358+
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
359+
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
360+
&#39;&lt;ul&gt;&#39; +
361+
&#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
362+
&#39;{{ name }}&#39; +
363+
&#39;&lt;/li&gt;&#39; +
364+
&#39;&lt;/ul&gt;&#39; +
365+
&#39;&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;&#39;,
366+
directives: [angular.For, angular.If]
367+
})
368+
];

0 commit comments

Comments
 (0)
0