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.