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

Live examples and formatting.

This commit is contained in:
David East 2015-04-21 17:01:09 -07:00
parent bee30ca1ad
commit d3f8fb741a
2 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,4 @@
.l-main-section
p.
<strong>Mission:</strong> By the end of this chapter, you should be able to display data from both properties and
lists from a component’s controller to the view.
p.
Displaying data is job number one for any good application. In Angular, you bind data to elements in HTML
templates and Angular automatically updates the UI as data changes.
@ -14,7 +11,9 @@
img(src='displaying-data-example1.png')
.l-sub-section
h3#section-examples Examples:
h3#section-examples Live Examples
p.
If you want to skip the working examples you can check out these links on Plunker.
ul
li
a(href='http://plnkr.co/edit/pQojSb3CTfTEejX0wGjO?p=preview') TypeScript
@ -302,24 +301,24 @@
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]
})
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({
@Component({
selector: 'display'
})
@View({
@ -338,8 +337,8 @@
class DisplayComponent {
myName: string;
todos: Array<string>;
constructor() {
constructor() {
this.myName = "Alice";
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
}
}

10
public/docs/js/latest/guide/setup.jade
View File

@ -21,6 +21,16 @@
pre.prettyprint.lang-bash
code python -m SimpleHTTPServer 8000
.l-sub-section
h3#section-examples Live Examples
p.
If you want to skip the working examples you can check out these links on Plunker.
ul
li
a(href='http://plnkr.co/edit/MRz2i7sjupzxERPAa3SF?p=preview') TypeScript
li
a(href='http://plnkr.co/edit/wzzKo4etk24t0oAnL6ep?p=preview') ES5
.l-main-section
h2#section-create-an-entry-point Create an entry point