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

.callout.is-helpful
  header Angular 2 is currently in Developer Preview
  p.
    We recommend using
    <a href='https://angulardart.org'>Angular for Dart</a>
    for production applications.


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/downloads/">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.
    Angular 2 is changing rapidly, so specify an exact version:
    <b>2.0.0-alpha.23</b>.

  pre.prettyprint.linenums.lang-basic
    code.
      name: hello_world
      version: 0.0.1
      dependencies:
        angular2: 2.0.0-alpha.23
        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

  // PENDING: Create template? Link to pub/pubspec docs?
  // Is browser really needed?


// 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'
      )
      @View(
        template: '&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>@View</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>@View</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>templateUrl</code> property
      and give it the path to the HTML file.

    pre.prettyprint
      code.
        @Component(
          selector: 'my-app'
        )
        @View(
          template: '&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 <b>web/index.html</b>,
    and choose <b>Open in Dartium</b>.
    This starts a web server
    and opens your app in an experimental browser that contains the Dart VM.

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

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

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

  p.
    We plan to add a developer guide soon.
    Until then, check out <a href="resources.html">Angular Resources</a>.
    To learn more about Dart, go to
    <a href="https://www.dartlang.org">dartlang.org</a>.