include ../_util-fns

a#develop-locally
:marked
  Setting up a new Angular project is quick and easy,
  using everyday Dart tools.

.l-main-section#sdk
:marked
  ## 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](https://webdev.dartlang.org/guides/get-started) tells you how to get the tools.


a#webstorm
:marked
  ## Creating a project in WebStorm

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

  1. Launch WebStorm.
  1. If you haven't already done so,
  [configure Dart support in WebStorm](https://webdev.dartlang.org/tools/webstorm#configuring-dart-support).
  1. Choose **Create New Project** from the welcome screen,
  or **File > New > Project...** from the menu.  A dialog appears.
  1. Select **Dart** from the list on the left.
  1. Set the location and template:
     1. In the **Location** input field, check that
        the project folder is where you want it.
     1. Also in the **Location** field,
        change the name of the project from `untitled` to whatever you choose, such as `angular_quickstart`.
    1. Make sure that **Generate sample content** is checked.
    1. Select **Angular QuickStart Example** from the list.
    <br>
    The form should look similar to the following:
    <br>
    <img src="images/create-ng2-project.png" alt="A screenshot of the New Project dialog, with the specified selections" style="border:1px solid">
  1. 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](https://webdev.dartlang.org/tools/webstorm).


a#cli
:marked
  ## Using a template from the command line

  [Stagehand](http://stagehand.pub/) gives you
  command-line access to the same templates that WebStorm uses.
  Assuming the Dart SDK and
  [pub cache `bin` directory](https://www.dartlang.org/tools/pub/cmd/pub-global#running-a-script-from-your-path)
  are in your path, here's how you use Stagehand to create an Angular project.

  1. Install or update stagehand:
  <br>
  `pub global activate stagehand`
  1. Create a directory for your project:
  <br>
  `mkdir angular_quickstart; cd angular_quickstart`
  1. Use Stagehand with the appropriate template to create a skeleton app:
  <br>
  `stagehand web-angular-quickstart`
   <br>
   **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`.
  1. Get the app's dependencies: <br>
     `pub get`
  1. Run the app: <br>
     `pub serve`


.l-main-section#seed
:marked
  ## What's in the QuickStart example?

  The <live-example name="quickstart">QuickStart example</live-example>
  contains the following core files:

+makeTabs(`
    quickstart/ts/app/app.component.ts,
    quickstart/ts/app/main.ts,
    quickstart/ts/index.html,
    quickstart/ts/styles.css,
    quickstart/dart/pubspec.yaml`,
  ',,,quickstart,',
  `app/app.component.ts,
  app/main.ts,
  index.html,
  styles.css (excerpt),
  pubspec.yaml`)

:marked
  These files are organized as follows:

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

:marked
  All guides and cookbooks have _at least these core files_. Each file has a distinct purpose and evolves independently as the application grows.

style td, th {vertical-align: top}
table(width="100%")
  col(width="20%")
  col(width="80%")
  tr
    th File
    th Purpose
  tr
    td <code>lib/app_component.dart</code>
    td
      :marked
        Defines `<my-app>`, the **root** component of what will become a tree of nested components
        as the application evolves. 
  tr
    td <code>web/main.dart</code>
    td
      :marked
        Bootstraps the application to run in the browser.
  tr
    td <code>web/index.html</code>
    td
      :marked
        Contains the `<my-app>` tag in its `<body>`.
        This is where the app lives!
  tr
    td <code>web/styles.css</code>
    td
      :marked
        A set of styles used throughout the app.
  tr
    td <code>pubspec.yaml</code>
    td
      :marked
        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.

.l-sub-section
  :marked
    ### Next step

    If you're new to Angular, we recommend staying on the [learning path](learning-angular.html).