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

style(guide): add more context throughout displaying-data guide

This commit is contained in:
Jeff Cross 2015-05-19 14:33:21 -07:00
parent 20f1992e33
commit 99663edb8c
1 changed files with 50 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -110,16 +110,21 @@
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
//Typescript
constructor() {
this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
class DisplayComponent {
myName: string;
<span class='otl'>names: Array<string>;</span>
constructor() {
this.myName = "Alice";
<span class='otl'>this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];</span>
}
}
code-pane(language="javascript" name="Javascript (ES5)" format="linenums").
//ES5
function DisplayComponent() {
this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
<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
@ -155,13 +160,22 @@
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
//Typescript
...
import {Component, View, bootstrap, For} from 'angular2/angular2';
@View({
...
directives: [For]
})
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
directives: [angular.For]
DisplayComponent.annotations = [
...
new angular.ViewAnnotation({
...
directives: [angular.For]
})
];
p Reload and you've got your list of friends!
p.
@ -185,39 +199,32 @@
p Using this syntax, you can build UI lists from any iterable object.
.l-main-section
h2#Create-a-class Create a class for the array property and inject into component
p.
Before we get too much further, we should mention that putting our model (array) directly in our controller isn't
proper form. We should separate the concerns by having another class serve the role of model and inject it into
the controller.
p Make a <code>FriendsService</code> class to provide the model with the list of friends.
code-example(language="javascript" format="linenums").
class FriendsService {
names: Array&lt;string&gt;;
constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
class FriendsService {
names: Array&lt;string&gt;;
constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
}
code-pane(language="javascript" name="ES5" format="linenums").
function FriendsService() {
this.names = ["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
Now replace the current list of friends in DisplayComponent by including the FriendsService in the injectables list,
then including the service in the constructor, and finally setting the list of
names in DisplayComponent to the names provided by the service you passed in.
code-example(language="javascript" format="linenums").
class DisplayComponent {
names: Array&lt;string&gt;;
constructor(friendsService: FriendsService) {
this.names = friendsService.names;
}
}
p And then make FriendsService available to dependency injection
code-example(language="javascript" format="linenums").
@Component({
...
injectables: [FriendsService]
})
...
class DisplayComponent {...
.callout.is-helpful
header ES5 Note
p.
@ -226,41 +233,39 @@
code-tabs
code-pane(language="javascript" name="TypeScript" format="linenums").
//TypeScript
class FriendsService {
@Component({
...
<span class='otl'>injectables: [FriendsService]</span>
})
class DisplayComponent {
myName: string;
names: Array&lt;string&gt;;
constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
constructor(<span class='otl'>friendsService: FriendsService</span>) {
this.myName = 'Alice';
<span class='otl'>this.names = friendsService.names;</span>
}
}
...
class DisplayComponent {
names: Array&lt;string&gt;;
constructor(friendsService: FriendsService) {
this.names = friendsService.names;
}
}
code-pane(language="javascript" name="ES5" format="linenums").
//ES5
function FriendsService() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
function DisplayComponent(friends) {
function DisplayComponent(<span class='otl'>friends</span>) {
this.myName = "Alice";
this.names = friends.names;
this.names = <span class='otl'>friends.names</span>;
}
DisplayComponent.annotations = [
new angular.ComponentAnnotation({
selector: "display",
injectables: [FriendsService]
<span class='otl'>injectables: [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, angular.If]
directives: [angular.For]
})
];
DisplayComponent.parameters = [[FriendsService]];
<span class='otl'>DisplayComponent.parameters = [[FriendsService]];</span>
document.addEventListener("DOMContentLoaded", function() {
angular.bootstrap(DisplayComponent);
});