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

Merge pull request #46 from davideast/dart3 

More updates to Dart stuff
This commit is contained in:
Kathy Walrath 2015-03-03 17:44:04 -08:00
parent 6a992c492d b6717c73bd
commit 8e29bea01c
2 changed files with 74 additions and 52 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", "description": "Angular is a development platform for building mobile and desktop web applications",
"siteURL": "http://angular.io", "siteURL": "http://angular.io",
"jsLatest": "2.0.0-alpha.11", "jsLatest": "2.0.0-alpha.11",
"dartLatest": "2.0.0-alpha.11", "dartLatest": "2.0.0-alpha.6",
"bios": { "bios": {
"misko": { "misko": {

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

@ -11,7 +11,7 @@ p.
p. p.
Create a new directory, and put a file named Create a new directory, and put a file named
<code>pubspec.yaml</code> file in it. <code>pubspec.yaml</code> in it.
pre.prettyprint pre.prettyprint
code. code.
@ -22,10 +22,6 @@ p.
p. p.
In <code>pubspec.yaml</code>, add the angular2 and browser packages as dependencies: 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 pre.prettyprint.linenums
code. code.
name: hello_world name: hello_world
@ -50,7 +46,14 @@ p.
// PENDING: Create template? Link to pub/pubspec docs? // PENDING: Create template? Link to pub/pubspec docs?
// Is browser really needed? // Is browser really needed?
// TODO: make this an invisible note.
p.
<b>Note:</b>
If you're using Dart's Dev channel, then your version of angular2
will be higher than alpha 6. That's fine.
// PENDING: Update once 1.9 is on stable channel.
// TODO: Convert the above to a callout.
// STEP 2 - Import Angular ########################## // STEP 2 - Import Angular ##########################
@ -70,7 +73,8 @@ p.
Edit <code>web/main.dart</code> to import the angular2 library Edit <code>web/main.dart</code> to import the angular2 library
and (for now) two reflection libraries: and (for now) two reflection libraries:
pre.prettyprint.linenums // pre.prettyprint.linenums
pre.prettyprint
code. code.
import 'package:angular2/angular2.dart'; 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.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities; 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 ########################## // STEP 3 - Define a component ##########################
.l-main-section .l-main-section
h2#section-angular-create-account 3. Define a component h2#section-angular-create-account 3. Define a component
p. p.
A component is a custom HTML element. Update <code>web/main.dart</code>, adding the following code
In this step, you create a component that has the tag <b>&lt;my-app></b>. after the imports:
The Dart code for a component consists of a class
with annotations that describe the component.
p. pre.prettyprint
Update <code>web/main.dart</code> to add the following code,
which defines the my-app component:
pre.prettyprint.linenums
code. code.
@Component( @Component(
selector: 'my-app' selector: 'my-app'
@ -105,24 +105,31 @@ p.
String name = 'Alice'; 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 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.
.l-sub-section .l-sub-section
h3 Annotations h3 Annotations
p. p.
The <code>@Component</code> annotation defines the HTML tag for the component. The <code>@Component</code> annotation defines
The <code>selector</code> property specifies the tag. The <code>selector</code> property is a CSS selector. the HTML tag for the component by specifying the component's CSS selector.
// [PENDING: that last paragraph needs work!]
p. p.
The <code>@Template</code> annotation defines the template to apply to the The <code>@Template</code> annotation defines the HTML that
component. This component uses an inline template, but external templates are represents the component. This component uses an inline template,
available as well. To use an external template, specify a <code>url</code> property 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. and give it the path to the HTML file.
pre.prettyprint.linenums pre.prettyprint
code. code.
@Component( @Component(
selector: 'my-app' selector: 'my-app'
@ -131,11 +138,12 @@ p.
inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
) )
// [PENDING: add line numbers once we can specify where they start]
p. 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>. 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 .l-sub-section
h3 The template and the component controller h3 The template and the component controller
@ -144,9 +152,10 @@ p.
A template has access to all the public properties and methods A template has access to all the public properties and methods
of its component controller. of its component controller.
The template above binds to a <code>name</code> property through The template above binds to a <code>name</code> property through
the double-mustache syntax (<code ng-non-bindable>{{ }}</code>). the double-mustache syntax (<code ng-non-bindable>{{ ... }}</code>).
The body of the constructor assigns "Alice" to the name property. When the The component controller assigns "Alice" to the name property. When the
template renders, Alice appears instead of <code ng-non-bindable>{{ name }}</code>. 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"? // [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 // In the original text, what does "the backing" mean, and is it
// important that we keep it?] // important that we keep it?]
pre.prettyprint.linenums pre.prettyprint
code. code.
class AppComponent { class AppComponent {
String name = 'Alice'; String name = 'Alice';
} }
// [PENDING: add line numbers once we can specify where they start]
// STEP 4 - Bootstrap ########################## // STEP 4 - Bootstrap ##########################
.l-main-section .l-main-section
h2#section-transpile 4. Bootstrap h2#section-transpile 4. Bootstrap
p. p.
At the bottom of <code>web/main.dart</code>, Add the following code to 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.
p. pre.prettyprint
For now, you also need to set the value of
<code>reflector.reflectionCapabilities</code>.
pre.prettyprint.linenums
code. code.
main() { main() {
// Temporarily needed. // Temporarily needed.
@ -184,7 +188,20 @@ p.
bootstrap(AppComponent); 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 component 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 ########################## // STEP 5 - Declare the HTML ##########################
.l-main-section .l-main-section
@ -211,8 +228,6 @@ p.
&lt;/body> &lt;/body>
&lt;/html> &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 ########################## // STEP 6 - Build and run ##########################
.l-main-section .l-main-section
@ -225,14 +240,13 @@ p.
right-click <code>web/index.html</code>, right-click <code>web/index.html</code>,
and choose <b>Open in Dartium</b>. and choose <b>Open in Dartium</b>.
// TODO: screenshot? // TODO: screenshot? embedded app?
p. p.
Another option is to build and serve the app using <code>pub serve</code>, 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; The JavaScript generated using this option is large, for now;
it'll be much better soon, when a transformer becomes available it'll be much better soon, when Angular's transformer becomes available.
to convert the reflection code from dynamic to static code.
// [PENDING: Update when transformer is working!] // [PENDING: Update when transformer is working!]
@ -241,6 +255,14 @@ p.
h2#section-transpile Great job! Next step... h2#section-transpile Great job! Next step...
p. 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.