Merge pull request #178 from angular/kw-dart-33

Update Dart docs to alpha.33
This commit is contained in:
Kathy Walrath 2015-08-03 07:38:10 -07:00
commit 20b627c33a
4 changed files with 82 additions and 55 deletions

View File

@ -18,15 +18,10 @@
code-tabs
code-pane(language="dart" name="web/main.dart" format="linenums").
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart'
show ReflectionCapabilities;
import 'package:angular2/bootstrap.dart';
import 'package:displaying_data/show_properties.dart';
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(DisplayComponent);
}
code-pane(language="html" name="web/index.html" format="linenums").
@ -48,7 +43,7 @@
description: Dart version of Angular 2 example, Displaying Data
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.29
angular2: 2.0.0-alpha.33
browser: ^0.10.0
transformers:
- angular2:
@ -249,6 +244,7 @@
code-example(language="dart").
// In lib/show_properties.dart
...
<span class="pnk">import 'package:displaying_data/friends_service.dart';</span>
...
class DisplayComponent {
@ -330,15 +326,10 @@
List&lt;String&gt; names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
}
code-pane(language="dart" name="web/main.dart" format="linenums").
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart'
show ReflectionCapabilities;
import 'package:angular2/bootstrap.dart';
import 'package:displaying_data/show_properties.dart';
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(DisplayComponent);
}
code-pane(language="html" name="web/index.html" format="linenums").
@ -360,7 +351,7 @@
description: Displaying Data example
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.29
angular2: 2.0.0-alpha.33
browser: ^0.10.0
transformers:
- angular2:
@ -438,6 +429,31 @@
library displaying_data.friends_service;
...
p.
The app's entry point—<code>main.dart</code>—imports
<code>bootstrap.dart</code>.
Both <code>show_properties.dart</code> and <code>friends_service.dart</code>
import <code>angular2.dart</code> instead,
because they use Angular APIs but 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").
// In web/main.dart:
import 'package:angular2/bootstrap.dart';
...
// In lib/show_properties.dart:
...
import 'package:angular2/angular2.dart';
...
// In lib/friends_service.dart:
...
import 'package:angular2/angular2.dart';
...
p.
For more information on implementing Dart libraries, see
<a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html#libraries-and-visibility">Libraries and visibility</a>

View File

@ -30,7 +30,7 @@
description: Getting Started example
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.29
angular2: 2.0.0-alpha.33
browser: ^0.10.0
transformers:
- angular2:
@ -55,17 +55,13 @@
code-example(language="dart" escape="html").
// web/main.dart
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart'
show ReflectionCapabilities;
import 'package:angular2/bootstrap.dart';
@Component(selector: 'my-app')
@View(template: '<h1>My first Angular 2 App</h1>')
class AppComponent {}
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(AppComponent);
}

View File

@ -167,15 +167,10 @@
}
}
code-pane(language="dart" name="web/main.dart" format="linenums").
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart'
show ReflectionCapabilities;
import 'package:angular2/bootstrap.dart';
import 'package:user_input/todo_list.dart';
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(TodoList);
}
code-pane(language="html" name="web/index.html" format="linenums").
@ -197,7 +192,7 @@
description: User Input example
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.29
angular2: 2.0.0-alpha.33
browser: ^0.10.0
transformers:
- angular2:

View File

@ -38,13 +38,13 @@ p.
specify the angular2 and browser packages as dependencies,
as well as the angular2 transformer.
Angular 2 is changing rapidly, so provide an exact version:
<b>2.0.0-alpha.29</b>.
<b>2.0.0-alpha.33</b>.
code-example(language="yaml" format="linenums").
name: hello_world
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.29
angular2: 2.0.0-alpha.33
browser: ^0.10.0
transformers:
- angular2:
@ -73,17 +73,31 @@ p.
&gt; <span class="blk">vim web/main.dart</span> # Use your favorite editor!
p.
Edit <code>web/main.dart</code> to import the angular2 library
and two reflection libraries:
Edit <code>web/main.dart</code> to import the Angular bootstrap library:
code-example(language="dart" format="linenums").
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart'
show ReflectionCapabilities;
import 'package:angular2/bootstrap.dart';
//- STEP 3 - Define a component ##########################
.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
p.
@ -163,7 +177,6 @@ p.
code-example(language="dart" format="linenums:16").
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(AppComponent);
}
@ -173,17 +186,6 @@ p.
The argument to <code>bootstrap()</code> is the name of the component class
you defined above.
p.
Setting the value of <code>reflector.reflectionCapabilities</code>
lets your app use the Dart VM's reflection (dart:mirrors)
when running in Dartium.
Reflection is fast in native Dart,
so using it makes sense during development.
Later, when you build a JavaScript version of your app,
the Angular transformer will
convert the reflection-using code to static code,
so your generated JavaScript can be smaller and faster.
//- STEP 5 - Declare the HTML ##########################
.l-main-section
@ -246,15 +248,14 @@ p.
code-example(language="basic").
&gt; <span class="blk">pub build</span>
Loading source assets...
Loading angular2 transformers...
INFO: Formatter is being overwritten.
Building hello_world... (4.2s)
...
Building hello_world... (5.7s)
[Info from Dart2JS]:
Compiling hello_world|web/main.dart...
[Info from Dart2JS]:
Took 0:00:16.908569 to compile hello_world|web/main.dart.
Built 75 files to "build".
//- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.29
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.
The generated JavaScript appears, along with supporting files,
@ -273,7 +274,7 @@ p.
name: hello_world
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.29
angular2: 2.0.0-alpha.33
browser: ^0.10.0
<span class="pnk">transformers:
- angular2:
@ -286,6 +287,25 @@ p.
<a href="https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer">Angular
transformer wiki page</a>.
#performance.l-sub-section
h3 Performance, the transformer, and Angular 2 libraries
p.
When you import <code>bootstrap.dart</code>,
you also get <code>dart:mirrors</code>,
a reflection library that
causes performance problems when compiled to JavaScript.
Don't worry,
the Angular transformer converts your entry points
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... ##########################
.l-main-section
h2#section-transpile Great job! Next step...