include _util-fns
  
:marked
  Good tools make application development quicker and easier to maintain than
  if you did everything by hand.
  
  好的工具能让开发更加简单快捷。
  
  The [**Angular-CLI**](https://cli.angular.io/) is a **_command line interface_** tool
  that can create a project, add files, and perform a variety of on-going development tasks such 
  as testing, bundling, and deployment.
  
  [**Angular-CLI**](https://cli.angular.io/)是一个**命令行界面**工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。
  
  Our goal in this CLI QuickStart chapter is to build and run a super-simple Angular 
  application in TypeScript, using Angular-CLI 
  while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
  benefit _every_ Angular project.
  
  在这一章CLI快速起步中，我们的目标是构建并运行一个超级简单的Angular应用。我们会使用Angular-CLI来让每个Angular应用从[风格指南](./guide/style-guide.html)中获益。
  
  By the end of the chapter, you'll have a basic understanding of development with the CLI
  and a foundation for both these documentation samples and our real world applications.
  
  在本章的末尾，我们会通过CLI对开发过程有一个最基本的理解，并将其作为其它文档范例以及真实应用的基础。

  You'll pursue these ends in the following high-level steps:
  
  我们通过下列三大步来达到目的：
  
  1. [Set up](#devenv) the development environment
  
      [设置](#devenv)开发环境
  
  2. [Create](#create-proj) a new project and skeleton application
  
      [创建](#create-proj)新项目以及应用的骨架
  
  3. [Serve](#serve) the application
  
      启动[开发服务器](#serve)
  
  4. [Edit](#first-component) the application
  
      [编辑](#first-component)该应用


.l-main-section
h2#devenv 
    p Step 1. Set up the Development Environment
    p 步骤1. 设置开发环境

:marked
  You need to set up our development environment before you can do anything.
  
  在开始工作之前，我们必须设置好开发环境。
   
  Install **[Node.js® and npm](https://nodejs.org/en/download/)**
  if they are not already on your machine.
  
  如果你的机器上还没有**[Node.js®和npm](https://nodejs.org/en/download/)**，请先安装它们。
  
.l-sub-section
  :marked
    **Verify that you are running at least node `4.x.x` and npm `3.x.x`**
    by running `node -v` and `npm -v` in a terminal/console window.
    Older versions produce errors, but newer versions are fine.
    
    请先在终端/控制台窗口中运行命令 `node -v` 和 `npm -v`，
    **来验证一下你正在运行 node `4.x.x` 和 npm `3.x.x` 以上的版本。**
    更老的版本可能会出现错误，更新的版本则没问题。
    
:marked
  Then **install the [Angular-CLI](https://github.com/angular/angular-cli)** globally.
  
  然后全局安装 **[Angular-CLI](https://github.com/angular/angular-cli)** 。
  
code-example(language="sh" class="code-shell").
  npm install -g @angular/cli
  
.l-main-section
h2#create-proj 
  p Step 2. Create a new project
  p 步骤2. 创建新项目

:marked
  Open a terminal window.
  
  打开终端窗口。

:marked
  Generate a new project and skeleton application by running the following commands:
  
  运行下列命令来生成一个新项目以及应用的骨架代码：

code-example(language="sh" class="code-shell").
  ng new my-app

.l-sub-section
  :marked
    Patience please. 
    It takes time to set up a new project, most of it spent installing npm packages.
    
    请耐心等待。
    创建新项目需要花费很多时间，大多数时候都是在安装那些npm包。

.l-main-section
h2#serve 
  p Step 3: Serve the application
  p 步骤3. 启动开发服务器

:marked
  Go to the project directory and launch the server.
  
  进入项目目录，并启动服务器。

code-example(language="sh" class="code-shell").
  cd my-app
  ng serve
  
:marked
  The `ng serve` command launches the server, watches our files, 
  and rebuilds the app as you make changes to the files.
  
  `ng serve`命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。
  
  Open a browser on `http://localhost:4200/`; the app greets us with a message:
  
  在浏览器中打开`http://localhost:4200/`，该应用会给我们显示一条信息：
  
figure.image-display
  img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="Our app works!")

.l-main-section
h2#first-component 
  p Step 4: Edit our first Angular component
  p 步骤4. 编辑我们的第一个Angular组件

:marked
  The CLI created our first Angular component for us. 
  This is the _root component_ and it is named `app-root`.
  You can find it in `./src/app/app.component.ts`.
  
  这个CLI为我们创建了第一个Angular组件。
  它就是名叫`app-root`的*根组件*。
  你可以在`./src/app/app.component.ts`目录下找到它。

:marked
  Open the component file and change the `title` property from _app works!_ to _My First Angular App_:
  
  打开这个组件文件，并且把`title`属性从 _app works!_ 改为 _My First Angular App_ ：
  
+makeExample('cli-quickstart/ts/src/app/app.component.ts', 'title', 'src/app/app.component.ts')(format=".")

:marked
  The browser reloads automatically and we see the revised title. That's nice, but we can make it look better.
  
  浏览器会自动刷新，而我们会看到修改之后的标题。不错，不过我们还要把它再打扮得好看点。
  
  Open `src/app/cli-quickstart.component.css` and give our component some style 
  
  打开 `src/app/cli-quickstart.component.css` 并给这个组件设置一些样式

+makeExample('cli-quickstart/ts/src/app/app.component.css', null, 'src/app/app.component.css')(format=".")

figure.image-display
  img(src='/resources/images/devguide/cli-quickstart/my-first-app.png' alt="Output of QuickStart app")  
  
:marked
  Looking good!
  
  漂亮！

.l-main-section
:marked
  ## What's next?
  
  ## 接下来呢？
  
  That's about all you'd expect to do in a "Hello, World" app.
  
  如你所愿，我们完成了这个“Hello, World”应用。

  You're ready to take the [Tour of Heroes Tutorial](./tutorial) and build
  a small application that demonstrates the great things you can build with Angular.
  
  现在，你可以开始[英雄指南](./tutorial)教程，通过构建一个小型应用来学习如何用Angular构建各种大型应用了。

  Or you can stick around a bit longer to learn about the files in your brand new project.
  
  或者，你也可以稍等一会儿，学学在这个新项目中的文件都是干什么用的。

.l-main-section
:marked
  ## Project file review
  
  ## 项目文件概览

  An Angular-CLI project is the foundation for both quick experiments and enterprise solutions.
  
  Angular-CLI项目是做快速试验和开发企业解决方案的基础。

  The first file you should check out is `README.md`.
  It has some basic information on how to use CLI commands.
  Whenever you want to know more about how Angular-CLI works make sure to visit 
  [the Angular-CLI repository](https://github.com/angular/angular-cli) and 
  [Wiki](https://github.com/angular/angular-cli/wiki).
  
  你首先要看的文件是`README.md`。
  它提供了一些如何使用CLI命令的基础信息。
  如果你想了解 Angular-CLI 的工作原理，请访问 [Angular-CLI 的仓库](https://github.com/angular/angular-cli)及其 
    [Wiki](https://github.com/angular/angular-cli/wiki)。

  Some of the generated files might be unfamiliar to you. 
  
  有些生成的文件你可能觉得陌生。接下来我们就讲讲它们。

block src-files
  :marked
    ### The `src` folder
    
    ### `src`文件夹
    
    Your app lives in the `src` folder.
    All Angular components, templates, styles, images and anything else your app needs go here.
    Any files outside of this folder are meant to support building your app.
    
    你的应用代码位于`src`文件夹中。
    所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。
    这个文件夹之外的文件都是为构建应用提供支持用的。

.filetree
  .file src
  .children
    .file app
    .children
      .file app.component.css
      .file app.component.html
      .file app.component.spec.ts
      .file app.component.ts
      .file app.module.ts
    .file assets
    .children
      .file .gitkeep
    .file environments
    .children
      .file environment.prod.ts
      .file environment.ts
    .file favicon.ico
    .file index.html
    .file main.ts
    .file polyfills.ts
    .file styles.css
    .file test.ts
    .file tsconfig.json

style td, th {vertical-align: top}
table(width="100%")
  col(width="20%")
  col(width="80%")
  tr
    th 
      p File
      p 文件
    th 
      p Purpose
      p 用途
  tr
    td <code>app/app.component.{ts,html,css,spec.ts}</code>
    td
      :marked
        Defines the `AppComponent` along with an HTML template, CSS stylesheet and a unit test.
        It is the **root** component of what will become a tree of nested components
        as the application evolves. 
        
        使用HTML模板、CSS样式和单元测试定义`AppComponent`组件。
        它是**根**组件，随着应用的成长它会成为一棵组件树的根节点。
        
  tr
    td <code>app/app.module.ts</code>
    td
      :marked
        Defines `AppModule`, the [root module](guide/appmodule.html "AppModule: the root module") 
        that tells Angular how to assemble the application.
        Right now it declares only the `AppComponent`. 
        Soon there will be more components to declare. 
        
        定义`AppModule`，这个[根模块](guide/appmodule.html "AppModule: 根模块")会告诉Angular如何组装该应用。
        目前，它只声明了`AppComponent`。
        稍后它还会声明更多组件。
        
  tr
    td <code>assets/*</code>
    td
      :marked
        A folder where you can put images and anything else you need to be copied wholesale 
        when you build your application.
        
        这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。
  tr
    td <code>environments/*</code>
    td
      :marked
        This folder contains one file for each of your destination environments,
        each exporting simple configuration variables to use on your application.
        The files will be replaced on-the-fly when you build your app.
        You might use a different API endpoint for development than you do for production.
        Or maybe different analytics tokens.
        Maybe even some mock services.
        Either way, the CLI has you covered.
        
        这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。
        这些文件会在构建应用时被替换。
        比如你可能在产品环境中使用不同的API端点地址，或使用不同的统计Token参数。
        甚至使用一些模拟服务。
        所有这些，CLI都替你考虑到了。
        
  tr
    td <code>favicon.ico</code>
    td
      :marked
        Every site wants to look good on the bookmark bar.
        Get started with your very own Angular icon.
        
        每个网站都希望自己在书签栏中能好看一点。
        请把它换成你自己的图标。
  tr
    td <code>index.html</code>
    td
      :marked
        The main html page that is served when someone visits your site.
        Most of the time you'll never need to edit it.
        The CLI will automatically add all `js` and `css` files when building your app so you 
        never need to add any `<script>` or `<link>` tags here manually.
        
        这是别人访问你的网站是看到的主页面的HTML文件。
        大多数情况下你都不用编辑它。
        在构建应用时，CLI会自动把所有`js`和`css`文件添加进去，所以你不必在这里手动添加任何 `<script>` 或 `<link>` 标签。
  tr
    td <code>main.ts</code>
    td
      :marked
        The main entry point for your app.
        Compiles the application with the [JIT compiler](glossary.html#jit)
        and [bootstraps](guide/appmodule.html#main "bootstrap the application") 
        the application to run in the browser.
        You can also use the [AOT compiler](glossary.html#ahead-of-time-aot-compilation)
        without changing any code by passing on `--aot` to `ng build` or `ng serve`.
        
        这是应用的主要入口点。
        使用[JIT compiler](glossary.html#jit)编译器编译本应用，并[启动](guide/appmodule.html#main "启动应用")，使其运行在浏览器中。
        你还可以使用[AOT compiler](glossary.html#ahead-of-time-aot-compilation)编译器，而不用修改任何代码 —— 只要给`ng build` 或 `ng serve` 传入 `--aot` 参数就可以了。
        
  tr
    td <code>polyfills.ts</code>
    td
      :marked
        Different browsers have different levels of support of the web standards.
        Polyfills help normalize those differences.
        You should be pretty safe with `core-js` and `zone.js`, but be sure to check out
        the [Browser Support guide](guide/browser-support.html) for more information.
        
        不同的浏览器对Web标准的支持程度也不同。
        填充库（polyfill）能帮我们把这些不同点进行标准化。
        你只要使用`core-js` 和 `zone.js`通常就够了，不过你也可以查看[浏览器支持指南](guide/browser-support.html)以了解更多信息。
        
  tr
    td <code>styles.css</code>
    td
      :marked
        Your global styles go here. 
        Most of the time you'll want to have local styles in your components for easier maintenance,
        but styles that affect all of your app need to be in a central place.
        
        这里是你的全局样式。
        大多数情况下，你会希望在组件中使用局部样式，以利于维护，不过那些会影响你整个应用的样式你还是需要集中存放在这里。
        
  tr
    td <code>test.ts</code>
    td
      :marked
        This is the main entry point for your unit tests.
        It has some custom configuration that might be unfamiliar, but it's not something you'll
        need to edit.
        
        这是单元测试的主要入口点。
        它有一些你不熟悉的自定义配置，不过你并不需要编辑这里的任何东西。
        
  tr
    td <code>tsconfig.json</code>
    td
      :marked
        Configuration for the TypeScript compiler.
        
        TypeScript编译器的配置文件。


block root-files
  :marked
    ### The root folder
    
    ### 根目录
    
    The `src/` folder is just one of the items inside the project's root folder. 
    Other files help you build, test, maintain, document, and deploy the app. 
    These files go in the root folder next to `src/`.
    
    `src/`文件夹是项目的根文件夹之一。
    其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下，和`src/`平级。
    

.filetree
  .file my-app
  .children
    .file e2e
    .children
      .file app.e2e-spec.ts
      .file app.po.ts
      .file tsconfig.json
    .file node_modules/...
    .file src/...
    .file .editorconfig
    .file .gitignore
    .file angular-cli.json
    .file karma.conf.js
    .file package.json
    .file protractor.conf.js
    .file README.md
    .file tslint.json        

style td, th {vertical-align: top}
table(width="100%")
  col(width="20%")
  col(width="80%")
  tr
    th 
      p File
      p 文件
    th 
      p Purpose
      p 用途
  tr
    td <code>e2e/*</code>
    td
      :marked
        Inside `e2e/` live the End-to-End tests. 
        They shouldn't be inside `src/` because e2e tests are really a separate app that
        just so happens to test your main app. 
        That's why it they even have their own `tsconfig.json`.
        
        在`e2e/`下是端到端（End-to-End）测试。
        它们不在`src/`下，是因为端到端测试实际上和应用是相互独立的，它只适用于测试你的应用而已。
        这也就是为什么它会拥有自己的`tsconfig.json`。
        
  tr
    td <code>node_modules/...</code>
    td
      :marked
        `Node.js` creates this folder and puts all third party modules listed in 
        `package.json` inside of it.
        
        `Node.js`创建了这个文件夹，并且把`package.json`中列举的所有第三方模块都放在其中。
  tr
    td <code>.editorconfig</code>
    td
      :marked
        Simple configuration for your editor to make sure everyone that uses your project
        has the same basic configuration.
        Most editors support an `.editorconfig` file.
        See http://editorconfig.org for more information.
        
        给你的编辑器看的一个简单配置文件，它用来确保参与你项目的每个人都具有基本的编辑器配置。
        大多数的编辑器都支持`.editorconfig`文件，详情参见 http://editorconfig.org 。
        
  tr
    td <code>.gitignore</code>
    td
      :marked
        Git configuration to make sure autogenerated files are not commited to source control.
        
        一个Git的配置文件，用来确保某些自动生成的文件不会被提交到源码控制系统中。
  tr
    td <code>angular-cli.json</code>
    td
      :marked
        Configuration for Angular-CLI.
        In this file you can set several defaults and also configure what files are included
        when your project is build.
        Check out the official documentation if you want to know more.
        
        Angular-CLI的配置。
        在这个文件中，你可以设置一系列默认值，还能配置当构件项目时应该排除哪些文件。
        要了解更多，请参阅Angular-CLI的官方文档。
        
  tr
    td <code>karma.conf.js</code>
    td
      :marked
        Unit test configuration for the [Karma test runner](https://karma-runner.github.io),
        used when running `ng test`.
        
        给[Karma](https://karma-runner.github.io)的单元测试配置，当运行`ng test`时会用到它。
        
  tr
    td <code>package.json</code>
    td
      :marked
        `npm` configuration listing the third party packages your project uses.
        You can also add your own [custom scripts](https://docs.npmjs.com/misc/scripts) here.
        
        `npm`配置文件，其中列出了项目使用到的第三方依赖包。
        你还可以在这里添加自己的[自定义脚本](https://docs.npmjs.com/misc/scripts)。
        
  tr
    td <code>protractor.conf.js</code>
    td
      :marked
        End-to-end test configuration for [Protractor](http://www.protractortest.org/),
        used when running `ng e2e`.
        
        给[Protractor](http://www.protractortest.org/)使用的端到端测试配置文件，当运行`ng e2e`的时候会用到它。
  tr
    td <code>README.md</code>
    td
      :marked
        Basic documentation for your project, pre-filled with CLI command information.
        Make sure to enhance it with project documentation so that anyone
        checking out the repo can build your app!
        
        项目的基础文档，预先写入了CLI命令的信息。
        别忘了用项目文档改进它，以便每个查看此仓库的人都能据此构建出你的应用。
        
  tr
    td <code>tslint.json</code>
    td
      :marked
        Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with
        [Codelyzer](http://codelyzer.com/), used when running `ng lint`.
        Linting helps keep your code style consistent.
        
        给[TSLint](https://palantir.github.io/tslint/)和[Codelyzer](http://codelyzer.com/)用的配置信息，当运行`ng lint`时会用到。
        Lint功能可以帮你保持代码风格的统一。
        
.l-sub-section
  :marked
    ### Next Step
    
    ### 下一步

    If you're new to Angular, we recommend staying on the 
    [learning path](guide/learning-angular.html "Angular learning path").        
    You can skip the "Setup" chapter since you're already using the Angular-CLI setup.

    如果你刚刚开始使用Angular，我们建议你遵循这个[学习路径](guide/learning-angular.html "Angular 学习路径")。
    你可以跳过“环境设置”一章，因为你已经在使用 Angular-CLI 设置好环境了。