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

dart quickstart: add transformer, use alpha.25

This commit is contained in:
Kathy Walrath 2015-05-29 17:55:02 -07:00
parent 2f62173bbf
commit 3bd646b228
1 changed files with 135 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,32 +21,29 @@ p.
Create a new directory, and put a file named Create a new directory, and put a file named
<code>pubspec.yaml</code> in it. <code>pubspec.yaml</code> in it.
pre.prettyprint code-example(language="sh").
code. &gt; <span class="blk">mkdir hello_world</span>
&gt; mkdir hello_world &gt; <span class="blk">cd hello_world</span>
&gt; cd hello_world &gt; <span class="blk">vim pubspec.yaml</span> # Use your favorite editor!
&gt; vim pubspec.yaml # Use your favorite editor!
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.
Angular 2 is changing rapidly, so specify an exact version: Angular 2 is changing rapidly, so specify an exact version:
<b>2.0.0-alpha.23</b>. <b>2.0.0-alpha.25</b>.
pre.prettyprint.linenums.lang-basic code-example(language="yaml").
code.
name: hello_world name: hello_world
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.23 angular2: 2.0.0-alpha.25
browser: any browser: any
p. p.
In the same directory, run <code>pub get</code> In the same directory, run <code>pub get</code>
to install the angular2 and browser packages to install the angular2 and browser packages
(along with the packages they depend on): (along with the packages they depend on):
pre.prettyprint.lang-basic code-example(language="sh").
code. &gt; <span class="blk">pub get</span>
&gt; pub get
// PENDING: Create template? Link to pub/pubspec docs? // PENDING: Create template? Link to pub/pubspec docs?
// Is browser really needed? // Is browser really needed?
@ -60,26 +57,19 @@ p.
Still in the same directory, create a <code>web</code> directory. Still in the same directory, create a <code>web</code> directory.
Create a file under <code>web</code> named <code>main.dart</code>. Create a file under <code>web</code> named <code>main.dart</code>.
pre.prettyprint code-example(language="sh").
code. &gt; <span class="blk">mkdir web</span>
&gt; mkdir web &gt; <span class="blk">vim web/main.dart</span> # Use your favorite editor!
&gt; vim web/main.dart # Use your favorite editor!
p. 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 two reflection libraries:
// pre.prettyprint.linenums code-example(language="dart" format="linenums").
pre.prettyprint
code.
import 'package:angular2/angular2.dart'; import 'package:angular2/angular2.dart';
// These imports will go away soon:
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
@ -89,8 +79,7 @@ p.
Update <code>web/main.dart</code>, adding the following code Update <code>web/main.dart</code>, adding the following code
after the imports: after the imports:
pre.prettyprint code-example(language="dart" format="linenums:5").
code.
@Component( @Component(
selector: 'my-app' selector: 'my-app'
) )
@ -101,8 +90,6 @@ p.
String name = 'Alice'; String name = 'Alice';
} }
// [PENDING: add line numbers once we can specify where they start]
p. p.
The code you just added creates a component that The code you just added creates a component that
has the tag <b>&lt;my-app></b>. has the tag <b>&lt;my-app></b>.
@ -125,8 +112,7 @@ p.
specify a <code>templateUrl</code> property specify a <code>templateUrl</code> property
and give it the path to the HTML file. and give it the path to the HTML file.
pre.prettyprint code-example(language="dart").
code.
@Component( @Component(
selector: 'my-app' selector: 'my-app'
) )
@ -134,8 +120,6 @@ p.
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' template: '&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;</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>.
@ -154,15 +138,11 @@ p.
template renders, "Hello Alice" appears instead of template renders, "Hello Alice" appears instead of
<span ng-non-bindable>"Hello {{ name }}"</span>. <span ng-non-bindable>"Hello {{ name }}"</span>.
pre.prettyprint code-example(language="dart").
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
@ -170,28 +150,19 @@ p.
p. p.
Add the following code to the bottom of <code>web/main.dart</code>: Add the following code to the bottom of <code>web/main.dart</code>:
pre.prettyprint code-example(language="dart" format="linenums:15").
code.
main() { main() {
// Temporarily needed.
reflector.reflectionCapabilities = new ReflectionCapabilities(); reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(AppComponent); bootstrap(AppComponent);
} }
// [PENDING: add line numbers once we can specify where they start]
p. p.
This code adds a <code>main()</code> function This code adds a <code>main()</code> function
that calls Angular's <code>bootstrap()</code> function. that calls Angular's <code>bootstrap()</code> function.
The argument to <code>bootstrap()</code> is the name of the component class The argument to <code>bootstrap()</code> is the name of the component class
you defined above. you defined above.
p. //- Explain why setting reflector.reflectionCapabilities is necessary.
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 ##########################
@ -204,8 +175,7 @@ p.
the following code, the following code,
which loads <code>main.dart</code> and instantiates the my-app component: which loads <code>main.dart</code> and instantiates the my-app component:
pre.prettyprint.linenums code-example(language="html").
code.
&lt;!doctype html> &lt;!doctype html>
&lt;html> &lt;html>
&lt;head&gt; &lt;head&gt;
@ -225,32 +195,88 @@ p.
h2#section-angular-run-app 6. Build and run your app h2#section-angular-run-app 6. Build and run your app
p. p.
You have several options for running your app. You have a few options for running your app.
The quickest and easiest, for now, One is to launch a local HTTP server
is to open your project in <b>Dart Editor</b>, and then view the app in
right-click <b>web/index.html</b>, <a href="https://www.dartlang.org/tools/dartium/">Dartium</a>.
and choose <b>Open in Dartium</b>. You can use whatever server you like, such as Python's SimpleHTTPServer.
This starts a web server
and opens your app in an experimental browser that contains the Dart VM.
// 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 run it by visiting <b>http://localhost:8080</b> in a browser. and then run it by visiting <b>http://localhost:8080</b> in any modern browser.
Generating the JavaScript takes a few seconds when you first visit the page, Pub serve generates the JavaScript on the fly,
and the generated JavaScript is currently large. which takes a few seconds when you first visit the page.
The generated JavaScript will be smaller once
Angular's transformer becomes available.
// [PENDING: Update when transformer is working!] p.
Once the app is running,
you should see <b>Hello Alice</b> in your browser window.
// STEP 7 - Use the Angular transformer ##########################
.l-main-section
h2#section-angular-run-app 7. Use the Angular transformer
p.
To enable quick turnaround while you're developing an Angular app,
the framework uses reflection via dart:mirrors.
Unfortunately, mirror-using Dart code compiles to
JavaScript code that's large and slow.
To create more deployable JavaScript, use the Angular transformer.
The transformer analyzes your code,
converting reflection to static code
that Dart's build tools can compile to faster, smaller JavaScript.
p.
To use the Angular transformer,
first add the highlighted lines to your <code>pubspec.yaml</code>:
code-example(language="yaml").
name: hello_world
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.25
browser: any
<span class="pnk">transformers:
- angular2:
entry_points: web/main.dart</span>
p.
Then build the JavaScript version using <code>pub build</code>:
code-example(language="basic").
&gt; <span class="blk">pub build</span>
Loading source assets...
Loading angular2 transformers...
INFO: Formatter is being overwritten.
Building hello_world... (3.1s)
[Info from Dart2JS]:
Compiling hello_world|web/main.dart...
[Info from Dart2JS]:
Took 0:00:16.123086 to compile hello_world|web/main.dart.
Built 41 files to "build".
p.
The compiled JavaScript appears, along with supporting files,
under the <code>build</code> directory.
p.
For more information, see the
<a href="https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer">Angular
transformer wiki page</a>.
// WHAT'S NEXT... ########################## // WHAT'S NEXT... ##########################
.l-main-section .l-main-section
h2#section-transpile Great job! Next step... h2#section-transpile Great job! Next step...
p. p.
We plan to add a developer guide soon. Follow the <a href="guide">developer guide</a>
Until then, check out <a href="resources.html">Angular Resources</a>. to continue playing with Angular 2 for Dart.
To learn more about Dart, go to
<a href="https://www.dartlang.org">dartlang.org</a>. p.
Or read more about Angular or Dart:
ul
li
<a href="resources.html">Angular resources</a>
li
<a href="https://www.dartlang.org">dartlang.org</a>