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...