honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More updates to Dart stuff

This commit is contained in:
Kathy Walrath 2015-03-03 16:37:56 -08:00
parent 6a992c492d
commit c42f28081e
2 changed files with 73 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
harp.json
View File

@ -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": {

120
public/docs/dart/latest/quickstart.jade
View File

@ -22,10 +22,6 @@ p.
p.
In <code>pubspec.yaml</code>, 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.
<b>Note:</b>
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 <code>web/main.dart</code> 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 <b>&lt;my-app></b>.
The Dart code for a component consists of a class
with annotations that describe the component.
Update <code>web/main.dart</code>, adding the following code
after the imports:
p.
Update <code>web/main.dart</code> 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 <b>&lt;my-app></b>.
The Dart code for an Angular component consists of a class
(the <b>component controller</b>)
that has <code>@Component</code> and <code>@Template</code> annotations.
// PENDING: Is that correct???
.l-sub-section
h3 Annotations
p.
The <code>@Component</code> annotation defines the HTML tag for the component.
The <code>selector</code> property specifies the tag. The <code>selector</code> property is a CSS selector.
// [PENDING: that last paragraph needs work!]
The <code>@Component</code> annotation defines the HTML tag for the component (the <code>selector</code> value).
p.
The <code>@Template</code> 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 <code>url</code> property
The <code>@Template</code> 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 <code>url</code> 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: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
)
// [PENDING: add line numbers once we can specify where they start]
p.
The annotations above specify an HTML tag of <code>&lt;my-app&gt;&lt;/my-app&gt;</code>
The annotations above specify an HTML tag of <code>&lt;my-app&gt;</code>
and a template of <code ng-non-bindable>&lt;h1&gt;Hello &#123;&#123; name }}&lt;/h1&gt;</code>.
// 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 <code>name</code> property through
the double-mustache syntax (<code ng-non-bindable>{{ }}</code>).
The body of the constructor assigns "Alice" to the name property. When the
template renders, Alice appears instead of <code ng-non-bindable>{{ name }}</code>.
the double-mustache syntax (<code ng-non-bindable>{{ ... }}</code>).
The component controller assigns "Alice" to the name property. When the
template renders, "Hello Alice" appears instead of
<span ng-non-bindable>"Hello {{ name }}"</span>.
// [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 <code>web/main.dart</code>,
add a <code>main()</code> function
that calls Angular's <code>bootstrap()</code> function.
The argument to <code>bootstrap()</code> is the name of the app class
you defined above.
Add the following code to the bottom of <code>web/main.dart</code>:
p.
For now, you also need to set the value of
<code>reflector.reflectionCapabilities</code>.
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 <code>main()</code> function
that calls Angular's <code>bootstrap()</code> function.
The argument to <code>bootstrap()</code> is the name of the app class
you defined above.
p.
Setting the value of
<code>reflector.reflectionCapabilities</code>
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.
&lt;/body>
&lt;/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 <code>web/index.html</code>,
and choose <b>Open in Dartium</b>.
// TODO: screenshot?
// TODO: screenshot? embedded app?
p.
Another option is to build and serve the app using <code>pub serve</code>,
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 <b>Dev channel</b> of Dart from the
<a href="https://www.dartlang.org/tools/download-archive/">Dart
Download Archive</a>.
// [PENDING: really?]
p.
Once you have the Dart Dev channel, use <b>pub upgrade</b>
to get the latest version of Angular 2.
// [PENDING: really?] Perhaps point to dartlang.org.