// STEP 1 - Install Angular ##########################
.content-block.content-number.clearfix
  i.number.icon-number.large

  .c11
    header

      h3#section-install-angular Install Angular
      p
        b Angular is still unpackaged and in alpha. 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.
      p
        | For the sake of this quickstart we recommend using the
        a(href="https://github.com/davideast/conscious") <code>es6-shim</code> GitHub repository
        |. This repository will provide a faster start. <code>es6-shim</code> includes Angular and dependencies to compile ES6 in incompatible browsers.

      p
      | Clone the repository inside of aleady existing project.

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

      section.docs-sub-section
        h4 A word on ES6
        p
          | Angular builds on top of ES6, the new specification of the JavaScript language. Not all ES6 features are available in all browsers. The following es6-shim repository allows you to use ES6 in the browser today.

        p
          | Angular is available on npm. Configuring Angular to run ES6 in the browser requires a build process, detailed here.

        p
          | The es6-shim package includes Angular and dependencies needed to compile ES6 in the browser. Think of the es6-shim repository as package rather than a new project.


// STEP 2 - Import Angular ##########################
.content-block.content-number.clearfix
  i.number.icon-number2.large

  .c11
    header

      h3#section-transpile Import Angular
      p
        | Create a file named <code>app.es6</code> at the root of the project. The <code>.es6</code> extension signifies that the file uses ES6 syntax.

      p Using the ES6 module syntax you can import the required modules from Angular2.
      pre.prettyprint.linenums
        code
          | import {Component, Template, bootstrap} from 'angular2/angular2';
      p
        | The above import statement will import the three modules from Angular. These modules load at runtime.

// STEP 3 - Create a component ##########################
.content-block.content-number.clearfix
  i.number.icon-number3.large

  .c11
    header

      h3#section-angular-create-account Create a component
      p
        | Components are custom HTML elements. Angular uses components to empower HTML. Components structure and repre.prettyprint.linenumssent the UI. This quickstart demonstrates the process of creating a component. This component will have the tag of app.

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

      p A component consists of two parts; the annotation section and the component controller.

      pre.prettyprint.linenums
        code
          | import {Component, Template, bootstrap} from 'angular2/angular2';
          | <!-- -->
          | // Annotation Section
          | @Component({
          |   selector: 'app'
          | })
          | @Template({
          |   inline: `
          |     &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
          |   `
          | })
          | // Component Controller
          | class AppComponent {
          |   constructor() {
          |     this.name = "Alice";
          |   }
          | }

      section.docs-sub-section
        h4 Component Annotations

        p A component annotation provides meta-data about the <code>component</code>. 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 selector property specifies the tag. The <code>selector</code> property is a CSS selector.
        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: 'app'
            | })
            | @Template({
            |   inline: `
            |     &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
            |   `
            | })
        p
          | The component created above has a HTML tag of <code>&lt;app&gt;&lt;/app&gt;</code> and a template of <code>&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;</code>.
        .clear

      section.docs-sub-section
        h4 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 AppComponent {
            |   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>.
        .clear

// STEP 4 - Bootstrap ##########################
.content-block.content-number.clearfix
  i.number.icon-number4.large

  .c11
    header

      h3#section-transpile Bootstrap
      p
        | The last step to load the component on the page.

      section.docs-sub-section
        h4 The <code>bootstrap</code> function
        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.

        code
          pre.prettyprint.linenums bootstrap(AppComponent);
      .clear

// STEP 5 - Declare the HTML ##########################
.content-block.content-number.clearfix
  i.number.icon-number5.large
  .c11
    header

      h3#section-angular-create-account Declare the HTML
      p
        | Create an <code>index.html</code> file at the root of the project. 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.

      code
        pre.prettyprint.linenums
          | &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;app&gt;&lt;/app&gt;
          |     <!-- -->
          |   &lt;/body&gt;
          | &lt;/html&gt;

      section.docs-sub-section
        h4 Load the component module
        p
          | The last step is to load the module for the app component. The es6-shim file comes packaged with the System 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 app component created above - The component to display on the page.

        code
          pre.prettyprint.linenums
            | &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;app&gt;&lt;/app&gt;
            |     <!-- -->
            |     &lt;script&gt;
            |       // Rewrite the paths to load the files
            |       System.paths = {
            |         'angular2/*':'/es6-shim/angular2/*.js',
            |         'rtts_assert/*': '/es6-shim/rtts_assert/*.js',
            |         'app': 'app.es6'
            |       };
            |       <!-- -->
            |       // Kick off the application
            |       System.import('app');
            |     &lt;/script&gt;
            |   &lt;/body&gt;
            | &lt;/html&gt;
        .clear

        p
          | Run the root of your project on a local server.

.content-block.content-number.clearfix
  i.number.icon-number6.large

  .c11
    header

      h3#section-transpile Extra-credit
      p
        | Learn some template syntax for extra-credit.