diff --git a/public/docs/_includes/_side-nav.jade b/public/docs/_includes/_side-nav.jade
index 92add7cd98..d51ed315db 100644
--- a/public/docs/_includes/_side-nav.jade
+++ b/public/docs/_includes/_side-nav.jade
@@ -86,7 +86,7 @@ nav(class="sidenav l-pinned-left l-layer-4 l-offset-nav" data-swiftype-index="f
a(class="nav-title #{isQuickstartSelected(cur)}" href="#{qs.href}" title="#{qs.tooltip}") 快速起步
li.sidenav-section
- a(class="nav-title #{isCLIQuickstartSelected(cur)}" href="#{cliqs.href}" title="#{cliqs.tooltip}") CLI Quickstart
+ a(class="nav-title #{isCLIQuickstartSelected(cur)}" href="#{cliqs.href}" title="#{cliqs.tooltip}") CLI 快速起步
li.sidenav-section
diff --git a/public/docs/ts/latest/cli-quickstart.jade b/public/docs/ts/latest/cli-quickstart.jade
index dc649d957f..ee8a2cafe1 100644
--- a/public/docs/ts/latest/cli-quickstart.jade
+++ b/public/docs/ts/latest/cli-quickstart.jade
@@ -4,51 +4,93 @@ include _util-fns
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 Step 1. Set up the Development Environment
+h2#devenv 步骤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-project Step 2. Create a new project
+
+h2#create-project 步骤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
@@ -57,11 +99,19 @@ code-example(language="sh" class="code-shell").
: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 Step 3: Serve the application
+
+h2#serve 步骤3. 启动开发服务器
+
:marked
Go to the project directory and launch the server.
+
+ 进入项目目录,并启动服务器。
code-example(language="sh" class="code-shell").
cd my-app
@@ -71,27 +121,44 @@ code-example(language="sh" class="code-shell").
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 Step 4: Edit our first Angular component
+
+h2#first-component 步骤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=".")
@@ -100,37 +167,66 @@ figure.image-display
: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
@@ -162,8 +258,12 @@ table(width="100%")
col(width="20%")
col(width="80%")
tr
- th File
- th Purpose
+ th
+ p File
+ p 文件
+ th
+ p Purpose
+ p 用途
tr
td app/app.component.{ts,html,css,spec.ts}
td
@@ -171,6 +271,10 @@ table(width="100%")
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 app/app.module.ts
td
@@ -179,12 +283,19 @@ table(width="100%")
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 assets/*
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 environments/*
td
@@ -196,12 +307,22 @@ table(width="100%")
Or maybe different analytics tokens.
Maybe even some mock services.
Either way, the CLI has you covered.
+
+ 这个文件夹中包括为各个目标环境准备的文件,它们导出了一些应用中要用到的配置变量。
+ 这些文件会在构建应用时被替换。
+ 比如你可能在产品环境中使用不同的API端点地址,或使用不同的统计Token参数。
+ 甚至使用一些模拟服务。
+ 所有这些,CLI都替你考虑到了。
+
tr
td favicon.ico
td
:marked
Every site wants to look good on the bookmark bar.
Get started with your very own Angular icon.
+
+ 每个网站都希望自己在书签栏中能好看一点。
+ 请把它换成你自己的图标。
tr
td index.html
td
@@ -210,16 +331,25 @@ table(width="100%")
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 `