.l-main-section
h2#section-install-or-plunker Install Angular or Use Plunker
p There are four steps to create any Angular app:
ol
li Create an entry point HTML file where users will start
li Load the Angular library at the top of the file
li Make a root component for your application
li Bootstrap Angular
p.
Dart makes dependencies available to the application through the pubspec.yaml file.
To use Angular2 in your app, include angular as a dependency. Here’s the minimal
pubspec.yaml file for this sample:
pre.prettyprint.lang-dart
code.
name: getting_started
description: Dart version of Angular 2 example, Getting Started
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.20
browser: any
p.
The Dart Editor automatically downloads the packages your app depends on, along with any packages that they, in
turn, depend on. If this download fails or you like using the command line, you can explicitly install packages.
From Dart Editor, you can use Tools > Pub Get. From the command line (in the root directory of
your app, assuming the Dart SDK is in your path), you can run pub get.
.l-main-section
h2#section-create-an-entry-point Create an entry point
p.
Create an index.html file and add the Angular library tags and a main.js file where
you'll build your first component.
p.
In the <body>, add an element called <my-app> that will be the root of your
application.
pre.prettyprint.lang-html
code.
//index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<my-app></my-app>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
.l-main-section
h2#section-set-up-the-starting-component Set up the starting component
p.
In main.dart, create a class called AppComponent, configure it to bind to the
<my-app> element in index.html, and call Angular's bootstrap() to kick
it all off like this:
pre.prettyprint.lang-dart
code.
//main.dart
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
@Component(
selector: 'my-app'
)
@View(
template: 'My first Angular 2 App
'
)
class AppComponent {
}
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(AppComponent);
}
.l-main-section
h2#section-run-it Run it!
p.
Now run the app. In Dart Editor’s Files view, select index.html, right-click, and choose Run
in Dartium.
You should see:
div(align='center')
img(src='setup-example1.png')
.l-main-section
h2#section-explanations Explanations
p This basic Angular app contains the structure for any app you'll build.
p.
You can think of Angular apps as a tree of components. This root component we've been talking about acts as the top
level container for the rest of your application. You've named this one AppComponent, but there's
nothing special about the name and you can use whatever makes sense to you.
p.
The root component's job is to give a location in the index.html file where your application will
render through it's element, in this case <my-app>. There is also nothing special about this
element name and you can pick it as you like.
p.
The root component loads the initial template for the application that will load other components to perform
whatever functions your application needs - menu bars, views, forms, etc. We'll walk through examples of all of
these in the following pages.
p Exciting! Not excited yet? Let's move on to Displaying Data.