Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

docs(Dart): sync with TS version of quickstart #2828

Merged
merged 3 commits into from
Nov 18, 2016
Merged

docs(Dart): sync with TS version of quickstart #2828

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a2e1075
update cache
chalin Nov 18, 2016
a22b0b6
docs(Dart): sync with TS version of quickstart
chalin Nov 18, 2016
36a29ad
sync cache with updates from previous commit
chalin Nov 18, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 79 additions & 70 deletions public/docs/dart/latest/quickstart.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,11 @@ block install-packages
packages (along with the packages they depend on).

code-example(language="sh" class="code-shell").
&gt; <span class="blk">pub get</span>
Resolving dependencies...
pub get

block create-your-app
:marked
Let's create a folder to hold our application and add a super-simple Angular component.

block annotation-fields
:marked
Expand All @@ -57,6 +60,10 @@ block create-main
li a #[b folder named #[code web]]
li a <b>file named #[code #[+adjExPath('app/main.ts')]]</b> with the following content:

block commentary-on-index-html
:marked
Note the `<my-app>` tag in the `<body>`, this is *where your app lives!*

block run-app
p.
We have a few options for running our app.
Expand All @@ -76,91 +83,93 @@ block run-app
Once the app is running, the browser window should show the following:

block build-app
.alert.is-important
:marked
If you don't see **My First Angular App**, make sure you've entered all the code correctly,
in the [proper folders](#wrap-up),
and run `pub get`.
//- Remove details of building from QS for now. (It is too early for these details.)
if false
.alert.is-important
:marked
If you don't see **Hello Angular!**, make sure you've entered all the code correctly,
in the [proper folders](#wrap-up),
and run `pub get`.

.l-verbose-section#section-angular-run-app
:marked
### Building the app (generating JavaScript)
.l-verbose-section#section-angular-run-app
:marked
### Building the app (generating JavaScript)

Before deploying the app, we need to generate JavaScript files.
The `pub build` command makes that easy.
Before deploying the app, we need to generate JavaScript files.
The `pub build` command makes that easy.

code-example(language="sh" class="code-shell").
&gt; <span class="blk">pub build</span>
Loading source assets...
code-example(language="sh" class="code-shell").
&gt; <span class="blk">pub build</span>
Loading source assets...

:marked
The generated JavaScript appears, along with supporting files,
under a directory named `build`.

#angular_transformer
h4 Using the Angular transformer

:marked
The generated JavaScript appears, along with supporting files,
under a directory named `build`.

#angular_transformer
h4 Using the Angular transformer

p.
When generating JavaScript for an Angular app,
be sure to use the Angular transformer.
It analyzes the Dart code,
converting reflection-using code to static code
that Dart's build tools can compile to faster, smaller JavaScript.
The highlighted lines in <code>pubspec.yaml</code>
configure the Angular transformer:

- var stylePattern = { otl: /(transformers:)|(- angular2:)|(entry_points.*$)/gm };
+makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)

p.
The <code>entry_points</code> item
identifies the Dart file in our app
that has a <code>main()</code> function.
For more information, see the
<a href="https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer">Angular
transformer wiki page</a>.

.l-sub-section#performance
h3 Performance, the transformer, and Angular libraries
p.
When an app imports <code>bootstrap.dart</code>,
it also gets <code>dart:mirrors</code>,
a reflection library that
causes performance problems when compiled to JavaScript.
Don't worry,
the Angular transformer converts the app's entry points
(<code>entry_points</code> in <code>pubspec.yaml</code>)
so that they don't use mirrors.

#dart_to_js_script_rewriter
h4 Using dart_to_js_script_rewriter
When generating JavaScript for an Angular app,
be sure to use the Angular transformer.
It analyzes the Dart code,
converting reflection-using code to static code
that Dart's build tools can compile to faster, smaller JavaScript.
The highlighted lines in <code>pubspec.yaml</code>
configure the Angular transformer:

:marked
To improve the app's performance, convert the
HTML file to directly include the generated JavaScript;
one way to do that is with `dart_to_js_script_rewriter`.
To use the rewriter, specify `dart_to_js_script_rewriter` in both
the `dependencies` and `transformers` sections of the pubspec.
- var stylePattern = { otl: /(transformers:)|(- angular2:)|(entry_points.*$)/gm };
+makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)

- var stylePattern = { otl: /(dart_to_js_script_rewriter.*$)|(- dart_to_js_script_rewriter.*$)|(dependencies:)|(transformers:)/gm };
+makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
p.
The <code>entry_points</code> item
identifies the Dart file in our app
that has a <code>main()</code> function.
For more information, see the
<a href="https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer">Angular
transformer wiki page</a>.

.l-sub-section#performance
h3 Performance, the transformer, and Angular libraries
p.
When an app imports <code>bootstrap.dart</code>,
it also gets <code>dart:mirrors</code>,
a reflection library that
causes performance problems when compiled to JavaScript.
Don't worry,
the Angular transformer converts the app's entry points
(<code>entry_points</code> in <code>pubspec.yaml</code>)
so that they don't use mirrors.

#dart_to_js_script_rewriter
h4 Using dart_to_js_script_rewriter

.alert.is-important
:marked
The `dart_to_js_script_rewriter` transformer must be
**after** the `angular2` transformer in `pubspec.yaml`.
To improve the app's performance, convert the
HTML file to directly include the generated JavaScript;
one way to do that is with `dart_to_js_script_rewriter`.
To use the rewriter, specify `dart_to_js_script_rewriter` in both
the `dependencies` and `transformers` sections of the pubspec.

:marked
For more information, see the docs for
[dart_to_js_script_rewriter](https://pub.dartlang.org/packages/dart_to_js_script_rewriter).
- var stylePattern = { otl: /(dart_to_js_script_rewriter.*$)|(- dart_to_js_script_rewriter.*$)|(dependencies:)|(transformers:)/gm };
+makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)

.alert.is-important
:marked
The `dart_to_js_script_rewriter` transformer must be
**after** the `angular2` transformer in `pubspec.yaml`.

:marked
For more information, see the docs for
[dart_to_js_script_rewriter](https://pub.dartlang.org/packages/dart_to_js_script_rewriter).

block server-watching
:marked
To see the new version, just reload the page.

.alert.is-important
:marked
Be sure to terminate the `pub serve` process once you stop working on this app.
Be sure to terminate your local server once you stop working on this app.

block project-file-structure
.filetree
Expand Down
Loading