diff --git a/public/docs/dart/latest/guide/displaying-data.jade b/public/docs/dart/latest/guide/displaying-data.jade index 0d19f44997..2d54f579c9 100644 --- a/public/docs/dart/latest/guide/displaying-data.jade +++ b/public/docs/dart/latest/guide/displaying-data.jade @@ -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 + ... import 'package:displaying_data/friends_service.dart'; ... 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—main.dart—imports + bootstrap.dart. + Both show_properties.dart and friends_service.dart + import angular2.dart instead, + because they use Angular APIs but aren't entry points. + (They don't call bootstrap().) + See Performance, + the transformer, and Angular 2 libraries 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 Libraries and visibility diff --git a/public/docs/dart/latest/guide/setup.jade b/public/docs/dart/latest/guide/setup.jade index a851fc9d51..54004b8132 100644 --- a/public/docs/dart/latest/guide/setup.jade +++ b/public/docs/dart/latest/guide/setup.jade @@ -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: '

My first Angular 2 App

') class AppComponent {} main() { - reflector.reflectionCapabilities = new ReflectionCapabilities(); bootstrap(AppComponent); } diff --git a/public/docs/dart/latest/guide/user-input.jade b/public/docs/dart/latest/guide/user-input.jade index 4fda6633fb..8dc6ee1be7 100644 --- a/public/docs/dart/latest/guide/user-input.jade +++ b/public/docs/dart/latest/guide/user-input.jade @@ -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: diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade index dfd7208597..7d6e5eb8db 100644 --- a/public/docs/dart/latest/quickstart.jade +++ b/public/docs/dart/latest/quickstart.jade @@ -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: - 2.0.0-alpha.29. + 2.0.0-alpha.33. 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. > vim web/main.dart # Use your favorite editor! p. - Edit web/main.dart to import the angular2 library - and two reflection libraries: + Edit web/main.dart 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 + 'package:angular2/bootstrap.dart'. + If you put part of your app into one or more additional libraries, + those additional libraries must import angular2.dart + instead of bootstrap.dart, + + p. + The bootstrap.dart and angular2.dart files + provide the same API, + except that bootstrap.dart also provides a + bootstrap() function, which you'll see a little later. + For performance reasons, + use angular2.dart 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 bootstrap() is the name of the component class you defined above. - 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 ########################## .l-main-section @@ -245,16 +247,15 @@ p. code-example(language="basic"). > pub build - Loading source assets... - Loading angular2 transformers... - INFO: Formatter is being overwritten. - Building hello_world... (4.2s) + Loading source assets... + ... + 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 transformers: - angular2: @@ -286,6 +287,25 @@ p. Angular transformer wiki page. + + #performance.l-sub-section + h3 Performance, the transformer, and Angular 2 libraries + + p. + When you import bootstrap.dart, + you also get dart:mirrors, + 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 angular2.dart instead of bootstrap.dart + in any libraries you create that use Angular 2 + but don't call bootstrap(). + + //- WHAT'S NEXT... ########################## .l-main-section h2#section-transpile Great job! Next step...