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

.l-main-section
  h2#section-install-or-plunker Install Angular or Use Plunker
  p There are five steps to create any Angular app:
  ol
    li Create an entry point HTML file where users will start
    li Load the Angular library at the top of the file
    li Make a root component for your application
    li Bootstrap Angular

  p.
    Dart makes dependencies available to the application through the <code>pubspec.yaml</code> file.
    To use Angular2 in your app, include angular as a dependency.  Here’s the minimal
    <code>pubspec.yaml</code> file for this sample:

  pre.prettyprint.lang-dart
    code.
      name: getting_started
      description: Dart version of Angular 2 example, Getting Started
      version: 0.0.1
      dependencies:
        angular2: 2.0.0-alpha.20
        browser: any


  p.
    The Dart Editor automatically downloads the packages your app depends on, along with any packages that they, in
    turn, depend on. If this download fails or you like using the command line, you can explicitly install packages.
    From Dart Editor, you can use <strong>Tools &gt; Pub Get</strong>. From the command line (in the root directory of
    your app, assuming the Dart SDK is in your path), you can run <code>pub get</code>.

.l-main-section
  h2#section-create-an-entry-point Create an entry point
  p.
    Create an <code>index.html</code> file and add the Angular library tags and a <code>main.js</code> file where
    you'll build your first component.

  p.
    In the <code>&lt;body&gt;</code>, add an element called <code>&lt;my-app&gt;</code> that will be the root of your
    application.

  pre.prettyprint.lang-html
    code.
      //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-set-up-the-starting-component Set up the starting component

  p.
    In <code>main.dart</code>, create a class called <code>AppComponent</code>, configure it to bind to the
    <code>&lt;my-app&gt;</code> element in <code>index.html</code>, and call Angular's <code>bootstrap()</code> to kick
    it all off like this:

  pre.prettyprint.lang-dart
    code.
      //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: '<h1>My first Angular 2 App</h1>'
      )
      class AppComponent {
      }

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

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

  p.
    Now run the app. In Dart Editor’s Files view, select <code>index.html</code>, right-click, and choose <strong>Run
    in Dartium</strong>.

    You should see:
  div(align='center')
    img(src='setup-example1.png')

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

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

  p.
    You can think of Angular apps as a tree of components.  This root component we've been talking about 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 and you can use whatever makes sense to you.

  p.
    The root component's job is to give a location in the <code>index.html</code> file where your application will
    render through it's element, in this case <code>&lt;my-app&gt;</code>.  There is also nothing special about this
    element name and you can pick it as you like.

  p.
    The root component loads the initial template for the application that will load other components to perform
    whatever functions your application needs - menu bars, views, forms, etc.  We'll walk through examples of all of
    these in the following pages.

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