diff --git a/harp.json b/harp.json index 60883c6753..28de6983db 100644 --- a/harp.json +++ b/harp.json @@ -4,7 +4,7 @@ "description": "Angular is a development platform for building mobile and desktop web applications", "siteURL": "http://angular.io", "jsLatest": "2.0.0-alpha.11", - "dartLatest": "2.0.0-alpha.11", + "dartLatest": "2.0.0-alpha.6", "bios": { "misko": { @@ -160,4 +160,4 @@ } } } -} \ No newline at end of file +} diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade index 84d606a7c7..58a4981f3d 100644 --- a/public/docs/dart/latest/quickstart.jade +++ b/public/docs/dart/latest/quickstart.jade @@ -22,10 +22,6 @@ p. p. In pubspec.yaml, add the angular2 and browser packages as dependencies: - // [PENDING: if the transformer isn't working in time, - // remove it and use reflection in Dartium instead. - // Perhaps require Dart 1.9.] - pre.prettyprint.linenums code. name: hello_world @@ -50,7 +46,14 @@ p. // PENDING: Create template? Link to pub/pubspec docs? // Is browser really needed? - // TODO: make this an invisible note. + + p. + Note: + If you're using Dart 1.9, then your version of angular2 + will be higher than alpha 6. + + // PENDING: Update once 1.9 is on stable channel. + // TODO: Convert the above to a callout. // STEP 2 - Import Angular ########################## @@ -70,7 +73,8 @@ p. Edit web/main.dart to import the angular2 library and (for now) two reflection libraries: - pre.prettyprint.linenums + // pre.prettyprint.linenums + pre.prettyprint code. import 'package:angular2/angular2.dart'; @@ -78,22 +82,18 @@ p. import 'package:angular2/src/reflection/reflection.dart' show reflector; import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; + // [PENDING: add line numbers once we can specify where they start] + // STEP 3 - Define a component ########################## .l-main-section h2#section-angular-create-account 3. Define a component p. - A component is a custom HTML element. - In this step, you create a component that has the tag <my-app>. - The Dart code for a component consists of a class - with annotations that describe the component. + Update web/main.dart, adding the following code + after the imports: - p. - Update web/main.dart to add the following code, - which defines the my-app component: - - pre.prettyprint.linenums + pre.prettyprint code. @Component( selector: 'my-app' @@ -105,24 +105,31 @@ p. String name = 'Alice'; } - // TODO: Change or omit line numbers. + // [PENDING: add line numbers once we can specify where they start] + + p. + The code you just added creates a component—a custom element—that + has the tag <my-app>. + The Dart code for an Angular component consists of a class + (the component controller) + that has @Component and @Template annotations. + + // PENDING: Is that correct??? + .l-sub-section h3 Annotations p. - The @Component annotation defines the HTML tag for the component. - The selector property specifies the tag. The selector property is a CSS selector. - - // [PENDING: that last paragraph needs work!] + The @Component annotation defines the HTML tag for the component (the selector value). p. - The @Template annotation defines the template to apply to the - component. This component uses an inline template, but external templates are - available as well. To use an external template, specify a url property + The @Template annotation defines the HTML to apply to the + component. This component uses an inline template, but you can also have + an external template. To use an external template, specify a url property and give it the path to the HTML file. - pre.prettyprint.linenums + pre.prettyprint code. @Component( selector: 'my-app' @@ -131,11 +138,12 @@ p. inline: '<h1>Hello {{ name }}</h1>' ) + // [PENDING: add line numbers once we can specify where they start] + p. - The annotations above specify an HTML tag of <my-app></my-app> + The annotations above specify an HTML tag of <my-app> and a template of <h1>Hello {{ name }}</h1>. - // TODO: In the preceding paragraph, that should be rendered as {{ name }}, like in the listing. .l-sub-section h3 The template and the component controller @@ -144,9 +152,10 @@ p. A template has access to all the public properties and methods of its component controller. The template above binds to a name property through - the double-mustache syntax ({{ }}). - The body of the constructor assigns "Alice" to the name property. When the - template renders, Alice appears instead of {{ name }}. + the double-mustache syntax ({{ ... }}). + The component controller assigns "Alice" to the name property. When the + template renders, "Hello Alice" appears instead of + "Hello {{ name }}". // [PENDING: Do we really want to use the term "component controller"? @@ -154,28 +163,23 @@ p. // In the original text, what does "the backing" mean, and is it // important that we keep it?] - pre.prettyprint.linenums + pre.prettyprint code. class AppComponent { String name = 'Alice'; } + // [PENDING: add line numbers once we can specify where they start] + + // STEP 4 - Bootstrap ########################## .l-main-section h2#section-transpile 4. Bootstrap p. - At the bottom of web/main.dart, - add a main() function - that calls Angular's bootstrap() function. - The argument to bootstrap() is the name of the app class - you defined above. + Add the following code to the bottom of web/main.dart: - p. - For now, you also need to set the value of - reflector.reflectionCapabilities. - - pre.prettyprint.linenums + pre.prettyprint code. main() { // Temporarily needed. @@ -184,7 +188,20 @@ p. bootstrap(AppComponent); } - // [PENDING: change/remove line numbers. They should start at 12.] + // [PENDING: add line numbers once we can specify where they start] + + p. + This code adds a main() function + that calls Angular's bootstrap() function. + The argument to bootstrap() is the name of the app class + you defined above. + + p. + Setting the value of + reflector.reflectionCapabilities + is a temporary workaround + that you can remove once Angular's transformer is available. + // STEP 5 - Declare the HTML ########################## .l-main-section @@ -211,8 +228,6 @@ p. </body> </html> - // [PENDING: When I select a bunch of code, it looks like I select the line #s too, making me fear that they'll get copied. But pasting doesn't include them. Can we fix that?] - // STEP 6 - Build and run ########################## .l-main-section @@ -225,14 +240,13 @@ p. right-click web/index.html, and choose Open in Dartium. - // TODO: screenshot? + // TODO: screenshot? embedded app? p. Another option is to build and serve the app using pub serve, - and then to run it by visiting http://localhost:8080/index.html in a browser. + and then run it by visiting http://localhost:8080/index.html in a browser. The JavaScript generated using this option is large, for now; - it'll be much better soon, when a transformer becomes available - to convert the reflection code from dynamic to static code. + it'll be much better soon, when Angular's transformer becomes available. // [PENDING: Update when transformer is working!] @@ -241,6 +255,14 @@ p. h2#section-transpile Great job! Next step... p. - Learn some template syntax for extra credit. + To try out the latest Angular 2 APIs, + first download the Dev channel of Dart from the + Dart + Download Archive. - // [PENDING: really?] + p. + Once you have the Dart Dev channel, use pub upgrade + to get the latest version of Angular 2. + + + // [PENDING: really?] Perhaps point to dartlang.org.