angular-cn/public/docs/_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
      | To include Angular in your project you'll need to install the framework and its dependencies from <code>npm</code>. 
      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 <code>es6-shim</code> GitHub repository for a faster start. The <code>es6-shim</code> repository includes all of the dependencies needed to write ES6 that compiles in the browser. Think of this 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>. The <code>.es6</code> extension signifies that the file uses ES6 syntax. 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 basic pieces needed to create an Angular app. The import statement loads the modules dynamically 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
      | Angular allows you to create custom HTML elements through components. Components are used to structure and represent the UI. This quickstart demonstrates the process of creating a <code>Component</code> with the HTML tag of <code>app</code>.
      
    pre
      code &lt;hello&gt;&lt;/hello&gt;
    
    p A <code>Component</code> is made up of two parts; the annotation section and the component controller.
    
    pre
      code
        | import {Component, Template, bootstrap} from 'angular2/angular2';
        | @Component({ 
        |   selector: 'app'
        | })
        | @Template({
        |   inline: `
        |     &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
        |   `
        | })
        | class AppComponent {
        |   constructor() {
        |     this.name = "Alice";
        |   }
        | }
        | bootstrap(App);
      
    section.docs-sub-section
      h4 Component Annotations
      .c6
        p
          | The annotation section is where you can describe meta-data about your
          code component 
          | You can always identify an annotation by its 
          code @ 
          | sign. The <code>Component</code> annotation tells Angular what the HTML tag will be for your component. The tag is specified by using the <code>selector</code> property. The <code>selector</code> property is just a CSS selector.
        p 
          | The <code>Template</code> annotations tells Angular what template to apply to your 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 template.
        pre
          code
            | @Component({ 
            |   selector: 'app'
            | })
            | @Template({
            |   inline: `
            |     &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
            |   `
            | })
        p
          | The <code>Component</code> created above will have 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 defined using the ES6 <code>class</code> syntax. This <code>class</code> is the backing of the component's template.
        pre
          code
            | class AppComponent {
            |   constructor() {
            |     this.name = "Alice";
            |   }
            | }
        p
          | Templates read directly from their component controllers. Any properties or functions placed on the component controller can be directly accessed from the template.
        p
          | In the template above binds to a <code>name</code> property through the <code>{{ }}</code> syntax. In the component's constructor the name property is being set to Alice. When the template is rendered, 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 get the component to load on the page. 
      
    section.docs-sub-section
      h4 The <code>bootstrap</code> function
      .c6
        p
          | Angular provides a <code>bootstrap</code> function that renders your component to the page. The <code>bootstrap</code> function takes a component as a parameter. Any child components inside of the parent component will be rendered as well.
          
        code
          pre bootstrap(App);
      .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 a <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. Once the shim is included the <code>app</code> component can be declared in the HTML.
          
    code
      pre 
        | &lt;html&gt;
        |   &lt;head&gt;
        |     &lt;title&gt;Angular 2 Quickstart&lt;/title&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 <code>app</code> component. The <code>es6-shim</code> file comes packaged with the <code>System</code> library, which is the current polyfill for ES6 module loading. <code>System</code> will allow you to load modules in browsers that do not support ES6 module loading.
          
        p 
          |
          
        code
          pre 
            | &lt;html&gt;
            |   &lt;head&gt;
            |     &lt;title&gt;Angular 2 Quickstart&lt;/title&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'
            |       };
            |       <!-- -->
            |       System.import('app');
            |     &lt;/script&gt;
            |   &lt;/body&gt;
            | &lt;/html&gt;
      .clear            

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