angular-cn/public/docs/dart/latest/quickstart.jade

300 lines
9.0 KiB
Plaintext
Raw Normal View History

2015-04-23 11:50:54 -04:00
.callout.is-helpful
header Angular 2 is currently in Developer Preview
2015-04-23 11:50:54 -04:00
p.
We recommend using
<a href='https://angulardart.org'>Angular for Dart</a>
for production applications.
2015-03-02 21:42:31 -05:00
p.
These instructions assume that you already have the
<a href="https://www.dartlang.org/downloads/">Dart SDK</a>
2015-03-02 21:42:31 -05:00
and any tools you like to use with Dart.
If you don't have a favorite editor already, try
<a href="https://confluence.jetbrains.com/display/WI/Getting+started+with+Dart">WebStorm</a>,
which comes with a Dart plugin.
You can also download
<a href="https://www.dartlang.org/tools/">Dart plugins for
other IDEs and editors</a>.
p.
Once you have the Dart SDK and any other tools you want, return here.
2015-03-02 21:42:31 -05:00
2015-06-01 12:24:11 -04:00
//- STEP 1 - Create a project ##########################
2015-03-02 17:46:31 -05:00
.l-main-section
2015-03-03 14:32:06 -05:00
h2#section-install-angular 1. Create a project
2015-03-02 17:46:31 -05:00
p.
2015-03-03 14:32:06 -05:00
Create a new directory, and put a file named
2015-03-03 20:43:26 -05:00
<code>pubspec.yaml</code> in it.
2015-03-03 14:32:06 -05:00
code-example(language="sh").
&gt; <span class="blk">mkdir hello_world</span>
&gt; <span class="blk">cd hello_world</span>
&gt; <span class="blk">vim pubspec.yaml</span> # Use your favorite editor!
2015-03-03 14:32:06 -05:00
p.
2015-06-01 12:24:11 -04:00
In <code>pubspec.yaml</code>,
specify the angular2 and browser packages as dependencies,
as well as the angular2 transformer.
Angular 2 is changing rapidly, so provide an exact version:
2015-10-06 16:49:38 -04:00
<b>2.0.0-alpha.39</b>.
2015-06-01 12:24:11 -04:00
code-example(language="yaml" format="linenums").
name: hello_world
version: 0.0.1
dependencies:
2015-10-06 16:49:38 -04:00
angular2: 2.0.0-alpha.39
2015-06-05 14:58:51 -04:00
browser: ^0.10.0
2015-06-01 12:24:11 -04:00
transformers:
- angular2:
entry_points: web/main.dart
2015-03-02 17:46:31 -05:00
2015-06-01 12:24:11 -04:00
//- STEP 2 - Import Angular ##########################
2015-03-02 17:46:31 -05:00
.l-main-section
h2#section-transpile 2. Import Angular
p.
Still in the same directory, create a <code>web</code> directory.
2015-03-02 21:42:31 -05:00
Create a file under <code>web</code> named <code>main.dart</code>.
2015-03-03 14:32:06 -05:00
code-example(language="sh").
&gt; <span class="blk">mkdir web</span>
&gt; <span class="blk">vim web/main.dart</span> # Use your favorite editor!
2015-03-03 14:32:06 -05:00
p.
2015-09-23 21:19:14 -04:00
In the same directory, run <code>pub get</code>
to install the angular2 and browser packages
(along with the packages they depend on):
code-example(language="sh").
&gt; <span class="blk">pub get</span>
//- PENDING: Create template? Link to pub/pubspec docs?
p.
Edit <code>web/main.dart</code> to import the angular2
and bootstrap libraries:
2015-03-02 17:46:31 -05:00
code-example(language="dart" format="linenums").
2015-09-23 21:19:14 -04:00
import 'package:angular2/angular2.dart';
2015-07-30 20:11:07 -04:00
import 'package:angular2/bootstrap.dart';
2015-06-01 12:24:11 -04:00
//- STEP 3 - Define a component ##########################
2015-03-02 17:46:31 -05:00
.l-main-section
2015-07-30 20:11:07 -04:00
2015-03-02 21:42:31 -05:00
h2#section-angular-create-account 3. Define a component
2015-03-02 17:46:31 -05:00
p.
2015-03-03 19:37:56 -05:00
Update <code>web/main.dart</code>, adding the following code
after the imports:
2015-03-02 17:46:31 -05:00
2015-09-23 21:19:14 -04:00
code-example(language="dart" format="linenums:4").
@Component(
selector: 'my-app'
)
@View(
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
)
class AppComponent {
String name = 'Alice';
}
2015-03-03 19:37:56 -05:00
p.
2015-03-03 20:43:26 -05:00
The code you just added creates a component that
2015-03-03 19:37:56 -05:00
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>@View</code> annotations.
2015-03-03 19:37:56 -05:00
2015-03-02 17:46:31 -05:00
.l-sub-section
2015-03-02 21:42:31 -05:00
h3 Annotations
2015-03-02 17:46:31 -05:00
p.
2015-03-03 20:43:26 -05:00
The <code>@Component</code> annotation defines
the HTML tag for the component by specifying the component's CSS selector.
2015-03-02 17:46:31 -05:00
p.
The <code>@View</code> annotation defines the HTML that
2015-03-03 20:43:26 -05:00
represents the component. This component uses an inline template,
but you can also have an external template. To use an external template,
specify a <code>templateUrl</code> property
2015-03-02 21:42:31 -05:00
and give it the path to the HTML file.
2015-03-02 17:46:31 -05:00
code-example(language="dart").
@Component(
selector: 'my-app'
)
@View(
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
)
2015-03-03 19:37:56 -05:00
2015-03-02 17:46:31 -05:00
p.
2015-03-03 19:37:56 -05:00
The annotations above specify an HTML tag of <code>&lt;my-app&gt;</code>
2015-03-03 14:32:06 -05:00
and a template of <code ng-non-bindable>&lt;h1&gt;Hello &#123;&#123; name }}&lt;/h1&gt;</code>.
2015-03-02 21:42:31 -05:00
2015-03-02 17:46:31 -05:00
.l-sub-section
2015-03-02 21:42:31 -05:00
h3 The template and the component controller
2015-03-02 17:46:31 -05:00
p.
2015-03-02 21:42:31 -05:00
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
2015-03-03 19:37:56 -05:00
the double-mustache syntax (<code ng-non-bindable>{{ ... }}</code>).
2015-03-04 19:21:24 -05:00
p.
2015-03-03 19:37:56 -05:00
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>.
code-example(language="dart").
class AppComponent {
String name = 'Alice';
}
2015-03-03 19:37:56 -05:00
2015-06-01 12:24:11 -04:00
//- STEP 4 - Bootstrap ##########################
2015-03-02 17:46:31 -05:00
.l-main-section
h2#section-transpile 4. Bootstrap
2015-03-02 21:42:31 -05:00
p.
2015-03-03 19:37:56 -05:00
Add the following code to the bottom of <code>web/main.dart</code>:
2015-03-02 17:46:31 -05:00
2015-09-23 21:19:14 -04:00
code-example(language="dart" format="linenums:14").
main() {
bootstrap(AppComponent);
}
2015-03-03 19:37:56 -05:00
p.
This code adds a <code>main()</code> function
that calls Angular's <code>bootstrap()</code> function.
2015-03-03 20:43:26 -05:00
The argument to <code>bootstrap()</code> is the name of the component class
2015-03-03 19:37:56 -05:00
you defined above.
2015-06-01 12:24:11 -04:00
//- STEP 5 - Declare the HTML ##########################
2015-03-02 17:46:31 -05:00
.l-main-section
h2#section-angular-create-account 5. Declare the HTML
p.
2015-03-02 21:42:31 -05:00
Create a file named <code>web/index.html</code> that contains
the following code,
2015-03-03 14:32:06 -05:00
which loads <code>main.dart</code> and instantiates the my-app component:
2015-03-02 17:46:31 -05:00
2015-06-01 12:24:11 -04:00
code-example(language="html" format="linenums").
&lt;!doctype html>
&lt;html>
&lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
2015-09-23 21:19:14 -04:00
&lt;script async src="main.dart" type="application/dart">&lt;/script>
&lt;script async src="packages/browser/dart.js">&lt;/script>
&lt;/head&gt;
&lt;body>
&lt;my-app>&lt;/my-app>
&lt;/body>
&lt;/html>
2015-03-02 17:46:31 -05:00
2015-06-01 12:24:11 -04:00
//- STEP 6 - Run ##########################
2015-03-02 21:42:31 -05:00
.l-main-section
2015-03-02 17:46:31 -05:00
2015-06-01 12:24:11 -04:00
h2#section-angular-run-app 6. Run your app
2015-03-02 17:46:31 -05:00
2015-03-02 21:42:31 -05:00
p.
You have a few options for running your app.
One is to launch a local HTTP server
and then view the app in
<a href="https://www.dartlang.org/tools/dartium/">Dartium</a>.
You can use whatever server you like, such as WebStorm's server
or Python's SimpleHTTPServer.
2015-03-02 17:46:31 -05:00
2015-03-02 21:42:31 -05:00
p.
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 any modern browser.
Pub serve generates the JavaScript on the fly,
2015-09-23 21:19:14 -04:00
which can take a while when you first visit the page.
p.
Once the app is running,
you should see <b>Hello Alice</b> in your browser window.
2015-06-01 12:24:11 -04:00
//- STEP 7 - Generate JavaScript ##########################
.l-main-section
2015-06-01 12:24:11 -04:00
h2#section-angular-run-app 7. Generate JavaScript
p.
2015-06-01 12:24:11 -04:00
Before you can deploy your app, you need to generate JavaScript files.
Compiling your Dart code to JavaScript is easy:
just run <code>pub build</code>.
code-example(language="basic").
&gt; <span class="blk">pub build</span>
2015-07-30 20:11:07 -04:00
Loading source assets...
...
2015-09-23 21:19:14 -04:00
Built 333 files to "build".
2015-10-06 16:49:38 -04:00
//- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.39
p.
2015-06-01 12:24:11 -04:00
The generated JavaScript appears, along with supporting files,
under the <code>build</code> directory.
p.
2015-06-01 12:24:11 -04:00
When you generate JavaScript for an Angular app,
be sure you use the Angular transformer.
It analyzes your 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:
code-example(language="yaml" format="linenums").
name: hello_world
version: 0.0.1
dependencies:
2015-10-06 16:49:38 -04:00
angular2: 2.0.0-alpha.39
2015-06-05 14:58:51 -04:00
browser: ^0.10.0
2015-06-01 12:24:11 -04:00
<span class="pnk">transformers:
- angular2:
entry_points: web/main.dart</span>
p.
The <code>entry_points</code> entry
identifies the Dart file in your 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>.
2015-03-02 17:46:31 -05:00
2015-07-30 20:11:07 -04:00
#performance.l-sub-section
h3 Performance, the transformer, and Angular 2 libraries
p.
When you import <code>bootstrap.dart</code>,
you also get <code>dart:mirrors</code>,
a reflection library that
causes performance problems when compiled to JavaScript.
Don't worry,
the Angular transformer converts your entry points
2015-09-23 21:19:14 -04:00
(<code>entry_points</code> in <code>pubspec.yaml</code>)
2015-07-30 20:11:07 -04:00
so that they don't use mirrors.
2015-06-01 12:24:11 -04:00
//- WHAT'S NEXT... ##########################
2015-03-02 17:46:31 -05:00
.l-main-section
2015-03-03 14:32:06 -05:00
h2#section-transpile Great job! Next step...
2015-03-02 17:46:31 -05:00
2015-03-02 21:42:31 -05:00
p.
Follow the <a href="guide">developer guide</a>
to continue playing with Angular 2 for Dart.
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>