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:
pre.prettyprint.linenums
code.
name: hello_world
version: 0.0.1
dependencies:
angular2: ">=2.0.0-alpha.6 <3.0.0"
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
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!
// PENDING: Create template? Link to pub/pubspec docs?
// Is browser really needed?
p.
Note:
If you're using Dart's Dev channel, then your version of angular2
will be higher than alpha 6. That's fine.
// PENDING: Update once 1.9 is on stable channel.
// TODO: Convert the above to a callout.
// 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'
)
@Template(
inline: '<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 ({{ ... }}).
The component controller assigns "Alice" to the name property. When the
template renders, "Hello Alice" appears instead of
"Hello {{ name }}".
// [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
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.
// 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/index.html in a browser.
The JavaScript generated using this option is large, for now;
it'll be much better soon, when 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.
To try out the latest Angular 2 APIs,
first download the Dev channel of Dart from the
Dart
Download Archive.
p.
Once you have the Dart Dev channel, use pub upgrade
to get the latest version of Angular 2.
// [PENDING: really?] Perhaps point to dartlang.org.