Skip to content
This repository has been archived by the owner on Dec 4, 2017. It is now read-only.

Commit

Permalink
feat(ts): moving dev guide TS.
Browse files Browse the repository at this point in the history 
Removes plunker links as they don't support TS yet.
  • Loading branch information
@rkirov
rkirov committed May 6, 2015
1 parent 8455cf4 commit bdf28bc
Show file tree
Hide file tree
Showing 4 changed files with 238 additions and 235 deletions.
184 changes: 101 additions & 83 deletions public/docs/js/latest/guide/displaying-data.jade
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
.statement
h4 Live Examples
p.
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>.

.l-main-section

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

.callout.is-helpful
header Typescript vs ES5
p.
Although we work through the examples in TypeScript, you can also use
regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
version. Note that in ES5, you'd want to name your files <code>.js</code> rather than
<code>.ts</code>.

.l-main-section
h2#section-create-an-entry-point Create an entry point

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

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

.code-box
pre.prettyprint.linenums.lang-javascript(data-name="es5")
code.
// ES5
function DisplayComponent() {
this.myName = "Alice";
}
DisplayComponent.annotations = [
new angular.Component({
selector: "display"
}),
new angular.View({
template:
'&lt;p&gt;My name: {{ myName }}&lt;/p&gt;',
directives: [angular.For, angular.If]
})
];

pre.prettyprint.linenums.lang-typescript(data-name="typescript")
code.
// TypeScript
Expand All @@ -75,6 +61,22 @@
this.myName = "Alice";
}
}
pre.prettyprint.linenums.lang-javascript(data-name="es5")
code.
// ES5
function DisplayComponent() {
this.myName = "Alice";
}
DisplayComponent.annotations = [
new angular.ComponentAnnotation({
selector: "display"
}),
new angular.ViewAnnotation({
template:
'&lt;p&gt;My name: {{ myName }}&lt;/p&gt;',
directives: [angular.For, angular.If]
})
];
p.
You've just defined a component that encompasses a view and controller for the app. The view
defines a template:
Expand Down Expand Up @@ -124,17 +126,17 @@
h2#Create-an-array Create an array property and use For on the view
p Moving up from a single property, create an array to display as a list.
.code-box
pre.prettyprint.lang-javascript(data-name="es5")
pre.prettyprint.lang-typescript(data-name="typescript")
code.
//ES5
function DisplayComponent() {
//Typescript
constructor() {
this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
pre.prettyprint.lang-typescript(data-name="typescript")
pre.prettyprint.lang-javascript(data-name="es5")
code.
//Typescript
constructor() {
//ES5
function DisplayComponent() {
this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
Expand Down Expand Up @@ -167,20 +169,20 @@
&lt;/ul&gt;
`,
p.
To make this work, you'll also need to add the <code>angular.For</code> directive used by the template so
To make this work, you'll also need to add the <code>For</code> directive used by the template so
that Angular knows to include it:

.code-box
pre.prettyprint.lang-javascript(data-name="es5")
code.
//ES5
directives: [angular.For]
pre.prettyprint.lang-typescript(data-name="typescript")
code.
//Typescript
import {Component, View, bootstrap, For} from
...
directives: [For]
pre.prettyprint.lang-javascript(data-name="es5")
code.
//ES5
directives: [angular.For]
p Reload and you've got your list of friends!
p.
Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your
Expand Down Expand Up @@ -211,35 +213,57 @@
p Make a <code>FriendsService</code> class to provide the model with the list of friends.
pre.prettyprint.lang-javascript
code.
function FriendsService() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
class FriendsService {
names: Array&lt;string&gt;;
constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
}
p.
Replace the current list of friends in DisplayComponent by passing in the FriendsService and setting the list of
names in DisplayComponent to the names provided by the service you passed in.
pre.prettyprint.lang-javascript
code.
function DisplayComponent(friends) {
this.myName = "Alice";
this.names = friends.names;
class DisplayComponent {
names: Array&lt;string&gt;;
constructor(friendsService: FriendsService) {
this.names = friendsService.names;
}
}
p And then make FriendsService available to dependency injection
pre.prettyprint.lang-javascript
code.
DisplayComponent.annotations = [
new angular.Component({
selector: "display",
injectables: [FriendsService]
}),
@Component({
...
injectables: [DisplayComponent]
})
...
DisplayComponent.parameters = [[FriendsService]];
class DisplayComponent {...
.callout.is-helpful
header ES5 Note
p.
The dependency injection syntax here is using the low-level API and is...well...not very nice. We're
working on sugaring the syntax to match the way it works in Angular 1. Expect this to change soon.

.code-box
pre.prettyprint.lang-typescript(data-name="typescript")
code.
//TypeScript
class FriendsService {
names: Array&lt;string&gt;;
constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
}
...
class DisplayComponent {
names: Array&lt;string&gt;;

constructor(friendsService: FriendsService) {
this.names = friendsService.names;
}
}

pre.prettyprint.lang-javascript(data-name="es5")
code.
//ES5
Expand All @@ -251,11 +275,11 @@
this.names = friends.names;
}
DisplayComponent.annotations = [
new angular.Component({
new angular.ComponentAnnotation({
selector: "display",
injectables: [FriendsService]
}),
new angular.View({
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, angular.If]
})
Expand All @@ -264,12 +288,6 @@
document.addEventListener("DOMContentLoaded", function() {
angular.bootstrap(DisplayComponent);
});
pre.prettyprint.lang-typescript(data-name="typescript")
code.
//TypeScript
import {Component, View, bootstrap, For} from
...
directives: [For]
.l-main-section
h2#Conditionally-displaying-data-with-If Conditionally displaying data with If
p.
Expand All @@ -279,47 +297,23 @@
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 If directive so Angular knows to include it.
p You'll also need to add the <code>If</code> directive so Angular knows to include it.

.code-box
pre.prettyprint.lang-javascript(data-name="es5")
code.
//ES5
directives: [angular.For, angular.If]
pre.prettyprint.lang-typescript(data-name="typescript")
code.
//Typescript
import {Component, View, bootstrap, For, If} from
...
directives: [For, If]
pre.prettyprint.lang-javascript(data-name="es5")
code.
//ES5
directives: [angular.For, angular.If]
p.
As there are currently 5 items it the list, you'll see the message congratulating you on your many friends.
Remove two items from the list, reload your browser, and see that the message no longer displays.
.code-box
pre.prettyprint.lang-javascript(data-name="es5")
code.
//ES5
function DisplayComponent() {
this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
DisplayComponent.annotations = [
new angular.Component({
selector: "display"
}),
new angular.View({
template:
&#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;{{ 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]
})
];
pre.prettyprint.lang-typescript(data-name="typescript")
code.
//TypeScript
Expand All @@ -342,9 +336,33 @@
})
class DisplayComponent {
myName: string;
todos: Array<string>;
todos: Array&lt;string&gt;
constructor() {
this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
}
pre.prettyprint.lang-javascript(data-name="es5")
code.
//ES5
function DisplayComponent() {
this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
DisplayComponent.annotations = [
new angular.ComponentAnnotation({
selector: "display"
}),
new angular.ViewAnnotation({
template:
&#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;{{ 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]
})
];
Loading

0 comments on commit bdf28bc

Please sign in to comment.