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,
    and add the angular2 transformer:
    [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
      transformers:
      - angular2
  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.linenums
    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!

  p.
    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.
    Under 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:

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


// 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 contain the following code,
    which defines the app component:

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

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

  .l-sub-section
    h3 Annotations

    p.
      The <code>@Component</code> annotation defines the HTML tag for the component. [PENDING: component controller?]
      The <code>selector</code> property specifies the tag. The <code>selector</code> property is a CSS selector. [PENDING: huh?]

    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>.

    p TODO: make double-mustaches work in text (they do work in listings)

  .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.
      [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';
        }

    p.
      The template above binds to a <code>name</code> property through the <code>{{ }}</code>
      syntax.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]



// 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:

  pre.prettyprint.linenums
    code.
      main() {
        bootstrap(AppComponent);
      }
  p.
    [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>
  p.
    [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. Fix!]

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

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

  p.
    You have many options.
    One is to run the <code>pub serve</code>
    command in the directory
    that contains your app's <code>pubspec.yaml</code> file:

  pre.prettyprint.linenums
    code.
      > pub serve
      Serving helloworld on http://localhost:8080

  p.
    In the browser, go to the index file—for example,
    localhost:8080/web/index.html.
    [PENDING: This isn't working right now. Fix!]

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

  p.
    Learn some template syntax for extra credit.
    [PENDING: really?]