Update Dart docs to alpha.33
This commit is contained in:
parent
5d2a873ba5
commit
0d0b734b4f
|
@ -18,15 +18,10 @@
|
||||||
|
|
||||||
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/src/reflection/reflection.dart' show reflector;
|
|
||||||
import 'package:angular2/src/reflection/reflection_capabilities.dart'
|
|
||||||
show ReflectionCapabilities;
|
|
||||||
|
|
||||||
import 'package:displaying_data/show_properties.dart';
|
import 'package:displaying_data/show_properties.dart';
|
||||||
|
|
||||||
main() {
|
main() {
|
||||||
reflector.reflectionCapabilities = new ReflectionCapabilities();
|
|
||||||
bootstrap(DisplayComponent);
|
bootstrap(DisplayComponent);
|
||||||
}
|
}
|
||||||
code-pane(language="html" name="web/index.html" format="linenums").
|
code-pane(language="html" name="web/index.html" format="linenums").
|
||||||
|
@ -48,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.29
|
angular2: 2.0.0-alpha.33
|
||||||
browser: ^0.10.0
|
browser: ^0.10.0
|
||||||
transformers:
|
transformers:
|
||||||
- angular2:
|
- angular2:
|
||||||
|
@ -249,6 +244,7 @@
|
||||||
|
|
||||||
code-example(language="dart").
|
code-example(language="dart").
|
||||||
// In lib/show_properties.dart
|
// In lib/show_properties.dart
|
||||||
|
...
|
||||||
<span class="pnk">import 'package:displaying_data/friends_service.dart';</span>
|
<span class="pnk">import 'package:displaying_data/friends_service.dart';</span>
|
||||||
...
|
...
|
||||||
class DisplayComponent {
|
class DisplayComponent {
|
||||||
|
@ -330,15 +326,10 @@
|
||||||
List<String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
|
List<String> 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/src/reflection/reflection.dart' show reflector;
|
|
||||||
import 'package:angular2/src/reflection/reflection_capabilities.dart'
|
|
||||||
show ReflectionCapabilities;
|
|
||||||
|
|
||||||
import 'package:displaying_data/show_properties.dart';
|
import 'package:displaying_data/show_properties.dart';
|
||||||
|
|
||||||
main() {
|
main() {
|
||||||
reflector.reflectionCapabilities = new ReflectionCapabilities();
|
|
||||||
bootstrap(DisplayComponent);
|
bootstrap(DisplayComponent);
|
||||||
}
|
}
|
||||||
code-pane(language="html" name="web/index.html" format="linenums").
|
code-pane(language="html" name="web/index.html" format="linenums").
|
||||||
|
@ -360,7 +351,7 @@
|
||||||
description: Displaying Data example
|
description: Displaying Data example
|
||||||
version: 0.0.1
|
version: 0.0.1
|
||||||
dependencies:
|
dependencies:
|
||||||
angular2: 2.0.0-alpha.29
|
angular2: 2.0.0-alpha.33
|
||||||
browser: ^0.10.0
|
browser: ^0.10.0
|
||||||
transformers:
|
transformers:
|
||||||
- angular2:
|
- angular2:
|
||||||
|
@ -438,6 +429,31 @@
|
||||||
library displaying_data.friends_service;
|
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.
|
p.
|
||||||
For more information on implementing Dart libraries, see
|
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>
|
<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
|
description: Getting Started example
|
||||||
version: 0.0.1
|
version: 0.0.1
|
||||||
dependencies:
|
dependencies:
|
||||||
angular2: 2.0.0-alpha.29
|
angular2: 2.0.0-alpha.33
|
||||||
browser: ^0.10.0
|
browser: ^0.10.0
|
||||||
transformers:
|
transformers:
|
||||||
- angular2:
|
- angular2:
|
||||||
|
@ -55,17 +55,13 @@
|
||||||
|
|
||||||
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/src/reflection/reflection.dart' show reflector;
|
|
||||||
import 'package:angular2/src/reflection/reflection_capabilities.dart'
|
|
||||||
show ReflectionCapabilities;
|
|
||||||
|
|
||||||
@Component(selector: 'my-app')
|
@Component(selector: 'my-app')
|
||||||
@View(template: '<h1>My first Angular 2 App</h1>')
|
@View(template: '<h1>My first Angular 2 App</h1>')
|
||||||
class AppComponent {}
|
class AppComponent {}
|
||||||
|
|
||||||
main() {
|
main() {
|
||||||
reflector.reflectionCapabilities = new ReflectionCapabilities();
|
|
||||||
bootstrap(AppComponent);
|
bootstrap(AppComponent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -167,15 +167,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
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/src/reflection/reflection.dart' show reflector;
|
|
||||||
import 'package:angular2/src/reflection/reflection_capabilities.dart'
|
|
||||||
show ReflectionCapabilities;
|
|
||||||
|
|
||||||
import 'package:user_input/todo_list.dart';
|
import 'package:user_input/todo_list.dart';
|
||||||
|
|
||||||
main() {
|
main() {
|
||||||
reflector.reflectionCapabilities = new ReflectionCapabilities();
|
|
||||||
bootstrap(TodoList);
|
bootstrap(TodoList);
|
||||||
}
|
}
|
||||||
code-pane(language="html" name="web/index.html" format="linenums").
|
code-pane(language="html" name="web/index.html" format="linenums").
|
||||||
|
@ -197,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.29
|
angular2: 2.0.0-alpha.33
|
||||||
browser: ^0.10.0
|
browser: ^0.10.0
|
||||||
transformers:
|
transformers:
|
||||||
- angular2:
|
- angular2:
|
||||||
|
|
|
@ -38,13 +38,13 @@ 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.29</b>.
|
<b>2.0.0-alpha.33</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.29
|
angular2: 2.0.0-alpha.33
|
||||||
browser: ^0.10.0
|
browser: ^0.10.0
|
||||||
transformers:
|
transformers:
|
||||||
- angular2:
|
- angular2:
|
||||||
|
@ -73,17 +73,31 @@ p.
|
||||||
> <span class="blk">vim web/main.dart</span> # Use your favorite editor!
|
> <span class="blk">vim web/main.dart</span> # Use your favorite editor!
|
||||||
|
|
||||||
p.
|
p.
|
||||||
Edit <code>web/main.dart</code> to import the angular2 library
|
Edit <code>web/main.dart</code> to import the Angular bootstrap library:
|
||||||
and two reflection 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/src/reflection/reflection.dart' show reflector;
|
|
||||||
import 'package:angular2/src/reflection/reflection_capabilities.dart'
|
|
||||||
show ReflectionCapabilities;
|
|
||||||
//- 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>angular.dart</code>
|
||||||
|
instead of <code>bootstrap.dart</code>,
|
||||||
|
|
||||||
|
p.
|
||||||
|
The <code>bootstrap.dart</code> and <code>angular.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>angular.dart</code> whenever possible.
|
||||||
|
|
||||||
h2#section-angular-create-account 3. Define a component
|
h2#section-angular-create-account 3. Define a component
|
||||||
|
|
||||||
p.
|
p.
|
||||||
|
@ -163,7 +177,6 @@ p.
|
||||||
|
|
||||||
code-example(language="dart" format="linenums:16").
|
code-example(language="dart" format="linenums:16").
|
||||||
main() {
|
main() {
|
||||||
reflector.reflectionCapabilities = new ReflectionCapabilities();
|
|
||||||
bootstrap(AppComponent);
|
bootstrap(AppComponent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -173,17 +186,6 @@ p.
|
||||||
The argument to <code>bootstrap()</code> is the name of the component class
|
The argument to <code>bootstrap()</code> is the name of the component class
|
||||||
you defined above.
|
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 ##########################
|
//- STEP 5 - Declare the HTML ##########################
|
||||||
.l-main-section
|
.l-main-section
|
||||||
|
@ -246,15 +248,14 @@ p.
|
||||||
code-example(language="basic").
|
code-example(language="basic").
|
||||||
> <span class="blk">pub build</span>
|
> <span class="blk">pub build</span>
|
||||||
Loading source assets...
|
Loading source assets...
|
||||||
Loading angular2 transformers...
|
...
|
||||||
INFO: Formatter is being overwritten.
|
Building hello_world... (5.7s)
|
||||||
Building hello_world... (4.2s)
|
|
||||||
[Info from Dart2JS]:
|
[Info from Dart2JS]:
|
||||||
Compiling hello_world|web/main.dart...
|
Compiling hello_world|web/main.dart...
|
||||||
[Info from Dart2JS]:
|
[Info from Dart2JS]:
|
||||||
Took 0:00:16.908569 to compile hello_world|web/main.dart.
|
Took 0:00:19.177402 to compile hello_world|web/main.dart.
|
||||||
Built 75 files to "build".
|
Built 303 files to "build".
|
||||||
//- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.29
|
//- 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,
|
||||||
|
@ -273,7 +274,7 @@ p.
|
||||||
name: hello_world
|
name: hello_world
|
||||||
version: 0.0.1
|
version: 0.0.1
|
||||||
dependencies:
|
dependencies:
|
||||||
angular2: 2.0.0-alpha.29
|
angular2: 2.0.0-alpha.33
|
||||||
browser: ^0.10.0
|
browser: ^0.10.0
|
||||||
<span class="pnk">transformers:
|
<span class="pnk">transformers:
|
||||||
- angular2:
|
- angular2:
|
||||||
|
@ -286,6 +287,25 @@ p.
|
||||||
<a href="https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer">Angular
|
<a href="https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer">Angular
|
||||||
transformer wiki page</a>.
|
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>angular.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... ##########################
|
||||||
.l-main-section
|
.l-main-section
|
||||||
h2#section-transpile Great job! Next step...
|
h2#section-transpile Great job! Next step...
|
||||||
|
|
Loading…
Reference in New Issue