anchor.diff:  a(id="package-json")
   :marked
     Add a **package.json** file to the project folder and copy/paste the following:
  +
     添加一个 **package.json** 文件到项目文件夹，并且拷贝/粘贴下列内容：
   +makeJson('quickstart/ts/package.1.json', null, 'package.json')(format=".")
   
  
positive.code:     Components are the basic building blocks of Angular applications.
      A component controls a portion of the screen &mdash; a *view* &mdash; through its associated template.
  
      This QuickStart has only one, extremely simple component.
      But it has the essential structure of every component we'll ever write:
      
      * One or more <a href="javascript: why('component-import')">import</a>
      statements to reference the things we need.  
      
      * A <a href="javascript: why('decorator')">@Component decorator</a> 
      that tells Angular what template to use and how to create the component.
      
      * A <a href="javascript: why('class')">component class</a>
      that controls the appearance and behavior of a view through its template.
      
    a(id="component-import")
    :marked
      ### Import
  
      Angular apps are modular. They consist of many files each dedicated to a purpose.
            
      Angular itself is modular. It is a collection of library modules
      each made up of several, related features that we'll use to build our application.
      
      When we need something from a module, we import it. 
      Here we import the Angular `Component` decorator function from the
      main Angular library module because we need it to define our component.
    +makeExample('quickstart/ts/app/app.component.ts', 'import', 'app/app.component.ts (import)')(format=".")
  
    a(id="component-decorator")
    :marked
      ### @Component decorator
  
      `Component` is a **decorator** function that takes a *metadata* object.
      The metadata tell Angular how to create and use this component.
      
      We apply this function to the component class 
      by prefixing the function with the **@** symbol and invoking it with the metadata object
      just above the class:
    +makeExample('quickstart/ts/app/app.component.ts', 'metadata', 'app/app.component.ts (metadata)')(format=".")
    :marked
      This particular metadata object has two fields, a `selector` and a `template`.
  
      The **selector** specifies a simple CSS selector for an HTML element that represents the component.
      
      >The element for this component is named `my-app`.
      Angular creates and displays an instance of our `AppComponent`
      wherever it encounters a `my-app` element in the host HTML.
  
      The **template** specifies the component's companion template,
      written in an enhanced form of HTML that tells Angular how to render this component's view.
      
      >Our template is a single line of HTML announcing "*My First Angular App*".
      
      >A more advanced template could contain data bindings to component properties
      and might identify other application components which have their own templates.
      These templates might identify yet other components.
      In this way an Angular application becomes a tree of components.
  
    a(id="component-class")
    :marked
      ### Component class
      At the bottom of the file is an empty, do-nothing class named `AppComponent`.
    +makeExample('quickstart/ts/app/app.component.ts', 'export', 'app/app.component.ts (class)')(format=".")
    :marked
      When we're ready to build a substantive application, 
      we can expand this class with properties and application logic. 
      Our `AppComponent` class is empty because we don't need it to do anything in this QuickStart.
      
      We **export** `AppComponent` so that we can **import** it elsewhere in our application,
      as we'll see when we create `main.ts`.
        
  a(id="main")
  .l-main-section
  :marked
    ## Show it with *main.ts*
    Now we need something to tell Angular to load the root component
    
    Add a new file , `main.ts`, to the `app/` folder as follows:
  +makeExample('quickstart/ts/app/main.ts', null, 'app/main.ts')(format=".")
  
  .l-verbose-section
    :marked
      We import the two things we need to launch the application:
  
      1. Angular's browser `bootstrap` function
      1. The application root component, `AppComponent`.
      
      Then we call `bootstrap` with `AppComponent`.
   
      ### Bootstrapping is platform-specific
      Notice that we import the `bootstrap` function from `angular2/platform/browser`,
      not `angular2/core`.
      
      Bootstrapping isn't core because there isn't a single way to bootstrap the app.
      True, most applications that run in a browser call the bootstrap function from
      this library.
        
      But it is possible to load a component in a different environment. 
      We might load it on a mobile device with [Apache Cordova](https://cordova.apache.org/) or [NativeScript](https://www.nativescript.org/).
      We might wish to render the first page of our application on the server
      to improve launch performance or facilitate 
      [SEO](http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf).
  
      These targets require a different kind of bootstrap function that we'd import from a different library.
    
      ### Why create a separate ***main.ts*** file?
      
      The *main.ts* file is tiny. This is just a QuickStart.
      We could have folded its few lines into the `app.component` file
      and spared ourselves some complexity.
      
      We'd rather demonstrate the proper way to structure an Angular application.
      App bootstrapping is a separate concern from presenting a view. 
      Mixing concerns creates difficulties down the road.
  
negative.code: :marked
    Our QuickStart goal is to build and run a super-simple Angular 2 application in TypeScript.
  
    在“QuickStart”中，我们的目标是构建和运行一个超简单的Angular 2应用 —— 使用TypeScript语言
  
    # Download the code
    # 下载代码
  