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

update dart guide

This commit is contained in:
Alex Wolfe 2015-05-19 09:21:11 -07:00
parent 363373d405
commit ed597245ee
4 changed files with 377 additions and 419 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
public/docs/dart/latest/guide/displaying-data.jade
View File

@ -16,9 +16,8 @@
a <code>web/index.html</code> file, and
a <code>pubspec.yaml</code> file:
.code-box
pre.prettyprint.lang-dart(data-name="dart")
code.
code-tabs
code-pane(language="dart" name="main.dart" format="linenums").
// web/main.dart
library displaying_data;
@ -32,8 +31,7 @@
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(DisplayComponent);
}
pre.prettyprint.lang-html(data-name="html")
code.
code-pane(language="html" name="index.html" format="linenums").
&lt;!-- web/index.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
@ -48,8 +46,7 @@
&lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
pre.prettyprint.lang-yaml(data-name="yaml")
code.
code-pane(language="yaml" name="pubspec.yaml" format="linenums").
# pubspec.yaml
name: displaying_data
description: Dart version of Angular 2 example, Displaying Data
@ -57,7 +54,6 @@
dependencies:
angular2: 2.0.0-alpha.22
browser: any
p.
All of this code should look familiar from the previous page,
except for the <code>library</code> and <code>part</code> statements
@ -78,8 +74,7 @@
named <code>show_properties.dart</code>,
and add the following:
pre.prettyprint.lang-dart
code.
code-example(language="dart" format="linenums").
// web/show_properties.dart
part of displaying_data;
@ -99,8 +94,7 @@
You've just defined a component that encompasses a view and controller for the app. The view
defines a template:
pre.prettyprint.lang-html
code.
code-example(language="html").
&lt;p&gt;My name: {{ myName }}&lt;/p&gt;
p.
@ -134,8 +128,7 @@
Add a second line to the template,
so you can see Angular dynamically update content:
pre.prettyprint.lang-html
code.
code-example(language="html").
&lt;p&gt;Current time: {{ time }}&lt;/p&gt;
p.
@ -143,8 +136,7 @@
a call to update time
via <code>setInterval</code>:
pre.prettyprint.lang-dart
code.
code-example(language="dart" format="linenums").
class DisplayComponent {
String myName = 'Alice';
String time;
@ -166,8 +158,7 @@
h2#Create-an-array Display an iterable using *for
p Moving up from a single value, create a property that's a list of values.
pre.prettyprint.lang-dart
code.
code-example(language="dart" format="linenums").
class DisplayComponent {
String myName = 'Alice';
List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
@ -177,8 +168,7 @@
You can then use this list in your template with the <code>for</code> directive to create copies of DOM elements
with one for each item in the list.
pre.prettyprint.lang-dart
code.
code-example(language="dart" format="linenums").
@View(
template: '''
&lt;p>My name: {{ myName }}&lt;/p>
@ -196,8 +186,7 @@
Add <code>For</code> using the optional <code>directives</code> parameter,
which contains a list of directives:
pre.prettyprint.lang-dart
code.
code-example(language="dart" format="linenums").
@View(
template: '''
// ...HTML...
@ -213,8 +202,7 @@
p Let's look at the few lines that do the work again:
pre.prettyprint.lang-html
code.
code-example(language="html" format="linenums").
&lt;li *for=&quot;#name of friendNames&quot;&gt;
{{ name }}
&lt;/li&gt;
@ -241,8 +229,7 @@
Make a <code>FriendsService</code> class to implement a model containing a list of friends. We'll put this in a new
<code>friends_service.dart</code> under <code>web/</code>. Here's what the class looks like:
pre.prettyprint.lang-dart
code.
code-example(language="dart" format="linenums").
// web/friends_service.dart
part of displaying_data;
@ -260,8 +247,7 @@
First add a FriendsService parameter to the constructor.
Then set <code>friendNames</code> to the names provided by the service.
pre.prettyprint.lang-dart
code.
code-example(language="dart" format="linenums").
// In web/show_properties.dart
class DisplayComponent {
String myName = 'Alice';
@ -277,8 +263,7 @@
by adding an <code>injectables</code> parameter to DisplayComponent's
<code>@Component</code> annotation:
pre.prettyprint.lang-dart
code.
code-example(language="dart" format="linenums").
@Component(
selector: 'display',
injectables: const[FriendsService]
@ -292,16 +277,14 @@
p See it in action by adding a paragraph at the end of your template:
pre.prettyprint.lang-html
code.
code-example(language="html").
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt;
p.
Also add <code>If</code> to the list of directives,
so Angular knows to include it:
pre.prettyprint.lang-dart
code.
code-example(language="dart").
directives: const[For, If]
p.
The list current has 5 items, so if you run the app you'll see the message
@ -313,9 +296,8 @@
p Here's the final code.
.code-box
pre.prettyprint.lang-dart(data-name="show_properties.dart")
code.
code-tabs
code-pane(language="dart" name="show_properties.dart" format="linenums").
// web/show_properties.dart
part of displaying_data;
@ -343,16 +325,14 @@
friendNames = friendsService.names;
}
}
pre.prettyprint.lang-dart(data-name="friends_service.dart")
code.
code-pane(language="dart" name="friends_service.dart" format="linenums").
// web/friends_service.dart
part of displaying_data;
class FriendsService {
List&lt;String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
}
pre.prettyprint.lang-dart(data-name="main.dart")
code.
code-pane(language="dart" name="main.dart" format="linenums").
// web/main.dart
library displaying_data;
@ -369,8 +349,7 @@
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(DisplayComponent);
}
pre.prettyprint.lang-html(data-name="html")
code.
code-pane(language="html" name="index.html" format="linenums").
&lt;!-- web/index.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
@ -385,8 +364,7 @@
&lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
pre.prettyprint.lang-yaml(data-name="yaml")
code.
code-pane(language="yaml" name="pubspec.yaml" format="linenums").
# pubspec.yaml
name: displaying_data
description: Dart version of Angular 2 example, Displaying Data
@ -411,16 +389,14 @@
declare a library in <code>main.dart</code>.
Then make <code>show_properties.dart</code> part of that library.
.code-box
pre.prettyprint.lang-dart(data-name="main library file")
code.
code-tabs
code-pane(language="dart" name="main.dart" format="linenums").
// web/main.dart
library displaying_data;
// imports...
part 'show_properties.dart';
// Code goes here...
pre.prettyprint.lang-dart(data-name="additional library file")
code.
code-pane(language="dart" name="show_properties.dar" format="linenums").
// web/show_properties.dart
part of displaying_data;
// Code goes here...

6
public/docs/dart/latest/guide/making-components.jade
View File

@ -10,8 +10,7 @@
you can create a parent
component that uses a <code>&lt;child&gt;</code> component like so:
pre.prettyprint.linenums.lang-dart
code.
code-example(language="dart" format="linenums").
part of making_components;
@Component(
@ -30,8 +29,7 @@
p You then just need to write the <code>ChildComponent</code> class to make it work:
pre.prettyprint.linenums.lang-dart
code.
code-example(language="dart" format="linenums").
part of making_components;
@Component(

9
public/docs/dart/latest/guide/setup.jade
View File

@ -24,8 +24,7 @@
To use Angular2 in your app, include angular2 as a dependency in
your app's <b>pubspec.yaml</b> file. For example:
pre.prettyprint.lang-yaml
code.
code-example(language="yaml").
# pubspec.yaml
name: getting_started
description: Dart version of Angular 2 example, Getting Started
@ -51,8 +50,7 @@
and creating a top-level <code>main()</code> function that calls
Angular's <code>bootstrap()</code> function.
pre.prettyprint.lang-dart
code.
code-example(language="javascript").
// web/main.dart
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
@ -79,8 +77,7 @@
Edit <code>index.html</code> to add a <code>&lt;my-app&gt;</code> element
and call <code>main.dart</code>.
pre.prettyprint.lang-html
code.
code-example(language="html").
&lt;!-- web/index.html -->
&lt;!DOCTYPE html&gt;
&lt;html&gt;

41
public/docs/dart/latest/guide/user-input.jade
View File

@ -5,8 +5,7 @@
p.
You can specify the event handler—a method in the component controller—like this:
pre.prettyprint.lang-html
code.
code-example(language="html").
&lt;input (keyup)="myControllerMethod()"&gt;
p.
As in previous examples, you can make element references available to
@ -17,8 +16,7 @@
<!-- PENDING: make sure we use recommended word separation scheme.
my-name doesn't work, but my_name does. Would myName work? -->
pre.prettyprint.lang-html
code.
code-example(language="html").
&lt;input #myname (keyup)&gt;
&lt;p&gt;{{myname.value}}&lt;/p&gt;
@ -46,8 +44,7 @@
Then add a method that adds new items
to the list.
pre.prettyprint.lang-dart
code.
code-example(language="dart" format="linenums").
class TodoList {
List&lt;String&gt; todos =
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
@ -73,8 +70,7 @@
Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos list and set
its text to the value.
pre.prettyprint.lang-html
code.
code-example(language="html" format="linenums").
&lt;ul&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt;
{{ todo }}
@ -87,8 +83,7 @@
Now, add a text input and a button for users to add items to the list. As you saw above, you can create a local
variable reference in your template with <code>#varname</code>. Call it <code>#todotext</code> here.
pre.prettyprint.lang-html
code.
code-example(language="html").
&lt;input #todotext&gt;
p.
Specify the target of the click event binding as your controller's
@ -96,8 +91,7 @@
it the value. Since you created a reference called <code>todotext</code>,
you can get the value with <code>todotext.value.</code>
pre.prettyprint.lang-html
code.
code-example(language="html").
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
p.
@ -107,9 +101,8 @@
<a href="https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:html">dart:html</a>,
so be sure to import that library.
.code-box
pre.prettyprint.lang-dart(data-name="todo_list.dart")
code.
code-tabs
code-pane(language="dart" name="todo_list.dart" format="linenums").
// In the template:
&lt;input #todotext (keyup)="doneTyping(\$event)"&gt;
@ -121,20 +114,17 @@
e.value = null;
}
}
pre.prettyprint.lang-dart(data-name="main.dart")
code.
code-pane(language="dart" name="main.dart" format="linenums").
library user_input;
import 'dart:html';
...
.l-main-section
h2#section-final-code Final code
.code-box
pre.prettyprint.lang-dart(data-name="todo_list.dart")
code.
code-tabs
code-pane(language="dart" name="todo_list.dart" format="linenums").
// web/todo_list.dart
part of user_input;
@ -172,8 +162,7 @@
}
}
}
pre.prettyprint.lang-dart(data-name="main.dart")
code.
code-pane(language="dart" name="main.dart" format="linenums").
// web/main.dart
library user_input;
@ -189,8 +178,7 @@
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(TodoList);
}
pre.prettyprint.lang-html(data-name="html")
code.
code-pane(language="html" name="index.html" format="linenums").
&lt;!-- web/index.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
@ -205,8 +193,7 @@
&lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
pre.prettyprint.lang-yaml(data-name="yaml")
code.
code-pane(language="yaml" name="pubspec.yaml" format="linenums").
# pubspec.yaml
name: user_input
description: Dart version of Angular 2 example, Responding to User Input