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

Commit 0fa21c4

Browse files
chalinfilipesilva
chalin
authored and
filipesilva
committed
docs(Dart): sync with TS version of quickstart (#2828)
* update cache * docs(Dart): sync with TS version of quickstart * sync cache with updates from previous commit
1 parent f2daab7 commit 0fa21c4

File tree

3 files changed

+363
-604
lines changed

3 files changed

+363
-604
lines changed

‎public/docs/dart/latest/quickstart.jade

+79-70
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,11 @@ block install-packages
4141
packages (along with the packages they depend on).
4242

4343
code-example(language="sh" class="code-shell").
44-
&gt; <span class="blk">pub get</span>
45-
Resolving dependencies...
44+
pub get
45+
46+
block create-your-app
47+
:marked
48+
Let's create a folder to hold our application and add a super-simple Angular component.
4649

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

63+
block commentary-on-index-html
64+
:marked
65+
Note the `<my-app>` tag in the `<body>`, this is *where your app lives!*
66+
6067
block run-app
6168
p.
6269
We have a few options for running our app.
@@ -76,91 +83,93 @@ block run-app
7683
Once the app is running, the browser window should show the following:
7784

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

85-
.l-verbose-section#section-angular-run-app
86-
:marked
87-
### Building the app (generating JavaScript)
94+
.l-verbose-section#section-angular-run-app
95+
:marked
96+
### Building the app (generating JavaScript)
8897

89-
Before deploying the app, we need to generate JavaScript files.
90-
The `pub build` command makes that easy.
98+
Before deploying the app, we need to generate JavaScript files.
99+
The `pub build` command makes that easy.
91100

92-
code-example(language="sh" class="code-shell").
93-
&gt; <span class="blk">pub build</span>
94-
Loading source assets...
101+
code-example(language="sh" class="code-shell").
102+
&gt; <span class="blk">pub build</span>
103+
Loading source assets...
104+
105+
:marked
106+
The generated JavaScript appears, along with supporting files,
107+
under a directory named `build`.
108+
109+
#angular_transformer
110+
h4 Using the Angular transformer
95111

96-
:marked
97-
The generated JavaScript appears, along with supporting files,
98-
under a directory named `build`.
99-
100-
#angular_transformer
101-
h4 Using the Angular transformer
102-
103-
p.
104-
When generating JavaScript for an Angular app,
105-
be sure to use the Angular transformer.
106-
It analyzes the Dart code,
107-
converting reflection-using code to static code
108-
that Dart's build tools can compile to faster, smaller JavaScript.
109-
The highlighted lines in <code>pubspec.yaml</code>
110-
configure the Angular transformer:
111-
112-
- var stylePattern = { otl: /(transformers:)|(- angular2:)|(entry_points.*$)/gm };
113-
+makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
114-
115-
p.
116-
The <code>entry_points</code> item
117-
identifies the Dart file in our app
118-
that has a <code>main()</code> function.
119-
For more information, see the
120-
<a href="https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer">Angular
121-
transformer wiki page</a>.
122-
123-
.l-sub-section#performance
124-
h3 Performance, the transformer, and Angular libraries
125112
p.
126-
When an app imports <code>bootstrap.dart</code>,
127-
it also gets <code>dart:mirrors</code>,
128-
a reflection library that
129-
causes performance problems when compiled to JavaScript.
130-
Don't worry,
131-
the Angular transformer converts the app's entry points
132-
(<code>entry_points</code> in <code>pubspec.yaml</code>)
133-
so that they don't use mirrors.
134-
135-
#dart_to_js_script_rewriter
136-
h4 Using dart_to_js_script_rewriter
113+
When generating JavaScript for an Angular app,
114+
be sure to use the Angular transformer.
115+
It analyzes the Dart code,
116+
converting reflection-using code to static code
117+
that Dart's build tools can compile to faster, smaller JavaScript.
118+
The highlighted lines in <code>pubspec.yaml</code>
119+
configure the Angular transformer:
137120

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

145-
- var stylePattern = { otl: /(dart_to_js_script_rewriter.*$)|(- dart_to_js_script_rewriter.*$)|(dependencies:)|(transformers:)/gm };
146-
+makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
124+
p.
125+
The <code>entry_points</code> item
126+
identifies the Dart file in our app
127+
that has a <code>main()</code> function.
128+
For more information, see the
129+
<a href="https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer">Angular
130+
transformer wiki page</a>.
131+
132+
.l-sub-section#performance
133+
h3 Performance, the transformer, and Angular libraries
134+
p.
135+
When an app imports <code>bootstrap.dart</code>,
136+
it also gets <code>dart:mirrors</code>,
137+
a reflection library that
138+
causes performance problems when compiled to JavaScript.
139+
Don't worry,
140+
the Angular transformer converts the app's entry points
141+
(<code>entry_points</code> in <code>pubspec.yaml</code>)
142+
so that they don't use mirrors.
143+
144+
#dart_to_js_script_rewriter
145+
h4 Using dart_to_js_script_rewriter
147146

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

153-
:marked
154-
For more information, see the docs for
155-
[dart_to_js_script_rewriter](https://pub.dartlang.org/packages/dart_to_js_script_rewriter).
154+
- var stylePattern = { otl: /(dart_to_js_script_rewriter.*$)|(- dart_to_js_script_rewriter.*$)|(dependencies:)|(transformers:)/gm };
155+
+makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
156+
157+
.alert.is-important
158+
:marked
159+
The `dart_to_js_script_rewriter` transformer must be
160+
**after** the `angular2` transformer in `pubspec.yaml`.
161+
162+
:marked
163+
For more information, see the docs for
164+
[dart_to_js_script_rewriter](https://pub.dartlang.org/packages/dart_to_js_script_rewriter).
156165

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

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

165174
block project-file-structure
166175
.filetree

0 commit comments

Comments
 (0)