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

  code-example(language="sh").
    &gt; <span class="blk">mkdir hello_world</span>
    &gt; <span class="blk">cd hello_world</span>
    &gt; <span class="blk">vim pubspec.yaml</span>  # 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.25</b>.

  code-example(language="yaml").
    name: hello_world
    version: 0.0.1
    dependencies:
      angular2: 2.0.0-alpha.25
      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):

  code-example(language="sh").
    &gt; <span class="blk">pub get</span>

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

  code-example(language="sh").
    &gt; <span class="blk">mkdir web</span>
    &gt; <span class="blk">vim web/main.dart</span>  # Use your favorite editor!

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

  code-example(language="dart" format="linenums").
    import 'package:angular2/angular2.dart';
    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.
    Update <code>web/main.dart</code>, adding the following code
    after the imports:

  code-example(language="dart" format="linenums:5").
    @Component(
      selector: 'my-app'
    )
    @View(
      template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
    )
    class AppComponent {
      String name = 'Alice';
    }

  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.

    code-example(language="dart").
      @Component(
        selector: 'my-app'
      )
      @View(
        template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
      )

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

    code-example(language="dart").
      class AppComponent {
        String name = 'Alice';
      }

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

  code-example(language="dart" format="linenums:15").
    main() {
      reflector.reflectionCapabilities = new ReflectionCapabilities();
      bootstrap(AppComponent);
    }

  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.

  //- Explain why setting reflector.reflectionCapabilities is necessary.


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

  code-example(language="html").
    &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 a few options for running your app.
    One is to launch a local HTTP server
    and then view the app in
    <a href="https://www.dartlang.org/tools/dartium/">Dartium</a>.
    You can use whatever server you like, such as Python's SimpleHTTPServer.

  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 any modern browser.
    Pub serve generates the JavaScript on the fly,
    which takes a few seconds when you first visit the page.

  p.
    Once the app is running,
    you should see <b>Hello Alice</b> in your browser window.


// STEP 7 - Use the Angular transformer ##########################
.l-main-section

  h2#section-angular-run-app 7. Use the Angular transformer

  p.
    To enable quick turnaround while you're developing an Angular app,
    the framework uses reflection via dart:mirrors.
    Unfortunately, mirror-using Dart code compiles to
    JavaScript code that's large and slow.
    To create more deployable JavaScript, use the Angular transformer.
    The transformer analyzes your code,
    converting reflection to static code
    that Dart's build tools can compile to faster, smaller JavaScript.

  p.
    To use the Angular transformer,
    first add the highlighted lines to your <code>pubspec.yaml</code>:

  code-example(language="yaml").
    name: hello_world
    version: 0.0.1
    dependencies:
      angular2: 2.0.0-alpha.25
      browser: any
    <span class="pnk">transformers:
    - angular2:
        entry_points: web/main.dart</span>
  p.
    Then build the JavaScript version using <code>pub build</code>:

  code-example(language="basic").
    &gt; <span class="blk">pub build</span>
    Loading source assets...
    Loading angular2 transformers...
    INFO: Formatter is being overwritten.
    Building hello_world... (3.1s)
    [Info from Dart2JS]:
    Compiling hello_world|web/main.dart...
    [Info from Dart2JS]:
    Took 0:00:16.123086 to compile hello_world|web/main.dart.
    Built 41 files to "build".

  p.
    The compiled JavaScript appears, along with supporting files,
    under the <code>build</code> directory.

  p.
    For more information, see the
    <a href="https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer">Angular
    transformer wiki page</a>.

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

  p.
    Follow the <a href="guide">developer guide</a>
    to continue playing with Angular 2 for Dart.

  p.
    Or read more about Angular or Dart:

  ul
    li
      <a href="resources.html">Angular resources</a>
    li
      <a href="https://www.dartlang.org">dartlang.org</a>