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

.callout.is-helpful
  header Angular is still unpackaged and in alpha
  p.
    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. Clone the quickstart repository

  p Within your project, clone the quickstart repository:

  pre.prettyprint
    code git clone https://github.com/angular/quickstart.git

  p.
    For the sake of this quickstart we recommend using the
    <a href="https://github.com/angular/quickstart"> <code>quickstart</code> GitHub repository</a>.
    This repository provides a faster start than building from <code>npm</code>. This repository 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 features AtScript, but you can write Angular in ES5 or ES6 as well.

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

    h4 es6-shim
    p.
      The <strong>quickstart</strong> repository includes <code>es6-shim.js</code>.
      The es6-shim.js file includes dependencies (such as Traceur) needed to compile
      ES6 in the browser. Traceur is an ES6 compiler that transpiles ES6 to ES5 code.

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

  p.
    Create two files, <code>index.html</code> and
    <code>app.es6</code>, both at the root of the project:

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

  .alert.is-helpful.
    The <code>.es6</code> extension signifies that the file uses ES6 syntax. If your editor doesn't
    support syntax highlighting for .es6, use .js.

  p Inside of <code>app.es6</code>, import the required modules from Angular:

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

  p.
    The above import statement uses ES6 module syntax to import three modules from Angular.
    These modules load at runtime.


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

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

  p.
    Components structure and represent the UI. This quickstart demonstrates the process of creating a component
    that has an HTML tag named <strong><code>&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'
      })
      @View({
        template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
      })
      // Component controller
      class MyAppComponent {
        constructor() {
          this.name = 'Alice';
        }
      }

  .l-sub-section
    h3 @Component and @View annotations

    p.
      A component annotation describes details about the component. An annotation can be identified by its at-sign (<code>@</code>).
    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. The component you wrote 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.linenums
      code.
        @Component({
          selector: 'my-app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
        })
        @View({
          template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component
        })

    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.
      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 double-mustache syntax (<code ng-non-bindable>{{ ... }}</code>).
      The body of the constructor assigns "Alice" to the name property. When the
      template renders, "Hello Alice" appears instead of
      <span ng-non-bindable>"Hello {{ name }}"</span>.



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

  p.
    At the bottom of <code>app.es6</code>, call the <code>bootstrap()</code> function
    to load your new component into its page:

  pre.prettyprint.linenums
    code bootstrap(MyAppComponent);


  p.
    The <code>bootstrap()</code> function takes a
    component as a parameter, enabling the component
    (as well as any child components it contains) to render.


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

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

  p.
    Inside the <code>head</code> tag of <code>index.html</code>, include the <code>es6-shim.js</code> file.
    (The es6-shim code must load before any application code.)
    Then instantiate the <code>my-app</code> component in the <code>body</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="/quickstart/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 7 - Declare the HTML ##########################
.l-main-section

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

  p.
    The last step is to load the module for the <code>my-app</code> component.
    To do this, we'll use the System library, which is included in the quickstart repository.

  .l-sub-section
    h3 System.js

    p.
      <a href="https://github.com/systemjs/systemjs">System</a> is a third-party open-source library that
      adds ES6 module loading functionality to browsers.

  p.
    Add the following module-loading code to <code>index.html</code>:

  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/*':'/quickstart/angular2/*.js', // Angular
          'rtts_assert/*': '/quickstart/rtts_assert/*.js', // Runtime assertions
          'app': 'app.es6' // The my-app component
        };

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

  p.
    The <code>System.paths</code> property above specifies
    the paths to the following modules:
  ul
    li The Angular framework
    li Optional assertions for runtime type checking
    li The component to display on the page


// STEP 8 - Run a local server ##########################
.l-main-section

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

  p Run a local HTTP server, and view <code>index.html</code>.

  p.
    If you don't already have an HTTP server,
    you can install one using <code>npm install -g http-server</code>.
    (If that results in an access error, then you might need to use
    <code><b>sudo</b> npm ...</code>)
    For example:

  pre.prettyprint.code.
      # From the directory that contains index.html:
      npm install -g http-server  # Or sudo npm install -g http-server
      http-server                 # Creates a server at localhost:8080
      # In a browser, visit localhost:8080/index.html


// WHAT'S NEXT... ##########################
.l-main-section
  h2#section-transpile Great job! We'll have the next steps out soon.