angular-cn/public/docs/dart/latest/guide/setup.jade

.l-main-section

  p.
    As long as you already
    <a href="https://www.dartlang.org/downloads/">have the Dart SDK</a>,
    getting started with Angular 2 is simple:

  ol
    li Depend on the <b>angular2</b> pub package.
    li Create a Dart file that defines (directly or indirectly) a
       <b>root component</b> and <b>bootstraps</b> Angular.
    li Create an HTML file that uses the root component and points to the Dart file

  p.
    You can use whichever editor or IDE you like,
    or just use the command-line tools that the Dart SDK provides.
    See <a href="http://www.dartlang.org/tools/">Dart Tools</a>
    for more information.


  h2#section-install Depend on angular2

  p.
    To use Angular2 in your app, include angular2 as a dependency in
    your app's <b>pubspec.yaml</b> file. For example:

  code-example(language="yaml").
    # pubspec.yaml
    name: getting_started
    description: Dart version of Angular 2 example, Getting Started
    version: 0.0.1
    dependencies:
      angular2: 2.0.0-alpha.23
      browser: any
  p.
    Run <b>pub get</b> to download the packages your app depends on.
    (<a href="https://www.dartlang.org/tools/">Dart-savvy editors and IDEs</a>
    typically run <code>pub get</code> for you.)


.l-main-section
  h2#section-set-up-the-starting-component Write the Dart code

  p.
    Next to your <code>pubspec.yaml</code> file,
    create a <code>web</code> subdirectory containing a Dart file
    (<code>main.dart</code>).
    Edit <code>main.dart</code>, adding a component class (<b>AppComponent</b>),
    configuring it to bind to the <code>&lt;my-app&gt;</code> element,
    and creating a top-level <code>main()</code> function that calls
    Angular's <code>bootstrap()</code> function.

  code-example(language="javascript").
    // web/main.dart
    import 'package:angular2/angular2.dart';
    import 'package:angular2/src/reflection/reflection.dart' show reflector;
    import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;

    @Component(
      selector: 'my-app'
    )
    @View(
      template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
    )
    class AppComponent {
    }

    main() {
      reflector.reflectionCapabilities = new ReflectionCapabilities();
      bootstrap(AppComponent);
    }

.l-main-section
  h2#section-create-an-entry-point Create an HTML file
  p.
    In the <code>web/</code> directoryapp, create an HTML file (<code>index.html</code>).
    Edit <code>index.html</code> to add a <code>&lt;my-app&gt;</code> element
    and call <code>main.dart</code>.

  code-example(language="html").
    &lt;!-- web/index.html -->
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;my-app&gt;&lt;/my-app&gt;
        &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
    &lt;/html&gt

.l-main-section
  h2#section-run-it Run the app!

  p.
    Now run the app. How you do this depends on your tools.

  ul
    li.
      If you're using <b>Dart Editor</b>,
      right-click <b>web/index.html</b>,
      and choose <b>Open in Dartium</b>.
      This starts a web server
      and opens your app in Dartium,
      an experimental version of the Chromium browser that contains the Dart VM.

    li.
      If you're using <b>WebStorm</b> or <b>IntelliJ IDEA</b>,
      right-click <b>web/index.html</b>,
      and choose <b>Run 'index.html'</b>.

    li.
      If you're using the command line and don't have Dartium,
      serve the app using <code>pub serve</code>,
      and then run it by visiting <b>http://localhost:8080</b> in a browser.
      Generating the JavaScript takes a few seconds when you first visit the page,
      and the generated JavaScript is currently large.
      The generated JavaScript will be smaller once
      Angular's transformer becomes available.

  p.
    You should see something like this:

  figure.image-display
    img(src='/resources/images/examples/setup-example1.png'  alt="Example of Todo App")

.l-main-section
  h2#section-explanations Explanations

  p This basic Angular app contains the structure for any app you'll build.

  .l-sub-section
    h3 It's all a tree

    p.
      You can think of an Angular app as a tree of components.
      The root component acts as the top-level container for the rest of your application.
      You've named this one <code>AppComponent</code>, but there's
      nothing special about the name; you can use whatever makes sense to you.

    p.
      The root component's job is to give a location in the HTML file where
      your application can
      render through its element—in this case, <code>&lt;my-app&gt;</code>.
      There's nothing special about the HTML filename or the element name;
      you can pick whatever you like.

    p.
      The root component loads the initial template for the application,
      which loads other components to perform
      whatever functions your application needs—menu bars, views, forms, and so on.
      We'll walk through examples of all of
      these in the following pages.

  .l-sub-section
    h3 @Component and @View annotations

    p.
      A component annotation describes details about the component.
      An annotation can be identified by its at-sign (<code>@</code>).
    p.
      The <code>@Component</code> annotation defines the HTML tag for
      the component by specifying the component's CSS selector.
    p.
      The <code>@View</code> annotation defines the HTML that
      represents the component.
      The component you wrote uses an inline template,
      but you can also have an external template.
      To use an external template,
      specify a <code>templateUrl</code> property and
      give it the path to the HTML file.


  p.
    Exciting!  Not excited yet?
    Let's move on to <a href="displaying-data.html">Displaying Data</a>.