5 Min Quickstart

Let's start from zero and build a super simple Angular 2 application in Dart.

Don't want 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.

> mkdir angular2_getting_started > cd angular2_getting_started > vim pubspec.yaml # Use your favorite editor!

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.

name: angular2_getting_started version: 0.0.1 dependencies: angular2: 2.0.0-beta.0 browser: ^0.10.0 transformers: - angular2: entry_points: web/main.dart

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).

> mkdir web > pub get Resolving dependencies...

Create a Dart file

Create a file under web named main.dart.

> vim web/main.dart # Use your favorite editor!

Paste the following code into web/main.dart:

import 'package:angular2/angular2.dart'; import 'package:angular2/bootstrap.dart'; @Component(selector: 'my-app', template: '<h1>My First Angular 2 App</h1>') class AppComponent {} main() { bootstrap(AppComponent); }

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:

<!DOCTYPE html> <html> <head> <title>Getting Started</title> <script async src="main.dart" type="application/dart"></script> <script async src="packages/browser/dart.js"></script> </head> <body> <my-app>Loading...</my-app> </body> </html>

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.

name: angular2_getting_started version: 0.0.1 dependencies: angular2: 2.0.0-beta.0 browser: ^0.10.0 dart_to_js_script_rewriter: ^0.1.0 transformers: - angular2: entry_points: web/main.dart - dart_to_js_script_rewriter

Then compile your Dart code to JavaScript, using pub build.

> pub build Loading source assets...

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:

name: angular2_getting_started version: 0.0.1 dependencies: angular2: 2.0.0-beta.0 browser: ^0.10.0 dart_to_js_script_rewriter: ^0.1.0 transformers: - angular2: entry_points: web/main.dart - dart_to_js_script_rewriter

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: