Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
138 lines (103 sloc) 4.48 KB
title description sideNavGroup prevpage nextpage
Setup for Development
How to use Dart tools to create and run Angular apps
basic
title url
Documentation Overview
/guide/index
title url
Learning Angular
/guide/learning-angular

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

Get prerequisites

For information on how to get these prerequisite tools, see the Dart site:

  • Dart SDK {{site.data.pkg-vers.SDK.vers}} or a compatible version
  • Your favorite IDE, or WebStorm (recommended).

{% include webstorm-status.md %}

Create a starter project {#create}

The examples in this guide and tutorial are based on the angular-examples/quickstart GitHub project. You can get the project's files by the following methods:

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, from the menu, choose VCS > Git > Clone...
    A Clone Repository dialog appears.
  4. Fill out the following fields:
    • Git Repository URL: {{site.ghNgEx}}/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. {%- if site.branch != 'master' %}
  6. After the project opens, from the menu, choose VCS > Git > Branches...
    A Git Branches popup appears.
  7. From the popup, under Remote Branches choose
    origin/{{site.branch}} > Checkout as new local branch. {% endif %}

Get dependencies {#get}

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 following command in a terminal window:

$ pub get

Customize the project

Using WebStorm, or your favorite editor:

  1. Open web/index.html, and replace the text of the <title> element with a title suitable for your app. For example: <title>Angular Tour of Heroes</title>.

  2. Open pubspec.yaml, and update the description to suit your project. For example: description: Tour of Heroes.

  3. Optional. If you'd like to change your project's name, then do a project-wide search-and-replace of the current value of the pubspec name entry (angular_app) with a name suitable for your app — usually it will be the same as the directory name you chose earlier.

    This project-global rename will touch: pubspec.yaml, web/main.dart and test/app_test.dart.

Run the app

In WebStorm:

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

You should see the following app in a browser window:

A web page with the header: Hello Angular

To run the app from the command line, use webdev to build and serve the app:

$ webdev serve

Then, to view your app, use the Chrome browser to visit localhost:8080. (Details about Dart's browser support are in the FAQ.)

Reload the app {#reload}

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.

You can’t perform that action at this time.