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

p.
  <strong>Angular is still unpackaged and in alpha</strong>. This quickstart does not
  reflect the final build process for Angular. The following setup is for those who
  want to try out Angular while it is in alpha.

// STEP 1 - Create a project ##########################
.l-main-section
  h2#section-create-project 1. Create a project

  p.
    The goal of this quickstart is to create a component that renders "Hello Alice" to the page.
    To get started, create a new directory.

  pre.prettyprint
    code.
      mkdir angular2_quickstart
      cd angular2_quickstart

// STEP 2 - Add the es6-shim ##########################
.l-main-section
  h2#section-add-es6-shim 2. Add the es6-shim

  p. Within your project, clone the es6-shim repository:

  pre.prettyprint
    code git clone https://github.com/davideast/conscious.git es6-shim

  p.
    For the sake of this quickstart we recommend using the
    <a href="https://github.com/davideast/conscious"> <code>es6-shim</code> GitHub repository</a>.
    This repository will provides a faster start than building from <code>npm</code>. The <code>es6-shim</code> includes Angular and dependencies to compile ES6 in incompatible browsers.

  .l-sub-section
    h3 ES6, AtScript, and the es6-shim

    h4 AtScript
    p.
      Angular is built with <strong>AtScript</strong>. AtScript is an extension of ES6 (ECMAScript 6), the new specification
      of the JavaScript language. This quickstart will be written in AtScript, but it is not required in Angular.

    h4 ES6
    p.
      AtScript compiles to <strong>ES6</strong>. ES6 is not widely supported in all browsers today.
      The es6-shim repository allows you to use ES6 or AtScript in the browser.

    h4 es6-shim
    p.
      The <strong>es6-shim</strong> package includes Angular and dependencies needed to compile
      ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code.
      Think of the es6-shim repository as package rather than a project.



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

  p.
    Create two files for this quickstart, an <code>index.html</code> and a
    <code>app.es6</code>. Both of these files will be at the root of the project.
    The <code>.es6</code> extension signifies that the file uses ES6 syntax.

  pre.prettyprint.linenums
    code touch index.html
      | touch app.es6

  p Inside of <code>app.es6</code>, use the ES6 module syntax you can import the required modules from Angular.

  pre.prettyprint.linenums
    code import {Component, Template, bootstrap} from 'angular2/angular2';

  p The above import statement will import three modules from Angular. These modules load at runtime.


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

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

  p.
    Components structure and represent the UI. This quickstart demonstrates the process of creating a component.
    The component will have an HTML tag named app,
    <strong><code>&lt;my-app&gt;&lt;/my-app&gt;</code></strong>.

  p.
    A component consists of two parts; the <strong>annotation section</strong>
    and the <strong>component controller</strong>.

  pre.prettyprint.linenums
    code.
      // Annotation Section
      @Component({
        selector: 'my-app'
      })
      @Template({
        inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
      })
      // Component Controller
      class MyAppComponent {
        constructor() {
          this.name = 'Alice';
        }
      }

  .l-sub-section
    h3 Component Annotations

    p.
      A component annotation provides metadata about the component.
      An annotation can always identified by its at-sign (<code>@</code>).
    p.
      The <code>@Component</code> annotation defines the HTML tag for the component.
      The <code>selector</code> property is a CSS selector which specifies the HTML tag for the component.

    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: 'my-app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
        })
        @Template({
          inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component
        })

    p.
      The component created above has a HTML tag of <code>&lt;my-app&gt;&lt;/my-app&gt;</code>
      and a template of <code>&lt;h1&gt;Hello <code>{{</code> name }}&lt;/h1&gt;</code>.

  .l-sub-section
    h3 Component Controller

    p.
      The component controller is the backing of the component's template. A component
      controller uses ES6 <code>class</code> syntax.

    pre.prettyprint.linenums
      code.
        class MyAppComponent {
          constructor() {
            this.name = 'Alice';
          }
        }

    p.
      Templates read from their component controllers. Templates have access to any properties
      or functions placed on the component controller.

    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 will appear instead of <code>{{ name }}</code>.



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

  p The last step to load the component on the page. At the bottom of <code>app.es6</code> call the <code>bootstrap()</code> function.

  pre.prettyprint.linenums
    code bootstrap(MyAppComponent);


  p.
    Angular provides a <code>bootstrap</code> function that renders a
    component to the page. The <code>bootstrap</code> function takes a
    component as a parameter. Any child components inside of the parent
    component will render as well.


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

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

  p.
    Inside of the <code>index.html</code>, include the <code>es6-shim.js</code> file in the <code>head</code> tag.
    Now, declare the app component the <code>body</code>. The es6-shim must load before any application code.

  pre.prettyprint.linenums
    code.
      &lt;!-- index.html --&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
          &lt;script src="/es6-shim/dist/es6-shim.js"&gt;&lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;

          &lt;!-- The app component created in app.es6 --&gt;
          &lt;my-app&gt;&lt;/my-app&gt;

        &lt;/body&gt;
      &lt;/html&gt;

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

  h2#section-load-component-module 5. Load the component

  p.
    The last step is to load the module for the my-app component.
    The es6-shim file comes packaged with the System library. We'll
    use System to load the component we created above.

  .l-sub-section
    h3 System.js

    p.
      System is a third-party open sourced library. Most browsers today do not support ES6 module loading. System
      provides module loading functionality to these browsers.

  p.
    To load the needed modules, System needs to know where to
    load the files from. The paths property in System specifies
    the location of the files.

  p Tell System about three paths:
    ol
      li Angular: The Angular framework.
      li Runtime assertions: Optional assertions for runtime type checking.
      li The my-app component created above: The component to display on the page.

    pre.prettyprint.linenums
      code.
        &lt;my-app&gt;&lt;/my-app&gt;

        &lt;script&gt;
          // Rewrite the paths to load the files
          System.paths = {
            'angular2/*':'/es6-shim/angular2/*.js', // Angular
            'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions
            'app': 'app.es6' // The my-app component
          };

          // Kick off the application
          System.import('app');
        &lt;/script&gt;

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

  h2#section-load-component-module 5. Run a local server



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

  p Learn some template syntax for extra credit.