anchor.diff:    1. A static server called **lite-server** that loads `index.html` in a browser
     and refreshes the browser when application files change
   
  +  此命令会运行两个并行的node进程：
  +  1. TypeScript编译器，运行在监视（watch）模式
  +  1. 一个名叫 **lite-server** 的静态服务器，它把`index.html`加载到浏览器中
  +  这样，当应用的文件发生变化时，它会自动刷新浏览器。
  +
     In a few moments, a browser tab should open and display
  +  
  +  稍后，一个浏览器页标签就会打开并且显示出来。
   
   figure.image-display
  -  img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of quickstart app")
  +  img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="QuickStart应用的输出")
   
   :marked
     Congratulations!  We are in business.
  +  
  +  恭喜！我们的生意来了！
   
     ### Make some changes
  +  ### 做点改变
     
     Try changing the message to "My SECOND Angular 2 app".
  +  
  +  试着把消息改成“我的第二个Angular2应用”。
     
     The TypeScript compiler and `lite-server` are watching.
     They should detect the change, recompile the TypeScript into JavaScript,
     refresh the browser, and display the revised message.
   
  +  TypeScript编译器和`lite-server`都在监听。
  +  它们会检测到文件的变化，重新把这个TypeScript文件编译成JavaScript文件，刷新浏览器，并且显示修改过的消息。
  +
     It's a nifty way to develop an application!
     
  +  这就是我们开发应用程序的方式，多漂亮！
  +  
     We close the terminal window when we're done to terminate both the compiler and the server.
  +  
  +  当终止了编译器和服务器之后，我们可以关闭terminal窗口。
   
   .l-main-section
   :marked
     ## Final structure
  +  ## 最终结构
     Our final project folder structure looks like this:
  +  
  +  最终的项目目录结构会是这样的：
  +
   .filetree
     .file angular2-quickstart
     .children
  
positive.code:     .file typings.json
  :marked
    And here are the files:
  +makeTabs(`
      quickstart/ts/app/app.component.ts,
      quickstart/ts/app/main.ts,
  
negative.code:     <a href="https://webpack.github.io/" target="_blank">webpack</a>.
      SystemJS happens to be a good choice but we want to be clear that it was a choice and not a preference.
      
      这个QuickStart使用<a href="https://github.com/systemjs/systemjs" target="_blank">SystemJS</a>来加载应用和库模块。
      还有一些其它候选者也能很好地工作，比如备受推崇的<a href="https://webpack.github.io/" target="_blank">webpack</a>。
      SystemJS是一个好的选择，但要清楚，它是我们给你的是一个“选择”，而不是“推荐”。
      
      All module loaders require configuration and all loader configuration 
      becomes complicated rather quickly as soon as the file structure diversifies and
      we start thinking about building for production and performance.
      
      所有loader（模块加载器）都需要配置，并且文件结构很快就会变得多样，loader的配置也会变得复杂，那时候我们就要开始考虑产品构建和性能问题了。
      
      We suggest becoming well-versed in the loader of your choice.
      Learn more about SystemJS configuration
      <a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">here</a>.
      
      我们建议你要精通你所选的loader。
      学习如何配置SystemJS的更多知识，参考<a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">这里</a>。
  
      With those cautions in mind, what are we doing in this QuickStart configuration?
      
      好好记住这些，我们再来看看QuickStart中的配置做了点什么。
  
    +makeExample('quickstart/ts/index.html', 'systemjs', 'index.html (系统配置)')(format=".")
    :marked
      The `packages` node tells SystemJS what to do when it sees a request for a 
      module from the `app/` folder. 
      
      `package`节点告诉SystemJS，当看到请求`app/`目录的模块时要做什么。
      
      Our QuickStart makes such requests when one of its
      application TypeScript files has an import statement like this:
      
      在我们的QuickStart中，当应用中的TypeScript文件出现像这样的import语句时，SystemJS就会处理这些请求：
  
    +makeExample('quickstart/ts/app/main.ts', 'app-component', 'main.ts (摘录)')(format=".")
    :marked
      Notice that the module name (after `from`) does not mention a filename extension. 
      The `packages:` configuration tells SystemJS to default the extension to 'js', a JavaScript file.
      
      注意，模块名（`from`后面）并不包含文件的扩展名。
      `package:`配置项告诉SystemJS使用'js'扩展名，也就是加载一个JavaScript文件。
      
      That makes sense because we transpile TypeScript to JavaScript
      <i>before</i> running the application</a>.
      
      这是因为我们在运行应用程序<i>之前</i>会执行从TypeScript到JavaScript的转译（transpile）。
  
    .l-sub-section
      :marked
        #### Transpiling in the browser
        #### 在浏览器中转译
        In the live example on plunker we transpile (AKA compile) to JavaScript in the browser
        on the fly. That's fine for a demo. That's not our preference for development or production.
        
        在plunker上的活范例（live example）中，我们在浏览器中随时转译（也可以叫编译）到JavaScript。对于范例来说，这足够了。
        但这并不是用在开发环境或产品环境中的推荐方式。
        
        We recommend transpiling (AKA compiling) to JavaScript during a build phase 
        before running the application for several reasons including:
        
        我们建议在运行应用之前的build阶段转译（编译）到JavaScript，理由包括：
        
        * We see compiler warnings and errors that are hidden from us in the browser.
        
        * 我们可以看到编译器的警告和错误，但浏览器中看不到。
        
        * Pre-compilation simpifies the module loading process and 
        it's much easier to diagnose problems when this is a separate, external step.
        
        * 预编译简化了模块加载过程，而且当它成为分离、外部的步骤时，更容易诊断问题。
          
        * Pre-compilation means a faster user experience because the browser doesn't waste time compiling.
        
        * 预编译意味着更快的用户体验，因为浏览器不用浪费时间去编译了。
        
        * We iterate development faster because we only re-compile changed files.
        We notice the difference as soon as the app grows beyond a handful of files.
        
        * 我们的迭代开发会更快，因为我们只需要重新编译那些有变化的文件。当应用程序快速膨胀成一大堆文件时，你会体会到这些差异。
        
        * Pre-compilation fits into a continuous integration process of build, test, deploy.
        
        * 预编译更适应CI（持续集成）过程：编译、测试、部署。
  
    :marked
      The `System.import` call tells SystemJS to import the `main` file 
      (`main.js` ... after transpiling `main.ts`, remember?).
      `main` is where we tell Angular to launch the application.
      We also catch and log launch errors to the console. 
      
      `System.import`调用告诉SystemJS引入`main`文件。（`main.js`，从`main.ts`转译而来的，还记得吧？）
      `main`是我们让Angular启动应用的地方。
      我们还会把启动过程中的错误捕获并记录到控制台中。
      
      All other modules are loaded upon request
      either by an import statement or by Angular itself.
      
      在接下来的请求中，所有其它模块都会被加载，不管是被import语句还是Angular自身。
  
    a(id="my-app")
    :marked
      ### *&lt;my-app&gt;*
  