Merge pull request #178 from angular/kw-dart-33
Update Dart docs to alpha.33
This commit is contained in:
commit
20b627c33a
|
@ -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<String> 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>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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.
|
|||
> <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").
|
||||
> <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...
|
||||
|
|
Loading…
Reference in New Issue