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

displaying data fix

Browse Source
This commit is contained in:
Alex Wolfe 2015-04-22 07:17:26 -07:00
parent 459ea70464
commit 64c5aff275
4 changed files with 214 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,33 +1,34 @@
.statement .statement
h4 Live Examples h4 Live Examples
p. 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>. 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 .l-main-section
h2#section-displaying-controller-properties Displaying controller properties h2#section-displaying-controller-properties Displaying controller properties
p. p.
Let's walk through how we'd display a property, a list of properties, and then conditionally show content Let's walk through how we'd display a property, a list of properties, and then conditionally show content
based on state. based on state. We'll end up with a UI that looks like this:
p.
We'll end up with a UI that looks like this: figure.image-display
div(align='center') img(src='displaying-data-example1.png')
img(src='displaying-data-example1.png')
.l-main-section .l-main-section
h2#section-create-an-entry-point Create an entry point h2#section-create-an-entry-point Create an entry point
p Open your favorite editor and create a show-properties.html file with the content: p Open your favorite editor and create a show-properties.html file with the content:
pre.prettyprint.linenums.lang-html .code-box
code. pre.prettyprint.linenums.lang-html(data-name="es5")
//ES5 code.
&lt;display&gt;&lt;/display&gt; //ES5
&lt;display&gt;&lt;/display&gt;
pre.prettyprint.linenums.lang-html pre.prettyprint.linenums.lang-html(data-name="typescript")
code. code.
//TypeScript //TypeScript
&lt;display&gt;&lt;/display&gt; &lt;display&gt;&lt;/display&gt;
p p
| The <code>&lt;display&gt;</code> component here acts as the site where you'll insert your application. | The <code>&lt;display&gt;</code> component here acts as the site where you'll insert your application.
@ -42,45 +43,46 @@
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.js</code>, and add the following:
pre.prettyprint.linenums.lang-javascript .code-box
code. pre.prettyprint.linenums.lang-javascript(data-name="es5")
// ES5 code.
function DisplayComponent() { // ES5
this.myName = "Alice"; 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
code.
// TypeScript
import {Component, View, bootstrap, For} from 'angular2/angular2';
@Component({
selector: 'display'
})
@View({
template: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt
`,
directives: [For]
})
class DisplayComponent {
myName: string;
todos: Array&lt;string&gt;;
constructor() {
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
import {Component, View, bootstrap, For} from 'angular2/angular2';
@Component({
selector: 'display'
})
@View({
template: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt
`,
directives: [For]
})
class DisplayComponent {
myName: string;
todos: Array&lt;string&gt;;
constructor() {
this.myName = "Alice";
}
}
p. p.
You've just defined a component that encompases a view and controller for the app. The view You've just defined a component that encompases a view and controller for the app. The view
defines a template: defines a template:
@ -129,61 +131,64 @@
.l-main-section .l-main-section
h2#Create-an-array Create an array property and use For on the view 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. p Moving up from a single property, create an array to display as a list.
pre.prettyprint.lang-javascript .code-box
code. pre.prettyprint.lang-javascript(data-name="es5")
//ES5 code.
function DisplayComponent() { //ES5
this.myName = "Alice"; function DisplayComponent() {
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; this.myName = "Alice";
} this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
pre.prettyprint.lang-typescript }
code. pre.prettyprint.lang-typescript(data-name="typescript")
//Typescript code.
constructor() { //Typescript
this.myName = "Alice"; constructor() {
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; this.myName = "Alice";
} this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
p. p.
You can then use this array in your template with the <code>for</code> directive to create copies of DOM elements You can then use this array in your template with the <code>for</code> directive to create copies of DOM elements
with one for each item in the array. with one for each item in the array.
pre.prettyprint.lang-javascript .code-box
code. pre.prettyprint.lang-javascript(data-name="es5")
//ES5 code.
template: //ES5
&#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; + template:
&#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; + &#39;&lt;p&gt;My name: {{ myName }}&lt;/p&gt;&#39; +
&#39;&lt;ul&gt;&#39; + &#39;&lt;p&gt;Friends:&lt;/p&gt;&#39; +
&#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; + &#39;&lt;ul&gt;&#39; +
&#39;{{ name }}&#39; + &#39;&lt;li *for=&quot;#name of names&quot;&gt;&#39; +
&#39;&lt;/li&gt;&#39; + &#39;{{ name }}&#39; +
&#39;&lt;/ul&gt;&#39;, &#39;&lt;/li&gt;&#39; +
&#39;&lt;/ul&gt;&#39;,
pre.prettyprint.lang-typescript pre.prettyprint.lang-typescript(data-name="typescript")
code. code.
//Typescript //Typescript
template: ` template: `
&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;
&lt;li *for=&quot;#name of names&quot;&gt; &lt;li *for=&quot;#name of names&quot;&gt;
{{ name }} {{ name }}
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
`, `,
p. 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>angular.For</code> directive used by the template so
that Angular knows to include it: that Angular knows to include it:
pre.prettyprint.lang-javascript .code-box
code. pre.prettyprint.lang-javascript(data-name="es5")
//ES5 code.
directives: [angular.For] //ES5
pre.prettyprint.lang-typescript directives: [angular.For]
code. pre.prettyprint.lang-typescript(data-name="typescript")
//Typescript code.
import {Component, View, bootstrap, For} from //Typescript
... import {Component, View, bootstrap, For} from
directives: [For] ...
directives: [For]
p Reload and you've got your list of friends! p Reload and you've got your list of friends!
p. p.
Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your
@ -241,36 +246,38 @@
p. p.
The dependency injection syntax here is using the low-level API and is...well...not very nice. We're 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. working on sugaring the syntax to match the way it works in Angular 1. Expect this to change soon.
pre.prettyprint.lang-javascript
code. .code-box
//ES5 pre.prettyprint.lang-javascript(data-name="es5")
function FriendsService() { code.
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"]; //ES5
} function FriendsService() {
function DisplayComponent(friends) { this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
this.myName = "Alice"; }
this.names = friends.names; function DisplayComponent(friends) {
} this.myName = "Alice";
DisplayComponent.annotations = [ this.names = friends.names;
new angular.Component({ }
selector: "display", DisplayComponent.annotations = [
injectables: [FriendsService] new angular.Component({
}), selector: "display",
new angular.View({ injectables: [FriendsService]
template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&lt;{{ name }}&gt;/li&lt; &gt;/ul&lt;', }),
directives: [angular.For, angular.If] new angular.View({
}) template: '{{ myName }} &lt;ul&gt; &lt;li *for="#name of names"&lt;{{ name }}&gt;/li&lt; &gt;/ul&lt;',
]; directives: [angular.For, angular.If]
DisplayComponent.parameters = [[FriendsService]]; })
document.addEventListener("DOMContentLoaded", function() { ];
angular.bootstrap(DisplayComponent); DisplayComponent.parameters = [[FriendsService]];
}); document.addEventListener("DOMContentLoaded", function() {
pre.prettyprint.lang-typescript angular.bootstrap(DisplayComponent);
code. });
//TypeScript pre.prettyprint.lang-typescript(data-name="typescript")
import {Component, View, bootstrap, For} from code.
... //TypeScript
directives: [For] import {Component, View, bootstrap, For} from
...
directives: [For]
.l-main-section .l-main-section
h2#Conditionally-displaying-data-with-If Conditionally displaying data with If h2#Conditionally-displaying-data-with-If Conditionally displaying data with If
p. p.
@ -281,69 +288,71 @@
code. code.
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt; &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 If directive so Angular knows to include it.
pre.prettyprint.lang-javascript .code-box
code. pre.prettyprint.lang-javascript(data-name="es5")
//ES5 code.
directives: [angular.For, angular.If] //ES5
pre.prettyprint.lang-typescript directives: [angular.For, angular.If]
code. pre.prettyprint.lang-typescript(data-name="typescript")
//Typescript code.
import {Component, View, bootstrap, For, If} from //Typescript
... import {Component, View, bootstrap, For, If} from
directives: [For, If] ...
directives: [For, If]
p. p.
As there are currently 5 items it the list, you'll see the message congratulating you on your many friends. 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. Remove two items from the list, reload your browser, and see that the message no longer displays.
pre.prettyprint.lang-javascript .code-box
code. pre.prettyprint.lang-javascript(data-name="es5")
//ES5 code.
function DisplayComponent() { //ES5
this.myName = "Alice"; function DisplayComponent() {
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
code.
//TypeScript
import {Component, View, bootstrap, For, If} from 'angular2/angular2';
@Component({
selector: 'display'
})
@View({
template: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p&gt;Friends:&lt;/p&gt;
&lt;ul&gt;
&lt;li *for=&quot;#name of names&quot;&gt;
{{ name }}
&lt;/li&gt;
&lt;/ul&gt;
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
`,
directives: [For, If]
})
class DisplayComponent {
myName: string;
todos: Array<string>;
constructor() {
this.myName = "Alice"; this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"]; 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
import {Component, View, bootstrap, For, If} from 'angular2/angular2';
@Component({
selector: 'display'
})
@View({
template: `
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p&gt;Friends:&lt;/p&gt;
&lt;ul&gt;
&lt;li *for=&quot;#name of names&quot;&gt;
{{ name }}
&lt;/li&gt;
&lt;/ul&gt;
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
`,
directives: [For, If]
})
class DisplayComponent {
myName: string;
todos: Array<string>;
constructor() {
this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
}

1
public/resources/css/main.scss
View File

@ -33,6 +33,7 @@
@import 'module/overlay'; @import 'module/overlay';
@import 'module/alert'; @import 'module/alert';
@import 'module/callout'; @import 'module/callout';
@import 'module/images';
@import 'module/card'; @import 'module/card';
@import 'module/hover-card'; @import 'module/hover-card';
@import 'module/modal'; @import 'module/modal';

2
public/resources/css/module/_code-box.scss
View File

@ -3,7 +3,7 @@
background: $steel; background: $steel;
box-shadow: 0px 2px 5px rgba($coal, .3); box-shadow: 0px 2px 5px rgba($coal, .3);
display: none; display: none;
margin-bottom: $unit * 3; margin-bottom: $unit * 2;
header { header {
background: darken($steel, 5%); background: darken($steel, 5%);

13
public/resources/css/module/_images.scss Normal file
View File

@ -0,0 +1,13 @@
.image-display {
border-radius: 4px;
background: $mist;
padding: $unit * 2;
display: inline-block;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
margin: 0px 0px ($unit * 2) 0px;
img {
border-radius: 4px;
display: inline-block;
}
}