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 - Install Angular ##########################
.l-main-section
h2#section-install-angular 1. Install Angular
p.
In a new directory, create a pubspec.yaml file.
Add angular2 and browser as dependencies,
and add the angular2 transformer:
[PENDING: if the transformer isn't working in time,
remove it and use reflection in Dartium instead.
Perhaps require Dart 1.9.]
pre.prettyprint.linenums
code.
name: hello_world
version: 0.0.1
dependencies:
angular2: ">=2.0.0-alpha.6 <3.0.0"
browser: any
transformers:
- angular2
p.
In the same directory, run pub get
to install the angular2 and browser packages
(along with the packages they depend on):
pre.prettyprint.linenums
code.
> pub get
Resolving dependencies... (7.3s)
+ angular2 2.0.0-alpha.6
+ browser 0.10.0+2
+ path 1.3.3
+ stack_trace 1.2.3
Changed 4 dependencies!
p.
PENDING: Create template? Link to pub/pubspec docs?
Is browser really needed?
TODO: make this an invisible note.
// STEP 2 - Import Angular ##########################
.l-main-section
h2#section-transpile 2. Import Angular
p.
Under the same directory, create a web directory.
Create a file under web named main.dart.
Edit web/main.dart to import the angular2 library:
pre.prettyprint.linenums
code import 'package:angular2/angular2.dart';
// STEP 3 - Define a component ##########################
.l-main-section
h2#section-angular-create-account 3. Define a component
p.
A component is a custom HTML element.
In this step, you create a component that has the tag <app>.
The Dart code for a component consists of a class
with annotations that describe the component.
p.
Update web/main.dart to contain the following code,
which defines the app component:
pre.prettyprint.linenums
code.
import 'package:angular2/angular2.dart';
@Component(
selector: 'app'
)
@Template({
inline: '<h1>Hello {{ name }}</h1>'
})
class AppComponent {
String name = 'Alice';
}
.l-sub-section
h3 Annotations
p.
The @Component annotation defines the HTML tag for the component. [PENDING: component controller?]
The selector property specifies the tag. The selector property is a CSS selector. [PENDING: huh?]
p.
The @Template annotation defines the template to apply to the
component. This component uses an inline template, but external templates are
available as well. To use an external template, specify a url property
and give it the path to the HTML file.
pre.prettyprint.linenums
code.
@Component(
selector: 'app'
)
@Template({
inline: '<h1>Hello {{ name }}</h1>'
})
p.
The annotations above specify an HTML tag of <app></app>
and a template of <h1>Hello {{ name }}</h1>.
p TODO: make double-mustaches work in text (they do work in listings)
.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.
[PENDING: Do we really want to use the term "component controller"?
If so, set it up beforehand.
In the original text, what does "the backing" mean, and is it
important that we keep it?]
pre.prettyprint.linenums
code.
class AppComponent {
String name = 'Alice';
}
p.
The template above binds to a name property through the {{ }}
syntax.The body of the constructor assigns "Alice" to the name property. When the
template renders, Alice appears instead of {{ name }}.
[TODO: fix double mustaches]
// STEP 4 - Bootstrap ##########################
.l-main-section
h2#section-transpile 4. Bootstrap
p.
At the bottom of web/main.dart,
add a main() function
that calls Angular's bootstrap() function.
The argument to bootstrap() is the name of the app class
you defined above:
pre.prettyprint.linenums
code.
main() {
bootstrap(AppComponent);
}
p.
[PENDING: change/remove line numbers. They should start at 12.]
// 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 app component:
pre.prettyprint.linenums
code.
<!doctype html>
<html>
<head>
<title>Angular 2 Quickstart</title>
</head>
<body>
<app></app>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
p.
[PENDING: When I select a bunch of code, it looks like I select the line #s too, making me fear that they'll get copied. But pasting doesn't include them. Fix!]
// STEP 5 - Build and run ##########################
.l-main-section
h2#section-angular-run-app 5. Build and run your app
p.
You have many options.
One is to run the pub serve
command in the directory
that contains your app's pubspec.yaml file:
pre.prettyprint.linenums
code.
> pub serve
Serving helloworld on http://localhost:8080
p.
In the browser, go to the index file—for example,
localhost:8080/web/index.html.
[PENDING: This isn't working right now. Fix!]
// WHAT'S NEXT... ##########################
.l-main-section
h2#section-transpile Great Job! Next Step...
p.
Learn some template syntax for extra credit.
[PENDING: really?]