diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade
index 4bb54c2632..5979ee7fbd 100644
--- a/public/docs/dart/latest/quickstart.jade
+++ b/public/docs/dart/latest/quickstart.jade
@@ -13,7 +13,7 @@ p.
download Dart.
Then return here.
-// STEP 1 - Create a project ##########################
+//- STEP 1 - Create a project ##########################
.l-main-section
h2#section-install-angular 1. Create a project
@@ -27,16 +27,21 @@ p.
> vim pubspec.yaml # Use your favorite editor!
p.
- In pubspec.yaml
, add the angular2 and browser packages as dependencies.
- Angular 2 is changing rapidly, so specify an exact version:
+ In pubspec.yaml
,
+ specify the angular2 and browser packages as dependencies,
+ as well as the angular2 transformer.
+ Angular 2 is changing rapidly, so provide an exact version:
2.0.0-alpha.25.
- code-example(language="yaml").
+ code-example(language="yaml" format="linenums").
name: hello_world
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.25
browser: any
+ transformers:
+ - angular2:
+ entry_points: web/main.dart
p.
In the same directory, run pub get
to install the angular2 and browser packages
@@ -45,11 +50,11 @@ p.
code-example(language="sh").
> pub get
- // PENDING: Create template? Link to pub/pubspec docs?
- // Is browser really needed?
+ //- PENDING: browser: any -> ???
+ //- PENDING: Create template? Link to pub/pubspec docs?
-// STEP 2 - Import Angular ##########################
+//- STEP 2 - Import Angular ##########################
.l-main-section
h2#section-transpile 2. Import Angular
@@ -70,7 +75,7 @@ p.
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
h2#section-angular-create-account 3. Define a component
@@ -143,7 +148,7 @@ p.
String name = 'Alice';
}
-// STEP 4 - Bootstrap ##########################
+//- STEP 4 - Bootstrap ##########################
.l-main-section
h2#section-transpile 4. Bootstrap
@@ -162,10 +167,19 @@ p.
The argument to bootstrap()
is the name of the component class
you defined above.
- //- Explain why setting reflector.reflectionCapabilities is necessary.
+ p.
+ Setting the value of reflector.reflectionCapabilities
+ 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
h2#section-angular-create-account 5. Declare the HTML
@@ -175,7 +189,7 @@ p.
the following code,
which loads main.dart
and instantiates the my-app component:
- code-example(language="html").
+ code-example(language="html" format="linenums").
<!doctype html>
<html>
<head>
@@ -189,10 +203,10 @@ p.
</body>
</html>
-// STEP 6 - Build and run ##########################
+//- STEP 6 - Run ##########################
.l-main-section
- h2#section-angular-run-app 6. Build and run your app
+ h2#section-angular-run-app 6. Run your app
p.
You have a few options for running your app.
@@ -212,36 +226,15 @@ p.
you should see Hello Alice in your browser window.
-// STEP 7 - Use the Angular transformer ##########################
+//- STEP 7 - Generate JavaScript ##########################
.l-main-section
- h2#section-angular-run-app 7. Use the Angular transformer
+ h2#section-angular-run-app 7. Generate JavaScript
p.
- To enable quick turnaround while you're developing an Angular app,
- the framework uses reflection via dart:mirrors.
- Unfortunately, mirror-using Dart code compiles to
- JavaScript code that's large and slow.
- To create more deployable JavaScript, use the Angular transformer.
- The transformer analyzes your code,
- converting reflection to static code
- that Dart's build tools can compile to faster, smaller JavaScript.
-
- p.
- To use the Angular transformer,
- first add the highlighted lines to your pubspec.yaml
:
-
- code-example(language="yaml").
- name: hello_world
- version: 0.0.1
- dependencies:
- angular2: 2.0.0-alpha.25
- browser: any
- transformers:
- - angular2:
- entry_points: web/main.dart
- p.
- Then build the JavaScript version using pub build
:
+ Before you can deploy your app, you need to generate JavaScript files.
+ Compiling your Dart code to JavaScript is easy:
+ just run pub build
.
code-example(language="basic").
> pub build
@@ -254,17 +247,39 @@ p.
[Info from Dart2JS]:
Took 0:00:16.123086 to compile hello_world|web/main.dart.
Built 41 files to "build".
+ //- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.25
p.
- The compiled JavaScript appears, along with supporting files,
+ The generated JavaScript appears, along with supporting files,
under the build
directory.
p.
+ When you generate JavaScript for an Angular app,
+ be sure you use the Angular transformer.
+ It analyzes your code,
+ converting reflection-using code to static code
+ that Dart's build tools can compile to faster, smaller JavaScript.
+ The highlighted lines in pubspec.yaml
+ configure the Angular transformer:
+
+ code-example(language="yaml" format="linenums").
+ name: hello_world
+ version: 0.0.1
+ dependencies:
+ angular2: 2.0.0-alpha.25
+ browser: any
+ transformers:
+ - angular2:
+ entry_points: web/main.dart
+ p.
+ The entry_points
entry
+ identifies the Dart file in your app
+ that has a main()
function.
For more information, see the
Angular
transformer wiki page.
-// WHAT'S NEXT... ##########################
+//- WHAT'S NEXT... ##########################
.l-main-section
h2#section-transpile Great job! Next step...