diff --git a/public/docs/index.jade b/public/docs/index.jade
index 7b2e524ff8..2fe2d058f1 100644
--- a/public/docs/index.jade
+++ b/public/docs/index.jade
@@ -2,13 +2,13 @@
.l-sub-section
h3 TypeScript
- p: Angular 2 TS - Latest Version
-
+ p: Angular 2 TS - 最新版本
+
h3 JavaScript
- p Angular 2 JS - Latest Version
+ p Angular 2 JS - 最新版本
h3 Dart
- p: Angular 2 Dart - Latest Version
\ No newline at end of file
+ p: Angular 2 Dart - 最新版本
\ No newline at end of file
diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
index 92e5f4e5f5..2a91ddbe0a 100644
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@@ -3,69 +3,106 @@ include _util-fns
:marked
Our QuickStart goal is to build and run a super-simple Angular 2 application in TypeScript.
+ 在“快速开始”中,我们的目标是构建和运行一个超简单的Angular 2应用 —— 使用TypeScript语言
+
# Download the code
+ # 下载代码
In a hurry?
[Download the QuickStart source](https://github.com/angular/quickstart/blob/master/README.md)
and start coding.
-
- # See it run
+
+ 等不及了?可[下载QuickStart源码](https://github.com/angular/quickstart/blob/master/README.md)
+ 开始写代码!
+
+ ## See It Run!
+ ## 让它跑起来!
Try this live example
which loads the sample app in plunker
and displays a simple message:
+ 试试这个 活的例子
+ 它将在plunker中加载这个范例,并显示一条简短的消息
+
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
# Learn
+ # 学习
Of course we don't build apps to run in plunker.
The following steps establish a development environment for the documentation samples
that also can be the foundation for our real world applications. At a high level, we will
+ 当然,为了在plunker中运行起来,我们不必构建这些应用。
+ 下列步骤会指引你为本文档中的这些例子建立开发环境,它同样能作为将来我们开发真实应用的基础。大体来说,我们将:
+
- set up the [development environment](#devenv)
+ - 安装 [开发环境](#devenv)
- write the app's Angular [root component](#component)
+ - 写本应用的Angular[根组件(root component)](#component)
- write [main.ts](#main) which tells Angular to display the root component
+ - 写一个 [main.ts](#main) 它将告诉Angular如何显示根组件
- write the [host web page](#index) (`index.html`)
+ - 写 [宿主页面](#index) (`index.html`)
.l-sub-section
:marked
We'll see many code blocks as we pursue this agenda. They're all easy to copy and paste:
+ 我们将看到很多代码块作为我们的实现步骤。它们都很容易拷贝和粘贴:
code-example(format='.', language='html').
Click the glyph on the right to copy code snippets to the clipboard ⇨⇨⇨⇨⇨⇨⇨⇨⇨⇨
-
+ 点击右边的图标来把代码片段拷贝到剪贴板 ⇨⇨⇨⇨⇨⇨⇨⇨⇨⇨
+
button(class="verbose off md-primary md-button md-ink-ripple", type="button", onclick="verbose(false)").
Hide explanations
+ 隐藏解释
button(class="verbose on md-primary md-button md-ink-ripple", type="button", onclick="verbose(true)").
View explanations
+ 查看解释
.l-verbose-section
:marked
*Explanations* describe the concepts and reasons behind the instructions.
Explanations have a thin border on the left like *this* block of text.
- Click *Hide Explanations* to show only the instructions.
+ *解释* 描述指令背后的概念和理由。解释就像 *这块儿* 文字一样,在左侧有一个细边框。
+
+ Click *Hide Explanations* to show only the instructions.
Click it again to see everything again.
+ 点击 *隐藏解释* 可以只显示指令。再点一次可以再次看到所有内容。
+
a(id="devenv")
.l-main-section
:marked
## Development Environment
-
+ ## 开发环境
+
We need to set up our development environment:
+ 我们要设置开发环境:
* install node and npm
+ * 安装 node 和 npm
* create an [application project folder](#app-folder)
+ * 创建一个 [应用项目目录](#app-folder)
* add a [tsconfig.json](#tsconfig) to guide the TypeScript compiler
+ * 添加一个[tsconfig.json](#tsconfig)为TypeScript编译器提供指导
* add a [typings.json](#typings) that identifies missing TypeScript definition files
+ * 添加一个[typings.json](#typings)来存放缺失的TypeScript定义文件
* add a [package.json](#package-json) that defines the packages and scripts we need
+ * 添加一个[package.json](#package-json)来定义我们所需的依赖包和脚本
* install the npm packages and typings files
-
+ * 安装npm包和typings文件
+
a(id="install-npm")
:marked
**Install [node and npm](https://nodejs.org/en/download/)** if not already on your machine.
-
+ **安装[node and npm](https://nodejs.org/en/download/)** ,如果你机器上还没有。
+
a(id="app-folder")
:marked
Create a **new project folder**
+ 创建一个 **新项目目录**
code-example(format="").
mkdir angular2-quickstart
cd angular2-quickstart
@@ -73,6 +110,7 @@ code-example(format="").
a(id="tsconfig")
:marked
Add a **tsconfig.json** file to the project folder and copy/paste the following:
+ 添加一个 **tsconfig.json** 文件到项目文件夹,并且拷贝/粘贴下列内容:
+makeJson('quickstart/ts/tsconfig.1.json', null, 'tsconfig.json')(format=".")
:marked
@@ -80,9 +118,13 @@ a(id="tsconfig")
Learn more about it in the
TypeScript Configuration chapter.
+ 这个`tsconfig.json`文件将为TypeScript编译器提供指引。
+ 到TypeScript Configuration一节可以了解更多。
+
a(id="typings")
:marked
Add a **typings.json** file to the project folder and copy/paste the following:
+ 添加一个 **typings.json** 文件到项目文件夹,并且拷贝/粘贴下列内容:
+makeJson('quickstart/ts/typings.1.json', null, 'typings.json')(format=".")
.l-verbose-section
@@ -91,51 +133,92 @@ a(id="typings")
that the TypeScript compiler doesn't recognize natively. We teach it about these capabilities with
TypeScript type definition files
— *d.ts files* — which we identify in a `typings.json` file.
-
+
+ 有很多JavaScript库扩展了JavaScript开发环境,使其支持原生TypeScript编译器无法自动识别的特性和语法。
+ 我们通过
+ TypeScript类型定义文件
+ 让它具备这些能力。— *d.ts 文件* — 我们把这些记录在 `typings.json` 文件中。
+
We go a little deeper into *typings* in the
TypeScript Configuration chapter.
+ 我们将在
+ TypeScript配置一章中深入讲解 *typings*
+
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=".")
.l-verbose-section
:marked
### Adding the libraries we need with *npm*
+ ### 用 *npm* 添加我们所需的库
Angular application developers rely on the npm
package manager to install the libraries their apps require.
The Angular team recommends the starter-set of packages specified in the `dependencies` and `devDependencies`
sections.
See the [npm packages](guide/npm-packages.html) chapter for details.
+ Angular应用程序开发者靠 npm 安装应用程序所需的库。
+ Angular开发组在`dependencies`和`devDependencies`中指定了建议初学者们使用的依赖包。
+ 查看[npm packages](guide/npm-packages.html)一章以了解详情。
+
### Helpful scripts
+ ### 有用的脚本
We've included a number of npm scripts in our suggested `package.json` to handle common development tasks:
- +makeJson('quickstart/ts/package.1.json',{ paths: 'scripts'}, 'package.json (scripts)')(format=".")
+ 我们在建议的`package.json`中包括了几个npm脚本来处理常见的开发任务:
+ +makeJson('quickstart/ts/package.1.json',{ paths: 'scripts'}, 'package.json (scripts)')(format=".")
:marked
We execute most npm scripts in the following way: `npm run` + *script-name*.
Some commands (such as `start` don't require the `run` keyword).
+ 我们可以通过运行`npm run` + *script-name* 的形式执行大多数npm脚本。
+ 有些命令(例如`start`)不需要`run`关键字。
+
Here's what these scripts do:
- * `npm start` - runs the compiler and a server at the same time, both in "watch mode"
+ 下面是这些脚本所做的事情:
+
+ * `npm start` - run the compiler and a server at the same time, both in "watch mode"
- * `npm run tsc` - runs the TypeScript compiler once
+ * `npm start` - 同时运行编译器和一个服务器,并且开启"监听模式"
+
+ * `npm run tsc` - run the TypeScript compiler once
- * `npm run tsc:w` - runs the TypeScript compiler in watch mode;
- the process keeps running, awaiting changes to TypeScript files and re-compiling when it sees them
+ * `npm run tsc` - 运行一次TypeScript编译器
+
+ * `npm run tsc:w` - run the TypeScript compiler in watch mode;
+ the process keeps running, awaiting changes to TypeScript files and re-compiling when it sees them.
- * `npm run lite` - runs the lite-server,
- a light-weight, static file server with excellent support for Angular apps that use routing
+ * `npm run tsc:w` - 运行TypeScript编译器在监听模式;
+ 进程持续运行,等待TypeScript文件发生变化,一旦变化就重新编译它。
+
+ * `npm run lite` - run the lite-server,
+ a light-weight, static file server, written and maintained by
+ John Papa
+ with excellent support for Angular apps that use routing.
+ * `npm run lite` - 运行 轻量级服务器,
+ 一个轻量级的静态文件服务器,由
+ John Papa
+ 编写和维护,对使用了路由的Angular应用提供了很好的支持。
+
* `npm run typings` - runs the [*typings* tool](#typings)
- * `npm run postinstall` - called by *npm* automatically *after* it successfully completes package installation.
- This script installs the [TypeScript definition files](#typings) defined in `typings.json`
+ * `npm run typings` - 运行 [*typings*工具](#typings)
+
+ * `npm postinstall` - called by *npm* automatically *after* it successfully completes package installation.
+ This script installs the [TypeScript definition files](#typings) this app requires.
+
+ * `npm postinstall` - 由 *npm* 在成功安装了依赖包 *之后* 自动调用。
+ 这个脚本安装本应用所需的[TypeScript定义文件](#typings)
:marked
**Install these packages** by entering the following *npm* command in a terminal window (command window in Windows):
+ 通过在终端窗口(Windows下是command窗口)中输入下列 *npm* 命令来 **安装这些依赖包** :
code-example(format="").
npm install
@@ -143,31 +226,51 @@ code-example(format="").
:marked
Scary error messages in red may appear **during** install.
The install typically recovers from these errors and finishes successfully.
+
+ 在 **安装过程中** ,可能出现可怕的红色错误信息。
+ 不用担心,安装过程通常能从这些错误中自行恢复,并最终成功。
.l-verbose-section(class="l-verbose-inherit")
:marked
#### npm errors and warnings
-
+ #### npm错误和警告
+
All is well if there are no console messages starting with `npm ERR!` *at the end* of **npm install**.
There might be a few `npm WARN` messages along the way — and that is perfectly fine.
-
+
+ 如果在 **npm install** 的 *末尾* 没有以`npm ERR!`开头的控制台信息,就说明没问题。
+ 还可能有一些类似的`npm WARN`开头的信息 — 这也没问题。
+
We often see an `npm WARN` message after a series of `gyp ERR!` messages.
Ignore them. A package may try to re-compile itself using `node-gyp`.
If the re-compile fails, the package recovers (typically with a pre-built version)
and everything works.
+ 我们通常会在一系列`gyp ERR!`消息后面看到一个`npm WARN`消息。
+ 忽略它们。依赖包可能尝试使用`node-gyp`重新编译自己。
+ 如果重新编译失败,依赖包会尝试恢复(通常使用一个预编译的版本),它们仍然能正常工作。
+
Just make sure there are no `npm ERR!` messages at the end of `npm install`.
+ 只要确保在`npm install`的末尾没有`npm ERR!`消息就可以了!
+
:marked
**We're all set.** Let's write some code.
+ **全部设置完毕!** 写点代码吧。
+
a(id="component")
.l-main-section
:marked
## Our First Angular Component
+ ## 我们的第一个Angular组件
Let's create a folder to hold our application and add a super-simple Angular component.
+ 让我们创建一个目录来存放我们的应用程序,并且添加一个超级简单的Angular组件。
+
**Create an *app* sub-folder** off the root directory and make it the current directory
+
+ 在根目录下 **创建一个 *app* 子目录** 并且让它成为当前目录
code-example(format="").
mkdir app
cd app
@@ -175,15 +278,19 @@ code-example(format="").
a(id="app-component")
:marked
**Add a component file** named *app.component.ts* and paste the following lines:
+ **添加一个组件文件** ,命名为 *app.component.ts* 并粘贴下列代码:
+makeExample('quickstart/ts/app/app.component.ts', null, 'app/app.component.ts')(format=".")
.l-verbose-section
:marked
### AppComponent is the root of the application
-
+ ### AppComponent就是应用的根
+
Every Angular app has at least one root component, conventionally named `AppComponent`,
that hosts the client user experience.
+ 每个Angular应用都有至少一个根组件,按照规约命名为`AppComponent`,用于作为用户界面的宿主。
+
Components are the basic building blocks of Angular applications.
A component controls a portion of the screen — a *view* — through its associated template.
@@ -432,10 +539,10 @@ code-example(format="").
## Add some style
Styles aren't essential but they're nice and the `index.html` assumes we have
a stylesheet called `styles.css`.
-
+
Create a `styles.css` in the root folder and start styling, perhaps with this set:
+makeExample('quickstart/ts/styles.1.css', null, 'styles.css (excerpt)')(format=".")
-
+
.l-main-section
:marked
## Compile and run!
@@ -496,12 +603,12 @@ figure.image-display
quickstart/ts/package.1.json,
quickstart/ts/tsconfig.1.json,
quickstart/ts/typings.1.json,
- quickstart/ts/styles.1.css
+ quickstart/ts/styles.1.css
`,null,
- `app/app.component.ts,
- app/main.ts,
- index.html,package.json,
- tsconfig.json,
+ `app/app.component.ts,
+ app/main.ts,
+ index.html,package.json,
+ tsconfig.json,
typings.json,
styles.css`)
:marked
diff --git a/public/docs/ts/latest/resources.jade b/public/docs/ts/latest/resources.jade
index 616f05bb69..abe4785c0f 100644
--- a/public/docs/ts/latest/resources.jade
+++ b/public/docs/ts/latest/resources.jade
@@ -1,40 +1,64 @@
// TODO: don't duplicate text that's in /docs/dart/latest/resources.jade
.l-main-section
h2 Victor Savkin's Blog Posts
+ h2 Victor Savkin'的博客
ul
li: a(href="http://victorsavkin.com/post/137821436516/managing-state-in-angular-2-applications") Managing State in Angular 2 Applications
li Two Phases of Angular 2 Applications
+ li Angular 2应用的两个阶段
li Forms in Angular 2
+ li Angular 2中的表单
li Change detection
+ li 变更检查机制
li Functional programming
+ li 函数式编程
li Dependency injection
+ li 依赖注入
.l-main-section
h2 Videos
+ h2 视频
h4 Intro Videos
+ h4 简介类视频
ul
li Building a Todo App by David East
+ li 建立“Todo”范例应用 作者 David East
li Angular 2 Forms by David East
+ li Angular 2 表单 作者 David East
h4 ng-conf
+ h4 ng-conf大会视频
ul
li Playlist of ng-conf 2015 videos.
+ li ng-conf 2015 视频列表.
li Day 1 Keynote: a broad overview of Angular 2, migration, and where we are headed.
+ li 第一天讲稿: Angular 2概览、移植、发展方向
li Day 2 Keynote: Misko and Rado do a deep-dive on Angular 2 details.
+ li 第二天讲稿: Misko 和 Rado 深度剖析 Angular 2 实现细节.
li Creating Container Components with Web Components in Angular: Kara Erickson & Rachael L Moore.
+ li 用Angular2的Web Components创建容器型组件: Kara Erickson & Rachael L Moore.
li Change Detection Reinvented: Why Angular 2 change detection is fast out of the box and options for developers to make it even faster.
+ li 变更检查机制的改造: 为什么Angular 2的变更检查天生更快?开发人员如何设置会让它更快?
h4 ng-europe
+ h4 ng-europe欧洲大会视频
ul
li Oct 2014 playlist of ng-europe videos on Angular 2 and the future of Angular.
+ li 2014年10月 ng-europe的Angular 2视频列表 以及Angular的未来。
.l-main-section
h2 API Design Docs & Notes
+ h2 API设计文档 & 说明
ul
li Best Practices
+ li 最佳实践
li API Design Docs
+ li API设计文档
li Meeting Notes
+ li 会议记录
li Presentations
- li More...
\ No newline at end of file
+ li 报告
+ li More...
+ li 更多...
\ No newline at end of file