Let's start from zero and build a super simple Angular 2 application in Dart.
Although we're getting started in Dart, you can also write Angular 2 apps in TypeScript and JavaScript. Just select either of those languages from the combo-box in the banner.
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.
In pubspec.yaml,
specify the angular2 and browser packages as dependencies,
as well as the angular2 transformer.
Angular 2 is still changing, so provide an exact version:
2.0.0-beta.0.
In the same directory, create a web directory, and then
run pub get to install the angular2 and browser packages
(along with the packages they depend on).
Create a Dart file
Create a file under web named main.dart.
Paste the following code into web/main.dart:
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 AppComponent.
You can add properties and application logic to it later,
when you're ready to build a substantive application.
Above the class is the @Component annotation,
which tells Angular that this class is an Angular component.
The call to the @Component constructor has two
named parameters, selector and template.
The selector parameter specifies a CSS selector for
a host HTML element named my-app.
Angular creates and displays an instance of AppComponent
wherever it encounters a my-app element.
The 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".
The main() function
calls Angular's bootstrap() function,
which tells Angular to start the application with AppComponent
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 angular2.dart.
Only files that call bootstrap() import bootstrap.dart.
Create an HTML file
Create a file named web/index.html that contains
the following code:
The <my-app> tag in the <body> is
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 pub serve,
and then run it by visiting http://localhost:8080 in any modern browser.
Pub serve generates the JavaScript on the fly,
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
and run pub get.
Generate JavaScript
Before you can deploy your app, you need to generate JavaScript files. Pub build makes that easy. To improve your app's performance, convert the HTML file to directly include the generated JavaScript; one way to do that is with dart_to_js_script_rewriter.
Add the dart_to_js_script_rewriter package to your pubspec,
in both the dependencies and transformers sections.
Then compile your Dart code to JavaScript,
using pub build.
The generated JavaScript appears, along with supporting files,
under the build directory.
When you generate JavaScript for an Angular app,
be sure to use the Angular transformer.
It analyzes your code,
converting reflection-using code to static code
that Dart's build tools can compile to faster, smaller JavaScript.
The highlighted lines in pubspec.yaml
configure the Angular transformer:
The entry_points item
identifies the Dart file in your app
that has a main() function.
For more information, see the
Angular
transformer wiki page.
Performance, the transformer, and Angular 2 libraries
When you import bootstrap.dart,
you also get dart:mirrors,
a reflection library that
causes performance problems when compiled to JavaScript.
Don't worry,
the Angular transformer converts your entry points
(entry_points in pubspec.yaml)
so that they don't use mirrors.
Great job! Next step...
Follow the developer guide to continue playing with Angular 2 for Dart.
Or read more about Angular or Dart: