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

.callout.is-helpful
  header Angular is in developer preview
  p.
    This quickstart does not
    reflect the final development process for Angular. The following setup is for those who
    want to try out Angular while it is in developer preview.

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

  p.
    This quickstart shows how to write your Angular components in TypeScript. You could instead choose
    another language such as <a href="/docs/dart/latest/quickstart.html">Dart</a>, ES5, or ES6.

  p.
    The goal of this quickstart is to write a component in TypeScript that prints a string.
    To get started, clone the TypeScript quickstart repository:

  pre.prettyprint
    $ git clone https://github.com/angular/ts-quickstart.git
    $ cd ts-quickstart

  p.
    For the sake of this quickstart we recommend using the
    <a href="https://github.com/angular/ts-quickstart"> <code>quickstart</code> GitHub repository</a>.
    This repository provides a faster start than building from <code>npm</code>.
    This repository includes the Angular distribution and type definitions for TypeScript.

// STEP 2 - Start the TypeScript compiler ##########################
.l-main-section
  h2#start-tsc 2. Run the TypeScript compiler

  p.
    Since the browser doesn't understand TypeScript code, we need to run a compiler to translate
    your code to browser-compliant JavaScript as you work. This quickstart uses the TypeScript
    compiler in <code>--watch</code> mode, but it is also possible to do the translation in the browser as files
    are loaded, or configure your editor or IDE to do it.
  p.
    The repository includes a file <code>tsconfig.json</code>.
    Many tools &mdash; including the TypeScript compiler &mdash;
    know to read this file so we don't need to configure them or add command-line options.

  pre.prettyprint
    $ npm install -g typescript@^1.5.0-beta
    $ tsc --watch

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

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

  pre.prettyprint
    $ touch index.html
    $ touch app.ts

  p Inside of <code>app.ts</code>, import the type definitions from Angular:
  pre.prettyprint
    code /&#47;/ &lt;reference path="typings/angular2/angular2.d.ts" /&gt;

  p Now your editor should be able to complete the available imports:
  pre.prettyprint
    code import {Component, View, bootstrap} from 'angular2/angular2';

  p.
    The above import statement uses ES6 module syntax to import three symbols from the Angular module.
    The module will 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>component controller</strong>
    which is an ES6 class, and the <strong>decorators</strong> which tell Angular
    how to place the component into the page.

  pre.prettyprint.linenums
    code.
      // Annotation section
      @Component({
        selector: 'my-app'
      })
      @View({
        template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
      })
      // Component controller
      class MyAppComponent {
        name: string;

        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. This component
      controller uses TypeScript <code>class</code> syntax.

    pre.prettyprint.linenums
      code.
        class MyAppComponent {
          name: string;
          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.ts</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 traceur-runtime and the Angular bundle.
    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="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
          &lt;script src="bundle/angular2.dev.js"&gt;&lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;

          &lt;!-- The app component created in app.ts --&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.

  .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 System.js dependency in the <code>&lt;head&gt;</code> tag, so that
    it looks like:

  pre.prettyprint.linenums
    code.
        &lt;head&gt;
          &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
          &lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"&gt;&lt;/script&gt;
          &lt;script src="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt;
          &lt;script src="bundle/angular2.dev.js"&gt;&lt;/script&gt;
        &lt;/head&gt;

  p.
    Add the following module-loading code before the <code>&lt;my-app&gt;</code> tag:

  pre.prettyprint.linenums
    code.
      &lt;my-app&gt;&lt;/my-app&gt;
      &lt;script&gt;System.import('app');&lt;/script&gt;


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