Let's start from zero and build a super simple Angular 2 application in Dart.
These instructions assume that you already have the Dart SDK and any tools you like to use with Dart. If you don't have a favorite editor already, try WebStorm, which comes with a Dart plugin. You can also download Dart plugins for other IDEs and editors. Once you have the Dart SDK and any other tools you want, return here.
Set up a new app directory
Create a new directory,
and put a file named
pubspec.yaml in it.
specify the angular2 and browser packages as dependencies,
as well as the angular2 transformer.
Angular 2 is still changing, so provide an exact version:
In the same directory, create a
web directory, and then
pub get to install the angular2 and browser packages
(along with the packages they depend on).
Create a Dart file
Create a file under
Paste the following code into
You've just defined an Angular 2 component, one of the most important Angular 2 features. Components are the primary way to create application views and support them with application logic.
This component is an empty, do-nothing class named
You can add properties and application logic to it later,
when you're ready to build a substantive application.
Above the class is the
which tells Angular that this class is an Angular component.
The call to the
@Component constructor has two
selector parameter specifies a CSS selector for
a host HTML element named
Angular creates and displays an instance of
wherever it encounters a
template parameter is the component's companion template
that tells Angular how to render a view.
In this case, the template is a single line of HTML announcing
"My First Angular 2 App".
which tells Angular to start the application with
at the application root.
Someday the application will
consist of more components arising in tree-like fashion from this root.
The top lines import two libraries.
All Dart files that use Angular APIs import
Only files that call
Create an HTML file
Create a file named
web/index.html that contains
the following code:
<my-app> tag in the
the custom HTML element defined in the Dart file.
Run the app
You have a few options for running your app. One is to launch a local HTTP server and then view the app in Dartium. You can use whatever server you like, such as WebStorm's server or Python's SimpleHTTPServer.
Another option is to build and serve the app using
and then run it by visiting http://localhost:8080 in any modern browser.
which can take a while when you first visit the page.
Once the app is running, you should see My First Angular 2 App in your browser window.
If you don't see that, make sure you've entered all the code correctly
Add the dart_to_js_script_rewriter package to your pubspec,
in both the
be sure to use the Angular transformer.
It analyzes your code,
converting reflection-using code to static code
The highlighted lines in
configure the Angular transformer:
identifies the Dart file in your app
that has a
For more information, see the
transformer wiki page.
Performance, the transformer, and Angular 2 libraries
When you import
you also get
a reflection library that
the Angular transformer converts your entry points
so that they don't use mirrors.