Setup for Development

2.2

Send feedback

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

The examples in this guide and tutorial are based on the Simple Angular Example. This page leads you through getting the files for this example, using either a Dart-savvy IDE such as WebStorm or the command-line tool stagehand.

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.

Using WebStorm to create a project

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 example1.
    3. Make sure that Generate sample content is checked.
    4. Select Simple Angular 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.

If WebStorm shows errors for the app, it probably didn't get the dependencies for your app. To fix the problem, right-click pubspec.yaml and choose Pub: Get Dependencies.

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

Using Stagehand to create a project

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 example1; cd example1
  3. Use Stagehand with the simple Angular template to create a skeleton app:
    stagehand web-angular-simple
  4. Get the app's dependencies:
    pub get

Running the app

To run the app from WebStorm, right-click the app’s web/index.html file and choose Run ‘index.html’. The app appears in a Dartium browser window.

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.

As you update the code Pub detects the change and serves the new app. Reload the browser window to see your changes.

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.