Setup for Development

3.1

Send feedback

Setting up a new Angular project is quick and easy, using everyday Dart tools. This page leads you through getting and running the starter app that's featured in this guide and tutorial.

Get prerequisites: Dart SDK, Dartium, and WebStorm

If you don't already have the Dart SDK (1.23 or a compatible version) and Dartium, get them. We recommend that you also get WebStorm.

Get Started tells you how to get the tools.

Create a starter project

The examples in this guide and tutorial are based on the angular-examples/quickstart GitHub project. You can get the project's files by downloading them or cloning the repo.

Or use WebStorm's Git support:

  1. Launch WebStorm.
  2. If you haven't already done so, configure Dart support in WebStorm.
  3. From the welcome screen, choose Check out from Version Control > Git.
    Alternatively, choose VCS > Git > Clone... from the menu.
    A Clone Repository dialog appears.
  4. Fill out the fields:
    • Git Repository URL: https://github.com/angular-examples/quickstart
    • Parent Directory: (wherever you like to keep your practice code)
    • Directory Name: angular_tour_of_heroes (or any other valid package name)
  5. Click Clone.

Get dependencies

In WebStorm:

  1. Open the new project.
  2. In the project view, double-click pubspec.yaml.
  3. At the upper right of the editor view of pubspec.yaml:
    1. Click Enable Dart support.
    2. Click Get dependencies.

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.

If you aren't using WebStorm, you can use the command line to download dependencies: in a terminal window, go to the project root and run pub get.

Run the app

In WebStorm:

  1. In the project view, right-click web/index.html.
  2. Choose Run ‘index.html’.

If a dialog says that Chromium wants to use your confidential information, click Deny. (You shouldn’t use Dartium for general-purpose browsing, and Dartium doesn’t need your information to run this app.)

You should see the following app in a Dartium browser window:

A web page with the title and header: Hello Angular

To run the app from the command line, use the pub serve command to start the Dart compiler and an HTTP server. Then, to view your app, use a browser to navigate to the URL that pub serve displays.

Reload the app

Whenever you change the app, reload the browser window. As you save updates to the code, the pub tool detects changes and serves the new app.

Next step

If you're new to Angular, we recommend staying on the learning path. If you'd like to know more about the app you just created, see The Starter App.