Setup for Development

Send feedback

Setting up a new Angular project is quick and easy, using everyday Dart tools.

Prerequisites: Dart SDK & Dartium

If you don't already have the Dart SDK and Dartium, get them. We recommend using the WebStorm IDE, as well.

Get Started tells you how to get the tools.

Creating a project in WebStorm

Using WebStorm to create an app is simple, once you complete some one-time setup.

  1. Launch WebStorm.
  2. If you haven't already done so, configure Dart support in WebStorm.
  3. Choose Create New Project from the welcome screen, or File > New > Project... from the menu. A dialog appears.
  4. Select Dart from the list on the left.
  5. Set the location and template:
    1. In the Location input field, check that the project folder is where you want it.
    2. Also in the Location field, change the name of the project from untitled to whatever you choose, such as angular_quickstart.
    3. Make sure that Generate sample content is checked.
    4. Select Angular QuickStart Example from the list.
      The form should look similar to the following:
      A screenshot of the New Project dialog, with the specified selections
  6. Click Create.

WebStorm takes several seconds to analyze the sources and do other housekeeping. This only happens once. After that, you'll be able to use WebStorm for the usual IDE tasks, including running the app.

For more information on using WebStorm, see Installing and Using WebStorm.

Using a template from the command line

Stagehand gives you command-line access to the same templates that WebStorm uses. Assuming the Dart SDK and pub cache bin directory are in your path, here's how you use Stagehand to create an Angular project.

  1. Install or update stagehand:
    pub global activate stagehand
  2. Create a directory for your project:
    mkdir angular_quickstart; cd angular_quickstart
  3. Use Stagehand with the appropriate template to create a skeleton app:
    stagehand web-angular-quickstart
    Note: Examples in this guide and tutorial are based on the QuickStart example, which is in the web-angular-quickstart template. A more general-purpose template is web-angular.
  4. Get the app's dependencies:
    pub get
  5. Run the app:
    pub serve

What's in the QuickStart example?

The QuickStart example contains the following core files:

import 'package:angular2/core.dart'; @Component( selector: 'my-app', template: '<h1>Hello {{name}}</h1>') class AppComponent { var name = 'Angular'; } import 'package:angular2/platform/browser.dart'; import 'package:angular_quickstart/app_component.dart'; void main() { bootstrap(AppComponent); } <!DOCTYPE html> <html> <head> <title>Hello Angular</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script defer src="main.dart" type="application/dart"></script> <script defer src="packages/browser/dart.js"></script> </head> <body> <my-app>Loading AppComponent content here ...</my-app> </body> </html> /* Master Styles */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } body { margin: 2em; } name: angular_quickstart description: QuickStart version: 0.0.1 environment: sdk: '>=1.19.0 <2.0.0' dependencies: angular2: ^2.2.0 dev_dependencies: browser: ^0.10.0 dart_to_js_script_rewriter: ^1.0.1 transformers: - angular2: platform_directives: - 'package:angular2/common.dart#COMMON_DIRECTIVES' platform_pipes: - 'package:angular2/common.dart#COMMON_PIPES' entry_points: web/main.dart - dart_to_js_script_rewriter

These files are organized as follows:

angular_quickstart
lib
app_component.dart
web
main.dart
index.html
styles.css
pubspec.yaml

All guides and cookbooks have at least these core files. Each file has a distinct purpose and evolves independently as the application grows.

File Purpose
lib/app_component.dart

Defines <my-app>, the root component of what will become a tree of nested components as the application evolves.

web/main.dart

Bootstraps the application to run in the browser.

web/index.html

Contains the <my-app> tag in its <body>. This is where the app lives!

web/styles.css

A set of styles used throughout the app.

pubspec.yaml

The file that describes this Dart package (the app) and its dependencies. For example, it specifies the angular2 and browser packages as dependencies, as well as the angular2 transformer.

Next step

If you're new to Angular, we recommend staying on the learning path.