diff --git a/public/docs/ts/latest/cli-quickstart.jade b/public/docs/ts/latest/cli-quickstart.jade
index 6a28a8ac03..b7e407fa9e 100644
--- a/public/docs/ts/latest/cli-quickstart.jade
+++ b/public/docs/ts/latest/cli-quickstart.jade
@@ -6,14 +6,14 @@ include _util-fns
好的工具能让开发更加简单快捷。
- The [**AngularCLI**](https://cli.angular.io/) is a **_command line interface_** tool
+ 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 ongoing development tasks such
as testing, bundling, and deployment.
- [**Angular-CLI**](https://cli.angular.io/)是一个**命令行界面**工具,它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。
+ [**Angular CLI**](https://cli.angular.io/)是一个**命令行界面**工具,它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。
The goal in this guide is to build and run a simple Angular
- application in TypeScript, using theAngularCLI
+ application in TypeScript, using the Angular CLI
while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
benefit _every_ Angular project.
@@ -45,15 +45,19 @@ include _util-fns
[编辑](#first-component)该应用。
And you can also download the example.
+
+ 你还可以下载这个例子。
.l-main-section
-h2#devenv
- p Step 1. Set up the Development Environment
- p 步骤1. 设置开发环境
+h2#devenv Step 1. Set up the Development Environment
+
+h2#devenv 步骤1. 设置开发环境
:marked
You need to set up your 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.
@@ -66,18 +70,20 @@ h2#devenv
Older versions produce errors, but newer versions are fine.
请先在终端/控制台窗口中运行命令 `node -v` 和 `npm -v`,
- **来验证一下你正在运行 node `4.x.x` 和 npm `3.x.x` 以上的版本。**
+ **来验证一下你正在运行 node `6.9.x` 和 npm `3.x.x` 以上的版本。**
更老的版本可能会出现错误,更新的版本则没问题。
:marked
- Then **install the [AngularCLI](https://github.com/angular/angular-cli)** globally.
- 然后全局安装 **[Angular-CLI](https://github.com/angular/angular-cli)** 。
+ 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. 创建新项目
+h2#create-proj Step 2. Create a new project
+h2#create-proj 步骤2. 创建新项目
:marked
Open a terminal window.
@@ -133,9 +139,10 @@ figure.image-display
img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="The app works!")
.l-main-section
-h2#first-component
- p Step 4: Edit your first Angular component
- p 步骤4. 编辑我们的第一个Angular组件
+h2#first-component Step 4: Edit your first Angular component
+
+h2#first-component 步骤4. 编辑我们的第一个Angular组件
+
:marked
The CLI created the first Angular component for you.
This is the _root component_ and it is named `app-root`.
@@ -147,7 +154,9 @@ h2#first-component
: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
@@ -196,7 +205,7 @@ figure.image-display
An Angular CLI project is the foundation for both quick experiments and enterprise solutions.
- Angular-CLI项目是做快速试验和开发企业解决方案的基础。
+ Angular CLI项目是做快速试验和开发企业解决方案的基础。
The first file you should check out is `README.md`.
It has some basic information on how to use CLI commands.
@@ -206,10 +215,12 @@ figure.image-display
你首先要看的文件是`README.md`。
它提供了一些如何使用CLI命令的基础信息。
- 如果你想了解 Angular-CLI 的工作原理,请访问 [Angular-CLI 的仓库](https://github.com/angular/angular-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. 有些生成的文件你可能觉得陌生。接下来我们就讲讲它们。
+ Some of the generated files might be unfamiliar to you.
+
+ 有些生成的文件你可能觉得陌生。接下来我们就讲讲它们。
block src-files
:marked
@@ -268,7 +279,9 @@ table(width="100%")
: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`组件。
+ as the application evolves.
+
+ 使用HTML模板、CSS样式和单元测试定义`AppComponent`组件。
它是**根**组件,随着应用的成长它会成为一棵组件树的根节点。
tr
td app/app.module.ts
@@ -277,7 +290,9 @@ table(width="100%")
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如何组装该应用。
+ Soon there will be more components to declare.
+
+ 定义`AppModule`,这个[根模块](guide/appmodule.html "AppModule: 根模块")会告诉Angular如何组装该应用。
目前,它只声明了`AppComponent`。
稍后它还会声明更多组件。
tr
@@ -338,7 +353,7 @@ table(width="100%")
without changing any code by passing in `--aot` to `ng build` or `ng serve`.
这是应用的主要入口点。
- 使用[JIT compiler](glossary.html#jit)编译器编译本应用,并[启动](guide/appmodule.html#main "启动应用"),使其运行在浏览器中。
+ 使用[JIT compiler](glossary.html#jit)编译器编译本应用,并[启动应用的根模块`AppModule`](guide/appmodule.html#main "启动应用"),使其运行在浏览器中。
你还可以使用[AOT compiler](glossary.html#ahead-of-time-aot-compilation)编译器,而不用修改任何代码 —— 只要给`ng build` 或 `ng serve` 传入 `--aot` 参数就可以了。
tr
@@ -383,8 +398,7 @@ table(width="100%")
TypeScript compiler configuration for the Angular app (`tsconfig.app.json`)
and for the unit tests (`tsconfig.spec.json`).
- TypeScript编译器的配置文件。
-
+ TypeScript编译器的配置文件。`tsconfig.app.json`是为Angular应用准备的,而`tsconfig.spec.json`是为单元测试准备的。
block root-files
:marked
@@ -460,6 +474,11 @@ table(width="100%")
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的配置文件。
+ 在这个文件中,我们可以设置一系列默认值,还可以配置项目编译时要包含的那些文件。
+ 要了解更多,请参阅它的官方文档。
+
tr
td .editorconfig
td
@@ -522,6 +541,8 @@ table(width="100%")
td
:marked
TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
+
+ TypeScript编译器的配置,你的IDE会借助它来给你提供更好的帮助。
tr
td tslint.json
td
@@ -529,8 +550,10 @@ table(width="100%")
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