angular-cn/public/docs/dart/latest/quickstart.jade

p.
  These instructions assume that you already have the Dart SDK
  and any tools you like to use with Dart.
  If not, go
  <a href="https://www.dartlang.org/tools/download.html">download Dart</a>.
  Then return here.

// STEP 1 - Install Angular ##########################
.l-main-section
  h2#section-install-angular 1. Install Angular

  p.
    In a new directory, create a <code>pubspec.yaml</code> file.
    Add angular2 and browser as dependencies:

  // [PENDING: if the transformer isn't working in time,
  // remove it and use reflection in Dartium instead.
  // Perhaps require Dart 1.9.]

  pre.prettyprint.linenums
    code.
      name: hello_world
      version: 0.0.1
      dependencies:
        angular2: "&gt;=2.0.0-alpha.6 &lt;3.0.0"
        browser: any
  p.
    In the same directory, run <code>pub get</code>
    to install the angular2 and browser packages
    (along with the packages they depend on):

  pre.prettyprint
    code.
      > pub get
      Resolving dependencies... (7.3s)
      + angular2 2.0.0-alpha.6
      + browser 0.10.0+2
      + path 1.3.3
      + stack_trace 1.2.3
      Changed 4 dependencies!

  // PENDING: Create template? Link to pub/pubspec docs?
  // Is browser really needed?
  // TODO: make this an invisible note.


// STEP 2 - Import Angular ##########################
.l-main-section
  h2#section-transpile 2. Import Angular

  p.
    Still in the same directory, create a <code>web</code> directory.
    Create a file under <code>web</code> named <code>main.dart</code>.
    Edit <code>web/main.dart</code> to import the angular2 library
    and (for now) two reflection libraries:

  pre.prettyprint.linenums
    code.
      import 'package:angular2/angular2.dart';

      // These imports will go away soon:
      import 'package:angular2/src/reflection/reflection.dart' show reflector;
      import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;

// STEP 3 - Define a component ##########################
.l-main-section

  h2#section-angular-create-account 3. Define a component

  p.
    A component is a custom HTML element.
    In this step, you create a component that has the tag <b>&lt;app></b>.
    The Dart code for a component consists of a class
    with annotations that describe the component.

  p.
    Update <code>web/main.dart</code> to add the following code,
    which defines the app component:

  pre.prettyprint.linenums
    code.
      @Component(
        selector: 'app'
      )
      @Template(
        inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
      )
      class AppComponent {
        String name = 'Alice';
      }

  // TODO: Change or omit line numbers.

  .l-sub-section
    h3 Annotations

    p.
      The <code>@Component</code> annotation defines the HTML tag for the component.
      The <code>selector</code> property specifies the tag. The <code>selector</code> property is a CSS selector.

    // [PENDING: that last paragraph needs work!]

    p.
      The <code>@Template</code> annotation defines the template to apply to the
      component. This component uses an inline template, but external templates are
      available as well. To use an external template, specify a <code>url</code> property
      and give it the path to the HTML file.

    pre.prettyprint.linenums
      code.
        @Component(
          selector: 'app'
        )
        @Template(
          inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
        )

    p.
      The annotations above specify an HTML tag of <code>&lt;app&gt;&lt;/app&gt;</code>
      and a template of <code>&lt;h1&gt;Hello &#123;&#123; name }}&lt;/h1&gt;</code>.

    // TODO: In the preceding paragraph, that should be rendered as {{ name }}, like in the listing.

  .l-sub-section
    h3 The template and the component controller

    p.
      A template has access to all the public properties and methods
      of its component controller.
      The template above binds to a <code>name</code> property through
      the double-mustache syntax (<code>{{ }}</code>).
      The body of the constructor assigns "Alice" to the name property. When the
      template renders, Alice appears instead of <code>{{ name }}</code>.

    // TODO: fix double mustaches above.

    // [PENDING: Do we really want to use the term "component controller"?
    // If so, set it up beforehand.
    // In the original text, what does "the backing" mean, and is it
    // important that we keep it?]

    pre.prettyprint.linenums
      code.
        class AppComponent {
          String name = 'Alice';
        }

// STEP 4 - Bootstrap ##########################
.l-main-section
  h2#section-transpile 4. Bootstrap

  p.
    At the bottom of <code>web/main.dart</code>,
    add a <code>main()</code> function
    that calls Angular's <code>bootstrap()</code> function.
    The argument to <code>bootstrap()</code> is the name of the app class
    you defined above.

  p.
    For now, you also need to set the value of
    <code>reflector.reflectionCapabilities</code>.

  pre.prettyprint.linenums
    code.
      main() {
        // Temporarily needed.
        reflector.reflectionCapabilities = new ReflectionCapabilities();

        bootstrap(AppComponent);
      }

  // [PENDING: change/remove line numbers. They should start at 12.]

// STEP 5 - Declare the HTML ##########################
.l-main-section

  h2#section-angular-create-account 5. Declare the HTML

  p.
    Create a file named <code>web/index.html</code> that contains
    the following code,
    which loads <code>main.dart</code> and instantiates the app component:

  pre.prettyprint.linenums
    code.
        &lt;!doctype html>
        &lt;html>
          &lt;head&gt;
            &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
          &lt;/head&gt;
          &lt;body>
            &lt;app>&lt;/app>

            &lt;script type="application/dart" src="main.dart">&lt;/script>
            &lt;script src="packages/browser/dart.js">&lt;/script>
          &lt;/body>
        &lt;/html>

  // [PENDING: When I select a bunch of code, it looks like I select the line #s too, making me fear that they'll get copied. But pasting doesn't include them. Can we fix that?]

// STEP 6 - Build and run ##########################
.l-main-section

  h2#section-angular-run-app 6. Build and run your app

  p.
    You have several options for running your app.
    The quickest and easiest, for now,
    is to open your project in <b>Dart Editor</b>,
    right-click <code>web/index.html</code>,
    and choose <b>Open in Dartium</b>.

  // TODO: screenshot?

  p.
    Another option is to build and serve the app using <code>pub serve</code>,
    and then to run it by visiting http://localhost:8080/index.html in a browser.
    The JavaScript generated using this option is large, for now;
    it'll be much better soon, when a transformer becomes available
    to convert the reflection code from dynamic to static code.

  // [PENDING: Update when transformer is working!]

// WHAT'S NEXT... ##########################
.l-main-section
  h2#section-transpile Great Job! Next Step...

  p.
    Learn some template syntax for extra credit.

  // [PENDING: really?]