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
    
      // Angular is a component based framework.
      // Components are custom HTML elements. 
      // Components are used to structure and represent the UI.
    
      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

.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
      
    section.docs-sub-section
      h4 Declare the HTML
      .c6
        p
          | Create a <code>index.html</code> file.
          
        code
          pre &lt;app&gt;&lt;/app&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.