.callout.is-helpful
header Angular 2 is currently in Developer Preview
p.
We recommend using
Angular for Dart
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
download Dart.
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
pubspec.yaml in it.
pre.prettyprint
code.
> mkdir hello_world
> cd hello_world
> vim pubspec.yaml # Use your favorite editor!
p.
In pubspec.yaml, add the angular2 and browser packages as dependencies.
Angular 2 is changing rapidly, so specify an exact version:
2.0.0-alpha.21.
pre.prettyprint.linenums.lang-basic
code.
name: hello_world
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.21
browser: any
p.
In the same directory, run pub get
to install the angular2 and browser packages
(along with the packages they depend on):
pre.prettyprint.lang-basic
code.
> 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 web directory.
Create a file under web named main.dart.
pre.prettyprint
code.
> mkdir web
> vim web/main.dart # Use your favorite editor!
p.
Edit web/main.dart 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 web/main.dart, adding the following code
after the imports:
pre.prettyprint
code.
@Component(
selector: 'my-app'
)
@View(
template: '<h1>Hello {{ name }}</h1>'
)
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 <my-app>.
The Dart code for an Angular component consists of a class
(the component controller)
that has @Component and @Template annotations.
.l-sub-section
h3 Annotations
p.
The @Component annotation defines
the HTML tag for the component by specifying the component's CSS selector.
p.
The @Template 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 url property
and give it the path to the HTML file.
pre.prettyprint
code.
@Component(
selector: 'my-app'
)
@Template(
inline: '<h1>Hello {{ name }}</h1>'
)
// [PENDING: add line numbers once we can specify where they start]
p.
The annotations above specify an HTML tag of <my-app>
and a template of <h1>Hello {{ name }}</h1>.
.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 name property through
the double-mustache syntax ({{ ... }}).
p.
The component controller assigns "Alice" to the name property. When the
template renders, "Hello Alice" appears instead of
"Hello {{ name }}".
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 web/main.dart:
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 main() function
that calls Angular's bootstrap() function.
The argument to bootstrap() is the name of the component class
you defined above.
p.
Setting the value of
reflector.reflectionCapabilities
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 web/index.html that contains
the following code,
which loads main.dart and instantiates the my-app component:
pre.prettyprint.linenums
code.
<!doctype html>
<html>
<head>
<title>Angular 2 Quickstart</title>
</head>
<body>
<my-app></my-app>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</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 Dart Editor,
right-click web/index.html,
and choose Open in Dartium.
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 pub serve,
and then run it by visiting http://localhost:8080 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 Angular Resources.
To learn more about Dart, go to
dartlang.org.