angular-docs-cn/public/docs/js/_quickstart.jade

//- if lang == 'js'
//-   h2 I like JavaScript
//- else if lang == 'dart'
//-   h2 I like Dart

// 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.
        
      p
        | Angular is available on npm. But, the es6-shim repository comes with the Angular npm package. This package includes the dependencies needed to write ES6 in the browser. Think of the es6-shim repository as package rather than a new project. 
      p 
        | For the sake of this quickstart we recommend using the <code>es6-shim</code> GitHub repository for a faster start. Angular can be installed through <code>npm</code>. The <code>es6-shim</code> repository comes with the Angular <code>npm</code> package and includes all of the dependencies needed to write ES6 that compiles in the browser. Think of the <code>es6-shim</code> repository as package rather than a new project. Clone the repository inside of aleady existing project.
        pre
          code git clone https://github.com/davideast/concious.git es6-shim 
      
// STEP 2 - Import Angular ##########################       
.content-block.content-number.clearfix
  i.number.icon-number2.large
  
  .c11
    header
    
      h3#section-transpile Import Angular
      p
        | Create a new 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
        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 represent the UI. This quickstart demonstrates the process of creating a component. This component will have the tag of app.
        
      pre
        code &lt;app&gt;&lt;/app&gt;
      
      p A component consists of two parts; the annotation section and the component controller.
      
      pre
        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
        .c6
          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
            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
        .c6
          p
            | The component controller is the backing of the component's template. A component controller uses ES6 <code>class</code> syntax.
          pre
            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
        .c6
          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 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 
          | &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
        .c6
          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 
              | &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.