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 - Create a project ##########################
.l-main-section
  h2#section-install-angular 1. Create a project

  p.
    Create a new directory, and put a file named
    <code>pubspec.yaml</code> in it.

  pre.prettyprint
    code.
      &gt; mkdir hello_world
      &gt; cd hello_world
      &gt; vim pubspec.yaml  # Use your favorite editor!

  p.
    In <code>pubspec.yaml</code>, add the angular2 and browser packages as dependencies:

  pre.prettyprint.linenums.lang-basic
    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.lang-basic
    code.
      &gt; 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?

  .alert.is-helpful.
    Depending on your version of Dart, your version numbers (of angular2
    and other packages) might be higher than shown above. That's fine.


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

  pre.prettyprint
    code.
      &gt; mkdir web
      &gt; vim web/main.dart  # Use your favorite editor!

  p.
    Edit <code>web/main.dart</code> to import the angular2 library
    and (for now) two reflection libraries:

  // pre.prettyprint.linenums
  pre.prettyprint
    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;

  // [PENDING: add line numbers once we can specify where they start]

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

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

  p.
    Update <code>web/main.dart</code>, adding the following code
    after the imports:

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

  // [PENDING: add line numbers once we can specify where they start]

  p.
    The code you just added creates a component that
    has the tag <b>&lt;my-app></b>.
    The Dart code for an Angular component consists of a class
    (the <b>component controller</b>)
    that has <code>@Component</code> and <code>@Template</code> annotations.


  .l-sub-section
    h3 Annotations

    p.
      The <code>@Component</code> annotation defines
      the HTML tag for the component by specifying the component's CSS selector.

    p.
      The <code>@Template</code> annotation defines the HTML that
      represents the component. This component uses an inline template,
      but you can also have an external template. To use an external template,
      specify a <code>url</code> property
      and give it the path to the HTML file.

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

    // [PENDING: add line numbers once we can specify where they start]

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


  .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 ng-non-bindable>{{ ... }}</code>).
    p.
      The component controller assigns "Alice" to the name property. When the
      template renders, "Hello Alice" appears instead of
      <span ng-non-bindable>"Hello {{ name }}"</span>.

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

    // [PENDING: add line numbers once we can specify where they start]


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

  p.
    Add the following code to the bottom of <code>web/main.dart</code>:

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

        bootstrap(AppComponent);
      }

  // [PENDING: add line numbers once we can specify where they start]

  p.
    This code adds a <code>main()</code> function
    that calls Angular's <code>bootstrap()</code> function.
    The argument to <code>bootstrap()</code> is the name of the component class
    you defined above.

  p.
    Setting the value of
    <code>reflector.reflectionCapabilities</code>
    is a temporary workaround
    that you can remove once Angular's transformer is available.


// 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 my-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;my-app>&lt;/my-app>

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

// 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? embedded app?

  p.
    Another option is to build and serve the app using <code>pub serve</code>,
    and then 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 Angular's transformer becomes available.

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

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

  p.
    To try out the latest Angular 2 APIs,
    first download the <b>Dev channel</b> of Dart from the
    <a href="https://www.dartlang.org/tools/download-archive/">Dart
    Download Archive</a>.

  p.
    Once you have the Dart Dev channel, use <b>pub upgrade</b>
    to get the latest version of Angular 2.


  // [PENDING: Perhaps point to dartlang.org.]