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

update dart docs to alpha.38

Browse Source
This commit is contained in:
Kathy Walrath 2015-09-23 18:19:14 -07:00 committed by Naomi Black
parent 5afd02a34c
commit 9907ef265e
4 changed files with 53 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,6 +18,7 @@
code-tabs code-tabs
code-pane(language="dart" name="web/main.dart" format="linenums"). code-pane(language="dart" name="web/main.dart" format="linenums").
import 'package:angular2/angular2.dart';
import 'package:angular2/bootstrap.dart'; import 'package:angular2/bootstrap.dart';
import 'package:displaying_data/show_properties.dart'; import 'package:displaying_data/show_properties.dart';
@ -28,14 +29,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Displaying Data</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script async src="main.dart" type="application/dart"></script>
<script async src="packages/browser/dart.js"></script>
</head> </head>
<body> <body>
<display></display> <display></display>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</body> </body>
</html> </html>
code-pane(language="yaml" name="pubspec.yaml" format="linenums"). code-pane(language="yaml" name="pubspec.yaml" format="linenums").
@ -43,7 +43,7 @@
description: Dart version of Angular 2 example, Displaying Data description: Dart version of Angular 2 example, Displaying Data
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.33 angular2: 2.0.0-alpha.38
browser: ^0.10.0 browser: ^0.10.0
transformers: transformers:
- angular2: - angular2:
@ -258,12 +258,11 @@
p. p.
Next, make FriendsService available to dependency injection Next, make FriendsService available to dependency injection
by adding a <code>viewInjector</code> parameter to DisplayComponent's by adding a <code>viewBindings</code> parameter to DisplayComponent's
<code>@Component</code> annotation: <code>@Component</code> annotation:
<!-- TODO: check with vsavkin: use viewInjector or hostInjector here? -->
code-example(language="dart"). code-example(language="dart").
@Component(selector: 'display', <span class="pnk">viewInjector: const [FriendsService]</span>) @Component(selector: 'display', <span class="pnk">viewBindings: const [FriendsService]</span>)
.l-main-section .l-main-section
h2#Conditionally-displaying-data-with-NgIf Conditionally display data using *ng-if h2#Conditionally-displaying-data-with-NgIf Conditionally display data using *ng-if
@ -297,7 +296,7 @@
import 'package:angular2/angular2.dart'; import 'package:angular2/angular2.dart';
import 'package:displaying_data/friends_service.dart'; import 'package:displaying_data/friends_service.dart';
@Component(selector: 'display', viewInjector: const [FriendsService]) @Component(selector: 'display', viewBindings: const [FriendsService])
@View(template: ''' @View(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;
@ -326,6 +325,7 @@
List&lt;String&gt; names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai']; List&lt;String&gt; names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
} }
code-pane(language="dart" name="web/main.dart" format="linenums"). code-pane(language="dart" name="web/main.dart" format="linenums").
import 'package:angular2/angular2.dart';
import 'package:angular2/bootstrap.dart'; import 'package:angular2/bootstrap.dart';
import 'package:displaying_data/show_properties.dart'; import 'package:displaying_data/show_properties.dart';
@ -336,14 +336,13 @@
&lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt;
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
&lt;link rel="stylesheet" href="style.css"&gt; &lt;title&gt;Displaying Data&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;script async src=&quot;main.dart&quot; type=&quot;application/dart&quot;&gt;&lt;/script&gt;
&lt;script async src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt; &lt;/head&gt;
&lt;body&gt; &lt;body&gt;
&lt;display&gt;&lt;/display&gt; &lt;display&gt;&lt;/display&gt;
&lt;script type="application/dart" src="main.dart"&gt;&lt;/script&gt;
&lt;script src="packages/browser/dart.js"&gt;&lt;/script&gt;
&lt;/body&gt; &lt;/body&gt;
&lt;/html&gt; &lt;/html&gt;
code-pane(language="yaml" name="pubspec.yaml" format="linenums"). code-pane(language="yaml" name="pubspec.yaml" format="linenums").
@ -351,7 +350,7 @@
description: Displaying Data example description: Displaying Data example
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.33 angular2: 2.0.0-alpha.38
browser: ^0.10.0 browser: ^0.10.0
transformers: transformers:
- angular2: - angular2:
@ -431,16 +430,14 @@
p. p.
The app's entry point—<code>main.dart</code>—imports The app's entry point—<code>main.dart</code>—imports
<code>bootstrap.dart</code>. <code>angular2.dart</code> and <code>bootstrap.dart</code>.
Both <code>show_properties.dart</code> and <code>friends_service.dart</code> Both <code>show_properties.dart</code> and <code>friends_service.dart</code>
import <code>angular2.dart</code> instead, import only <code>angular2.dart</code>
because they use Angular APIs but aren't entry points. because they aren't entry points.
(They don't call <code>bootstrap()</code>.)
See <a href="/docs/dart/latest/quickstart.html#performance">Performance,
the transformer, and Angular 2 libraries</a> for more information.
code-example(language="dart"). code-example(language="dart").
// In web/main.dart: // In web/main.dart:
import 'package:angular2/angular2.dart';
import 'package:angular2/bootstrap.dart'; import 'package:angular2/bootstrap.dart';
... ...

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

@ -30,7 +30,7 @@
description: Getting Started example description: Getting Started example
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.33 angular2: 2.0.0-alpha.38
browser: ^0.10.0 browser: ^0.10.0
transformers: transformers:
- angular2: - angular2:
@ -55,6 +55,7 @@
code-example(language="dart" escape="html"). code-example(language="dart" escape="html").
// web/main.dart // web/main.dart
import 'package:angular2/angular2.dart';
import 'package:angular2/bootstrap.dart'; import 'package:angular2/bootstrap.dart';
@Component(selector: 'my-app') @Component(selector: 'my-app')
@ -78,12 +79,13 @@
&lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt;
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
&lt;title&gt;Getting Started&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;script async src=&quot;main.dart&quot; type=&quot;application/dart&quot;&gt;&lt;/script&gt;
&lt;script async src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt; &lt;/head&gt;
&lt;body&gt; &lt;body&gt;
&lt;my-app&gt;&lt;/my-app&gt; &lt;my-app&gt;&lt;/my-app&gt;
&lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt; &lt;/body&gt;
&lt;/html&gt &lt;/html&gt

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

@ -167,6 +167,7 @@
} }
} }
code-pane(language="dart" name="web/main.dart" format="linenums"). code-pane(language="dart" name="web/main.dart" format="linenums").
import 'package:angular2/angular2.dart';
import 'package:angular2/bootstrap.dart'; import 'package:angular2/bootstrap.dart';
import 'package:user_input/todo_list.dart'; import 'package:user_input/todo_list.dart';
@ -177,14 +178,13 @@
&lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt;
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
&lt;title&gt;User Input&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;script async src=&quot;main.dart&quot; type=&quot;application/dart&quot;&gt;&lt;/script&gt;
&lt;script async src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt; &lt;/head&gt;
&lt;body&gt; &lt;body&gt;
&lt;todo-list&gt;&lt;/todo-list&gt; &lt;todo-list&gt;&lt;/todo-list&gt;
&lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt; &lt;/body&gt;
&lt;/html&gt; &lt;/html&gt;
code-pane(language="yaml" name="pubspec.yaml" format="linenums"). code-pane(language="yaml" name="pubspec.yaml" format="linenums").
@ -192,7 +192,7 @@
description: User Input example description: User Input example
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.33 angular2: 2.0.0-alpha.38
browser: ^0.10.0 browser: ^0.10.0
transformers: transformers:
- angular2: - angular2:

75
public/docs/dart/latest/quickstart.jade
View File

@ -5,7 +5,6 @@
<a href='https://angulardart.org'>Angular for Dart</a> <a href='https://angulardart.org'>Angular for Dart</a>
for production applications. for production applications.
p. p.
These instructions assume that you already have the These instructions assume that you already have the
<a href="https://www.dartlang.org/downloads/">Dart SDK</a> <a href="https://www.dartlang.org/downloads/">Dart SDK</a>
@ -38,27 +37,17 @@ p.
specify the angular2 and browser packages as dependencies, specify the angular2 and browser packages as dependencies,
as well as the angular2 transformer. as well as the angular2 transformer.
Angular 2 is changing rapidly, so provide an exact version: Angular 2 is changing rapidly, so provide an exact version:
<b>2.0.0-alpha.33</b>. <b>2.0.0-alpha.38</b>.
code-example(language="yaml" format="linenums"). code-example(language="yaml" format="linenums").
name: hello_world name: hello_world
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.33 angular2: 2.0.0-alpha.38
browser: ^0.10.0 browser: ^0.10.0
transformers: transformers:
- angular2: - angular2:
entry_points: web/main.dart entry_points: web/main.dart
p.
In the same directory, run <code>pub get</code>
to install the angular2 and browser packages
(along with the packages they depend on):
code-example(language="sh").
&gt; <span class="blk">pub get</span>
//- PENDING: Create template? Link to pub/pubspec docs?
//- STEP 2 - Import Angular ########################## //- STEP 2 - Import Angular ##########################
.l-main-section .l-main-section
@ -73,30 +62,25 @@ p.
&gt; <span class="blk">vim web/main.dart</span> # Use your favorite editor! &gt; <span class="blk">vim web/main.dart</span> # Use your favorite editor!
p. p.
Edit <code>web/main.dart</code> to import the Angular bootstrap library: In the same directory, run <code>pub get</code>
to install the angular2 and browser packages
(along with the packages they depend on):
code-example(language="sh").
&gt; <span class="blk">pub get</span>
//- PENDING: Create template? Link to pub/pubspec docs?
p.
Edit <code>web/main.dart</code> to import the angular2
and bootstrap libraries:
code-example(language="dart" format="linenums"). code-example(language="dart" format="linenums").
import 'package:angular2/angular2.dart';
import 'package:angular2/bootstrap.dart'; import 'package:angular2/bootstrap.dart';
//- STEP 3 - Define a component ########################## //- STEP 3 - Define a component ##########################
.l-main-section .l-main-section
.l-sub-section
h3 Top-level Angular 2 libraries
p.
The main Dart file for any Angular 2 app must import
<code>'package:angular2/bootstrap.dart'</code>.
If you put part of your app into one or more additional libraries,
those additional libraries must import <code>angular2.dart</code>
instead of <code>bootstrap.dart</code>,
p.
The <code>bootstrap.dart</code> and <code>angular2.dart</code> files
provide the same API,
except that <code>bootstrap.dart</code> also provides a
<code>bootstrap()</code> function, which you'll see a little later.
For <a href="#performance">performance reasons</a>,
use <code>angular2.dart</code> whenever possible.
h2#section-angular-create-account 3. Define a component h2#section-angular-create-account 3. Define a component
@ -104,7 +88,7 @@ p.
Update <code>web/main.dart</code>, adding the following code Update <code>web/main.dart</code>, adding the following code
after the imports: after the imports:
code-example(language="dart" format="linenums:6"). code-example(language="dart" format="linenums:4").
@Component( @Component(
selector: 'my-app' selector: 'my-app'
) )
@ -175,7 +159,7 @@ p.
p. p.
Add the following code to the bottom of <code>web/main.dart</code>: Add the following code to the bottom of <code>web/main.dart</code>:
code-example(language="dart" format="linenums:16"). code-example(language="dart" format="linenums:14").
main() { main() {
bootstrap(AppComponent); bootstrap(AppComponent);
} }
@ -202,12 +186,12 @@ p.
&lt;html> &lt;html>
&lt;head&gt; &lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt; &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;script async src="main.dart" type="application/dart">&lt;/script>
&lt;script async src="packages/browser/dart.js">&lt;/script>
&lt;/head&gt; &lt;/head&gt;
&lt;body> &lt;body>
&lt;my-app>&lt;/my-app> &lt;my-app>&lt;/my-app>
&lt;script type="application/dart" src="main.dart">&lt;/script>
&lt;script src="packages/browser/dart.js">&lt;/script>
&lt;/body> &lt;/body>
&lt;/html> &lt;/html>
@ -228,7 +212,7 @@ p.
Another option is to build and serve the app using <code>pub serve</code>, Another option is to build and serve the app using <code>pub serve</code>,
and then run it by visiting <b>http://localhost:8080</b> in any modern browser. and then run it by visiting <b>http://localhost:8080</b> in any modern browser.
Pub serve generates the JavaScript on the fly, Pub serve generates the JavaScript on the fly,
which takes a few seconds when you first visit the page. which can take a while when you first visit the page.
p. p.
Once the app is running, Once the app is running,
@ -249,13 +233,8 @@ p.
&gt; <span class="blk">pub build</span> &gt; <span class="blk">pub build</span>
Loading source assets... Loading source assets...
... ...
Building hello_world... (5.7s) Built 333 files to "build".
[Info from Dart2JS]: //- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.38
Compiling hello_world|web/main.dart...
[Info from Dart2JS]:
Took 0:00:19.177402 to compile hello_world|web/main.dart.
Built 303 files to "build".
//- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.33
p. p.
The generated JavaScript appears, along with supporting files, The generated JavaScript appears, along with supporting files,
@ -274,7 +253,7 @@ p.
name: hello_world name: hello_world
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.33 angular2: 2.0.0-alpha.38
browser: ^0.10.0 browser: ^0.10.0
<span class="pnk">transformers: <span class="pnk">transformers:
- angular2: - angular2:
@ -298,12 +277,8 @@ p.
causes performance problems when compiled to JavaScript. causes performance problems when compiled to JavaScript.
Don't worry, Don't worry,
the Angular transformer converts your entry points the Angular transformer converts your entry points
(<code>entry_points</code> in <code>pubspec.yaml</code>)
so that they don't use mirrors. so that they don't use mirrors.
The transformer doesn't convert other libraries in your app,
so be sure to
import <code>angular2.dart</code> instead of <code>bootstrap.dart</code>
in any libraries you create that use Angular 2
but don't call <code>bootstrap()</code>.
//- WHAT'S NEXT... ########################## //- WHAT'S NEXT... ##########################