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

257 lines
7.4 KiB
Plaintext

.callout.is-helpful
header Angular 2 is currently in Developer Preview
p.
We recommend using
<a href='https://angulardart.org'>Angular for Dart</a>
for production applications.
p.
These instructions assume that you already have the Dart SDK
and any tools you like to use with Dart.
If not, go
<a href="https://www.dartlang.org/downloads/">download Dart</a>.
Then return here.
// STEP 1 - Create a project ##########################
.l-main-section
h2#section-install-angular 1. Create a project
p.
Create a new directory, and put a file named
<code>pubspec.yaml</code> in it.
pre.prettyprint
code.
&gt; mkdir hello_world
&gt; cd hello_world
&gt; vim pubspec.yaml # Use your favorite editor!
p.
In <code>pubspec.yaml</code>, add the angular2 and browser packages as dependencies.
Angular 2 is changing rapidly, so specify an exact version:
<b>2.0.0-alpha.22</b>.
pre.prettyprint.linenums.lang-basic
code.
name: hello_world
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.22
browser: any
p.
In the same directory, run <code>pub get</code>
to install the angular2 and browser packages
(along with the packages they depend on):
pre.prettyprint.lang-basic
code.
&gt; pub get
// PENDING: Create template? Link to pub/pubspec docs?
// Is browser really needed?
// STEP 2 - Import Angular ##########################
.l-main-section
h2#section-transpile 2. Import Angular
p.
Still in the same directory, create a <code>web</code> directory.
Create a file under <code>web</code> named <code>main.dart</code>.
pre.prettyprint
code.
&gt; mkdir web
&gt; vim web/main.dart # Use your favorite editor!
p.
Edit <code>web/main.dart</code> to import the angular2 library
and (for now) two reflection libraries:
// pre.prettyprint.linenums
pre.prettyprint
code.
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_capabilities.dart' show ReflectionCapabilities;
// [PENDING: add line numbers once we can specify where they start]
// STEP 3 - Define a component ##########################
.l-main-section
h2#section-angular-create-account 3. Define a component
p.
Update <code>web/main.dart</code>, adding the following code
after the imports:
pre.prettyprint
code.
@Component(
selector: 'my-app'
)
@View(
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
)
class AppComponent {
String name = 'Alice';
}
// [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>@View</code> annotations.
.l-sub-section
h3 Annotations
p.
The <code>@Component</code> annotation defines
the HTML tag for the component by specifying the component's CSS selector.
p.
The <code>@View</code> annotation defines the HTML that
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
and give it the path to the HTML file.
pre.prettyprint
code.
@Component(
selector: 'my-app'
)
@View(
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
)
// [PENDING: add line numbers once we can specify where they start]
p.
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>.
.l-sub-section
h3 The template and the component controller
p.
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
the double-mustache syntax (<code ng-non-bindable>{{ ... }}</code>).
p.
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>.
pre.prettyprint
code.
class AppComponent {
String name = 'Alice';
}
// [PENDING: add line numbers once we can specify where they start]
// STEP 4 - Bootstrap ##########################
.l-main-section
h2#section-transpile 4. Bootstrap
p.
Add the following code to the bottom of <code>web/main.dart</code>:
pre.prettyprint
code.
main() {
// Temporarily needed.
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(AppComponent);
}
// [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 ##########################
.l-main-section
h2#section-angular-create-account 5. Declare the HTML
p.
Create a file named <code>web/index.html</code> that contains
the following code,
which loads <code>main.dart</code> and instantiates the my-app component:
pre.prettyprint.linenums
code.
&lt;!doctype html>
&lt;html>
&lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;/head&gt;
&lt;body>
&lt;my-app>&lt;/my-app>
&lt;script type="application/dart" src="main.dart">&lt;/script>
&lt;script src="packages/browser/dart.js">&lt;/script>
&lt;/body>
&lt;/html>
// STEP 6 - Build and run ##########################
.l-main-section
h2#section-angular-run-app 6. Build and run your app
p.
You have several options for running your app.
The quickest and easiest, for now,
is to open your project in <b>Dart Editor</b>,
right-click <b>web/index.html</b>,
and choose <b>Open in Dartium</b>.
This starts a web server
and opens your app in an experimental browser that contains the Dart VM.
// TODO: screenshot? embedded app?
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 a browser.
Generating the JavaScript takes a few seconds when you first visit the page,
and the generated JavaScript is currently large.
The generated JavaScript will be smaller once
Angular's transformer becomes available.
// [PENDING: Update when transformer is working!]
// WHAT'S NEXT... ##########################
.l-main-section
h2#section-transpile Great job! Next step...
p.
We plan to add a developer guide soon.
Until then, check out <a href="resources.html">Angular Resources</a>.
To learn more about Dart, go to
<a href="https://www.dartlang.org">dartlang.org</a>.