diff --git a/public/docs/dart/latest/guide/displaying-data.jade b/public/docs/dart/latest/guide/displaying-data.jade index 2d54f579c9..0153ce90f3 100644 --- a/public/docs/dart/latest/guide/displaying-data.jade +++ b/public/docs/dart/latest/guide/displaying-data.jade @@ -18,6 +18,7 @@ code-tabs code-pane(language="dart" name="web/main.dart" format="linenums"). + import 'package:angular2/angular2.dart'; import 'package:angular2/bootstrap.dart'; import 'package:displaying_data/show_properties.dart'; @@ -28,14 +29,13 @@ <!DOCTYPE html> <html> <head> + <title>Displaying Data</title> <link rel="stylesheet" href="style.css"> + <script async src="main.dart" type="application/dart"></script> + <script async src="packages/browser/dart.js"></script> </head> <body> - <display></display> - - <script type="application/dart" src="main.dart"></script> - <script src="packages/browser/dart.js"></script> </body> </html> code-pane(language="yaml" name="pubspec.yaml" format="linenums"). @@ -43,7 +43,7 @@ description: Dart version of Angular 2 example, Displaying Data version: 0.0.1 dependencies: - angular2: 2.0.0-alpha.33 + angular2: 2.0.0-alpha.38 browser: ^0.10.0 transformers: - angular2: @@ -258,12 +258,11 @@ p. Next, make FriendsService available to dependency injection - by adding a viewInjector parameter to DisplayComponent's + by adding a viewBindings parameter to DisplayComponent's @Component annotation: - code-example(language="dart"). - @Component(selector: 'display', viewInjector: const [FriendsService]) + @Component(selector: 'display', viewBindings: const [FriendsService]) .l-main-section h2#Conditionally-displaying-data-with-NgIf Conditionally display data using *ng-if @@ -297,7 +296,7 @@ import 'package:angular2/angular2.dart'; import 'package:displaying_data/friends_service.dart'; - @Component(selector: 'display', viewInjector: const [FriendsService]) + @Component(selector: 'display', viewBindings: const [FriendsService]) @View(template: ''' <p>My name: {{ myName }}</p> <p>Friends:</p> @@ -326,6 +325,7 @@ 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/bootstrap.dart'; import 'package:displaying_data/show_properties.dart'; @@ -336,14 +336,13 @@ <!DOCTYPE html> <html> <head> - <link rel="stylesheet" href="style.css"> + <title>Displaying Data</title> + <link rel="stylesheet" href="style.css"> + <script async src="main.dart" type="application/dart"></script> + <script async src="packages/browser/dart.js"></script> </head> <body> - <display></display> - - <script type="application/dart" src="main.dart"></script> - <script src="packages/browser/dart.js"></script> </body> </html> code-pane(language="yaml" name="pubspec.yaml" format="linenums"). @@ -351,7 +350,7 @@ description: Displaying Data example version: 0.0.1 dependencies: - angular2: 2.0.0-alpha.33 + angular2: 2.0.0-alpha.38 browser: ^0.10.0 transformers: - angular2: @@ -431,16 +430,14 @@ p. The app's entry point—main.dart—imports - bootstrap.dart. + angular2.dart and 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. + import only angular2.dart + because they aren't entry points. code-example(language="dart"). // In web/main.dart: + import 'package:angular2/angular2.dart'; import 'package:angular2/bootstrap.dart'; ... diff --git a/public/docs/dart/latest/guide/setup.jade b/public/docs/dart/latest/guide/setup.jade index 54004b8132..c1a552d17b 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.33 + angular2: 2.0.0-alpha.38 browser: ^0.10.0 transformers: - angular2: @@ -55,6 +55,7 @@ code-example(language="dart" escape="html"). // web/main.dart + import 'package:angular2/angular2.dart'; import 'package:angular2/bootstrap.dart'; @Component(selector: 'my-app') @@ -78,12 +79,13 @@ <!DOCTYPE html> <html> <head> + <title>Getting Started</title> <link rel="stylesheet" href="style.css"> + <script async src="main.dart" type="application/dart"></script> + <script async src="packages/browser/dart.js"></script> </head> <body> <my-app></my-app> - <script type="application/dart" src="main.dart"></script> - <script src="packages/browser/dart.js"></script> </body> </html> diff --git a/public/docs/dart/latest/guide/user-input.jade b/public/docs/dart/latest/guide/user-input.jade index 8dc6ee1be7..35d6741380 100644 --- a/public/docs/dart/latest/guide/user-input.jade +++ b/public/docs/dart/latest/guide/user-input.jade @@ -167,6 +167,7 @@ } } code-pane(language="dart" name="web/main.dart" format="linenums"). + import 'package:angular2/angular2.dart'; import 'package:angular2/bootstrap.dart'; import 'package:user_input/todo_list.dart'; @@ -177,14 +178,13 @@ <!DOCTYPE html> <html> <head> + <title>User Input</title> <link rel="stylesheet" href="style.css"> + <script async src="main.dart" type="application/dart"></script> + <script async src="packages/browser/dart.js"></script> </head> <body> - <todo-list></todo-list> - - <script type="application/dart" src="main.dart"></script> - <script src="packages/browser/dart.js"></script> </body> </html> code-pane(language="yaml" name="pubspec.yaml" format="linenums"). @@ -192,7 +192,7 @@ description: User Input example version: 0.0.1 dependencies: - angular2: 2.0.0-alpha.33 + angular2: 2.0.0-alpha.38 browser: ^0.10.0 transformers: - angular2: diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade index 7d6e5eb8db..73a1f547cd 100644 --- a/public/docs/dart/latest/quickstart.jade +++ b/public/docs/dart/latest/quickstart.jade @@ -5,7 +5,6 @@ Angular for Dart for production applications. - p. These instructions assume that you already have the Dart SDK @@ -38,27 +37,17 @@ 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.33. + 2.0.0-alpha.38. code-example(language="yaml" format="linenums"). name: hello_world version: 0.0.1 dependencies: - angular2: 2.0.0-alpha.33 + angular2: 2.0.0-alpha.38 browser: ^0.10.0 transformers: - angular2: entry_points: web/main.dart - p. - In the same directory, run pub get - to install the angular2 and browser packages - (along with the packages they depend on): - - code-example(language="sh"). - > pub get - - //- PENDING: Create template? Link to pub/pubspec docs? - //- STEP 2 - Import Angular ########################## .l-main-section @@ -73,30 +62,25 @@ p. > vim web/main.dart # Use your favorite editor! p. - Edit web/main.dart to import the Angular bootstrap library: + In the same directory, run pub get + to install the angular2 and browser packages + (along with the packages they depend on): + + code-example(language="sh"). + > pub get + + //- PENDING: Create template? Link to pub/pubspec docs? + + p. + Edit web/main.dart to import the angular2 + and bootstrap libraries: code-example(language="dart" format="linenums"). + import 'package:angular2/angular2.dart'; 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 @@ -104,7 +88,7 @@ p. Update web/main.dart, adding the following code after the imports: - code-example(language="dart" format="linenums:6"). + code-example(language="dart" format="linenums:4"). @Component( selector: 'my-app' ) @@ -175,7 +159,7 @@ p. p. Add the following code to the bottom of web/main.dart: - code-example(language="dart" format="linenums:16"). + code-example(language="dart" format="linenums:14"). main() { bootstrap(AppComponent); } @@ -202,12 +186,12 @@ p. <html> <head> <title>Angular 2 Quickstart</title> + + <script async src="main.dart" type="application/dart"></script> + <script async src="packages/browser/dart.js"></script> </head> <body> <my-app></my-app> - - <script type="application/dart" src="main.dart"></script> - <script src="packages/browser/dart.js"></script> </body> </html> @@ -228,7 +212,7 @@ p. Another option is to build and serve the app using pub serve, and then run it by visiting http://localhost:8080 in any modern browser. Pub serve generates the JavaScript on the fly, - which takes a few seconds when you first visit the page. + which can take a while when you first visit the page. p. Once the app is running, @@ -249,13 +233,8 @@ p. > pub build Loading source assets... ... - Building hello_world... (5.7s) - [Info from Dart2JS]: - Compiling hello_world|web/main.dart... - [Info from Dart2JS]: - 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 + Built 333 files to "build". + //- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.38 p. The generated JavaScript appears, along with supporting files, @@ -274,7 +253,7 @@ p. name: hello_world version: 0.0.1 dependencies: - angular2: 2.0.0-alpha.33 + angular2: 2.0.0-alpha.38 browser: ^0.10.0 transformers: - angular2: @@ -298,12 +277,8 @@ p. causes performance problems when compiled to JavaScript. Don't worry, the Angular transformer converts your entry points + (entry_points in pubspec.yaml) 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... ##########################