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 
        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. However, 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 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;app&gt;&lt;/app&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';
          | <!-- -->
          | // 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 <code>@</code> sign. 
            
          p 
            | 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> annotation 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 html file.
          pre
            code
              | @Component({ 
              |   selector: 'app'
              | })
              | @Template({
              |   inline: `
              |     &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
              |   `
              | })
          p
            | The component 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 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. 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(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 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;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 <code>app</code> component. The <code>es6-shim</code> file comes packaged with the <code>System</code> library. <code>System</code> will allow you to load modules in browsers that do not support ES6 module loading.
              
          p 
            | To load the needed modules, <code>System</code> needs to know where to dynamically load the files. The <code>paths</code> property in <code>System</code> allows you to specify where the location of the files.
              
          p 
            | Using <code>System.paths</code> specify paths for Angular, runtime assertions, and the <code>app</code> component created above. 
            
          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.