From 693dfe44fb3d7e8c623e29a3ac71625204923db0 Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Fri, 4 Mar 2016 00:02:33 +0800 Subject: [PATCH 1/9] =?UTF-8?q?=E6=B1=89=E5=8C=96=E7=AC=AC=E4=B8=89?= =?UTF-8?q?=E6=96=B9=E8=B5=84=E6=BA=90=E3=80=81=E5=BF=AB=E9=80=9F=E5=BC=80?= =?UTF-8?q?=E5=A7=8B=EF=BC=88=E9=83=A8=E5=88=86=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docs/index.jade | 8 +- public/docs/ts/latest/quickstart.jade | 163 +++++++++++++++++++++----- public/docs/ts/latest/resources.jade | 26 +++- 3 files changed, 164 insertions(+), 33 deletions(-) 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 From 6307cfe8313eee665566a88ed6f0ca2b22e4c714 Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Mon, 7 Mar 2016 21:42:10 +0800 Subject: [PATCH 2/9] =?UTF-8?q?=E5=8F=88=E7=BF=BB=E8=AF=91=E4=BA=86?= =?UTF-8?q?=E4=B8=80=E9=83=A8=E5=88=86QuickStart?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docs/ts/latest/quickstart.jade | 107 ++++++++++++++++++++++---- 1 file changed, 90 insertions(+), 17 deletions(-) diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index 2a91ddbe0a..c6b21dc48d 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -3,7 +3,7 @@ include _util-fns :marked Our QuickStart goal is to build and run a super-simple Angular 2 application in TypeScript. - 在“快速开始”中，我们的目标是构建和运行一个超简单的Angular 2应用 —— 使用TypeScript语言 + 在“QuickStart”中，我们的目标是构建和运行一个超简单的Angular 2应用 —— 使用TypeScript语言 # Download the code # 下载代码 @@ -148,6 +148,7 @@ a(id="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=".") @@ -294,115 +295,187 @@ a(id="app-component") Components are the basic building blocks of Angular applications. A component controls a portion of the screen — a *view* — through its associated template. + 组件是Angular程序最基本的构造块儿。组件通过它所关联的模板，控制屏幕的一部分 — 这就是 *视图* 。 + This QuickStart has only one, extremely simple component. But it has the essential structure of every component we'll ever write: + + 这个QuickStart只有一个非常简单的组件，但它具备我们以后要写的组件的基本结构。 * One or more import - statements to reference the things we need. + statements to reference the things we need. + + * 一个或多个import语句来引入我们所需的文件。 * A @Component decorator that tells Angular what template to use and how to create the component. - + + * 一个@Component装饰器 + 来告诉Angular，使用哪个模板，以及怎样创建这个组件。 + * A component class that controls the appearance and behavior of a view through its template. - - a(id="component-import") + + * 一个component类 + 来通过它的模板控制一个视图的外观和行为。 + +a(id="component-import") :marked ### Import Angular apps are modular. They consist of many files each dedicated to a purpose. + + Angular的应用都是模块化的。他们由很多职责明确的文件组成。 Angular itself is modular. It is a collection of library modules each made up of several, related features that we'll use to build our application. + + Angular本身也是模块化的。它包括一系列的库模块，这些模块包括了一系列相关的特性，以便我们可以拿来构建自己的应用。 When we need something from a module, we import it. Here we import the Angular `Component` decorator function from the main Angular library module because we need it to define our component. + + 当我们需要一个模块中的某些东西时，我们引入（import）它。 + 在这里，我们从Angular的主模块中引入了`Component`装饰器，我们需要它来定义我们的组件。 + +makeExample('quickstart/ts/app/app.component.ts', 'import', 'app/app.component.ts (import)')(format=".") a(id="component-decorator") :marked ### @Component decorator + ### @Component装饰器 `Component` is a **decorator** function that takes a *metadata* object. The metadata tell Angular how to create and use this component. - + + `Component`是一个 **装饰器** 函数，它用来获得一个 *metadata* 对象。 + `metadata`会告诉Angular，如何创建和使用这个组件。 + We apply this function to the component class by prefixing the function with the **@** symbol and invoking it with the metadata object just above the class: + + 我们通过给这个组件类加上 **@Component** 前缀，并且传入metadata对象来使用它。 + +makeExample('quickstart/ts/app/app.component.ts', 'metadata', 'app/app.component.ts (metadata)')(format=".") :marked This particular metadata object has two fields, a `selector` and a `template`. + 这里的metadata对象具有两个字段：`selector`和`template`。 + The **selector** specifies a simple CSS selector for an HTML element that represents the component. - + + **selector**字段指定一个简单的CSS选择器，用于指定放置此组件的HTML元素。 + >The element for this component is named `my-app`. Angular creates and displays an instance of our `AppComponent` wherever it encounters a `my-app` element in the host HTML. - The **template** specifies the component's companion template, - written in an enhanced form of HTML that tells Angular how to render this component's view. + >在此组件中，这个元素被命名为`my-app`。 + Angular创建和显示`AppComponent`组件的一个实例。 + 然后把它放在宿主页面的一个`my-app`元素中。 + + **template**用于指定组件的模板。 + 它使用一种增强的HTML格式写成，用来告诉Angular如何渲染此组件的视图。 >Our template is a single line of HTML announcing "*My First Angular App*". + + >我们的模板中只有一行HTML：“*My First Angular App*” >A more advanced template could contain data bindings to component properties - and might identify other application components which have their own templates. + and might identify other application compoents which have their own templates. These templates might identify yet other components. In this way an Angular application becomes a tree of components. + >更高级的模板可能包含到组件属性的数据绑定。还可能包含其它应用组件，这些组件还可以有自己的模板。 + 这些模板中还可以进一步包含其它组件。从这种意义上讲，Angular应用就是一棵组件树。 + a(id="component-class") :marked ### Component class + ### Component类 At the bottom of the file is an empty, do-nothing class named `AppComponent`. + + 文件的最底下，是一个空的，什么也不做的类，叫做`AppComponent`。 +makeExample('quickstart/ts/app/app.component.ts', 'export', 'app/app.component.ts (class)')(format=".") :marked When we're ready to build a substantive application, we can expand this class with properties and application logic. Our `AppComponent` class is empty because we don't need it to do anything in this QuickStart. - + + 当我们打算构建一个真实的应用时，可以通过添加属性和应用逻辑来扩展这个类。 + 但我们不需要在这个QuickStart中做这些事情，所以这里的`AppComponent`类是空的。 + We **export** `AppComponent` so that we can **import** it elsewhere in our application, as we'll see when we create `main.ts`. - + + 我们 **导出** `AppComponent`，以便我们可以在应用的其他地方 **导入** 它 —— 比如我们创建`main.ts`时。 a(id="main") .l-main-section :marked ## Show it with *main.ts* + ## 通过 *main.ts* 显示它 Now we need something to tell Angular to load the root component + + 现在，我们还需要做点什么来让Angular加载这个根组件（root component） Add a new file , `main.ts`, to the `app/` folder as follows: + + 添加一个新文件，`main.ts`，到`app/`目录下，比如： +makeExample('quickstart/ts/app/main.ts', null, 'app/main.ts')(format=".") .l-verbose-section :marked We import the two things we need to launch the application: + 我们引入了两个类来启动这个应用： + 1. Angular's browser `bootstrap` function + 1. Angular的浏览器`bootstrap`（启动）函数 1. The application root component, `AppComponent`. + 1. 应用的根组件：`AppComponent` Then we call `bootstrap` with `AppComponent`. + + 然后，我们调用`bootstrap`函数，并且把`AppComponent`传进去。 ### Bootstrapping is platform-specific + ### “启动”是平台相关的 Notice that we import the `bootstrap` function from `angular2/platform/browser`, not `angular2/core`. - + + 注意，我们是从`angular2/platform/browser`中引入的`bootstrap`函数，而不是`angular2/core`中。 + Bootstrapping isn't core because there isn't a single way to bootstrap the app. True, most applications that run in a browser call the bootstrap function from this library. - - But it is possible to load a component in a different environment. + + “启动”不是核心的一部分，是因为没有单一的途径来启动应用。诚然，大部分应用都是在浏览器中调用`bootstrap`函数的。 + + But it is possible to load a component in a different environment. We might load it on a mobile device with [Apache Cordova](https://cordova.apache.org/) or [NativeScript](https://www.nativescript.org/). We might wish to render the first page of our application on the server to improve launch performance or facilitate [SEO](http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf). + 但从其它环境中加载组件仍然是可能的。 + 我们可能通过[Apache Cordova](https://cordova.apache.org/) 或 [NativeScript](https://www.nativescript.org/) 在移动设备中加载它。 + 我们可能希望在服务器中渲染我们的第一个页面来提高启动效率或让[SEO](http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf)更加容易。 + These targets require a different kind of bootstrap function that we'd import from a different library. + + 要达成这些目标，我们需要从其它库中引入一个不同类型的`bootstrap`函数。 ### Why create a separate ***main.ts*** file? - + ### 为什么创建一个分离的 ***main.ts*** 文件？ + The *main.ts* file is tiny. This is just a QuickStart. We could have folded its few lines into the `app.component` file and spared ourselves some complexity. - + + *main.ts* 文件非常小。它只是一个`QuickStart`。我们可以 + We'd rather demonstrate the proper way to structure an Angular application. App bootstrapping is a separate concern from presenting a view. Mixing concerns creates difficulties down the road. From 6e9d1e3ba8da6c5bcddee72a7622637f53a74937 Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Sat, 9 Apr 2016 21:26:00 +0800 Subject: [PATCH 3/9] =?UTF-8?q?quickstart=E5=AE=8C=E5=B7=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docs/ts/latest/quickstart.jade | 168 ++++++++++++++++++++++++-- 1 file changed, 155 insertions(+), 13 deletions(-) diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index c6b21dc48d..3f753ae4f9 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -1,5 +1,5 @@ include _util-fns - + :marked Our QuickStart goal is to build and run a super-simple Angular 2 application in TypeScript. @@ -106,7 +106,7 @@ a(id="app-folder") code-example(format=""). mkdir angular2-quickstart cd angular2-quickstart - + a(id="tsconfig") :marked Add a **tsconfig.json** file to the project folder and copy/paste the following: @@ -170,7 +170,7 @@ a(id="package-json") ### 有用的脚本 We've included a number of npm scripts in our suggested `package.json` to handle common development tasks: 我们在建议的`package.json`中包括了几个npm脚本来处理常见的开发任务： - +makeJson('quickstart/ts/package.1.json',{ paths: 'scripts'}, 'package.json (scripts)')(format=".") + +makeJson('quickstart/ts/package.1.json',{paths: 'scripts'}, 'package.json (脚本)')(format=".") :marked We execute most npm scripts in the following way: `npm run` + *script-name*. @@ -281,7 +281,7 @@ a(id="app-component") **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 @@ -339,7 +339,7 @@ a(id="component-import") 当我们需要一个模块中的某些东西时，我们引入（import）它。 在这里，我们从Angular的主模块中引入了`Component`装饰器，我们需要它来定义我们的组件。 - +makeExample('quickstart/ts/app/app.component.ts', 'import', 'app/app.component.ts (import)')(format=".") + +makeExample('quickstart/ts/app/app.component.ts', 'import', 'app/app.component.ts (导入)')(format=".") a(id="component-decorator") :marked @@ -358,7 +358,7 @@ a(id="component-import") 我们通过给这个组件类加上 **@Component** 前缀，并且传入metadata对象来使用它。 - +makeExample('quickstart/ts/app/app.component.ts', 'metadata', 'app/app.component.ts (metadata)')(format=".") + +makeExample('quickstart/ts/app/app.component.ts', 'metadata', 'app/app.component.ts (元数据)')(format=".") :marked This particular metadata object has two fields, a `selector` and a `template`. @@ -398,7 +398,7 @@ a(id="component-import") At the bottom of the file is an empty, do-nothing class named `AppComponent`. 文件的最底下，是一个空的，什么也不做的类，叫做`AppComponent`。 - +makeExample('quickstart/ts/app/app.component.ts', 'export', 'app/app.component.ts (class)')(format=".") + +makeExample('quickstart/ts/app/app.component.ts', 'export', 'app/app.component.ts (类)')(format=".") :marked When we're ready to build a substantive application, we can expand this class with properties and application logic. @@ -474,7 +474,7 @@ a(id="main") We could have folded its few lines into the `app.component` file and spared ourselves some complexity. - *main.ts* 文件非常小。它只是一个`QuickStart`。我们可以 + *main.ts* 文件非常小。它只是一个`QuickStart`。它没几行代码，我们可以把它装进`app.component`文件来减少不必要的复杂度。 We'd rather demonstrate the proper way to structure an Angular application. App bootstrapping is a separate concern from presenting a view. @@ -482,35 +482,62 @@ a(id="main") We might launch the `AppComponent` in multiple environments with different bootstrappers. Testing the component is much easier if it doesn't also try to run the entire application. Let's make the small extra effort to do it *the right way*. + + 我们应该用正确的方式组织Angular应用的文件结构。 + 启动App与展现视图是两个相互分离的关注点。 + 把这些关注点混在一起会增加不必要的难度。 + 我们可以通过使用不同的启动器（bootstraper）来在不同的环境中启动`AppComponent`。 + 测试组件也变得更容易，因为不需要再运行整个程序才能跑测试。 + 让我们多花一点精力来用*“正确的方式”*实现它。 a(id="index") .l-main-section :marked ## Add the `index.html` + ## 添加`index.html` The `index.html` is the web page that hosts the application + `index.html`是此应用中的宿主页面。 + Navigate to the **project root folder**. + 浏览 **项目根目录** + code-example(format=""). cd .. :marked Create an`index.html` file in this root folder and paste the following lines: + + 在根目录下创建`index.html`文件并且粘贴下列代码行： + +makeExample('quickstart/ts/index.html', null, 'index.html')(format=".") .l-verbose-section :marked There are three noteworthy sections of HTML + + HTML中有三点值得注意 1. The JavaScript [libraries](#libraries) + 1. JavaScript [库](#libraries) + 2. Configuration of [SystemJS](#systemjs) where we also import and run the `main` file that we just wrote. + 2. 配置[SystemJS](#systemjs)，以便引入和运行我们刚才写的`main`文件。 + 3. The [<my-app>](#my-app) tag in the `` which is *where our app lives!* + 3. ``中的[<my-app>](#my-app)标记是*我们的应用“生活”的地方。* + a(id="libraries") :marked ### Libraries + ### 库 We loaded the following scripts + + 我们加载下列脚本： + +makeExample('quickstart/ts/index.html', 'libraries', 'index.html')(format=".") :marked We began with Internet Explorer polyfills. @@ -519,26 +546,46 @@ code-example(format=""). Most applications need those capabilities and most applications should run in Internet Explorer. + 一开始，我们先进行IE的polyfill（译注：指填充，用js来弥补浏览器原本不具备的能力）。 + IE需要填充才能正确运行依赖ES2015 promise（译注：ES2015的新特性，用于支持异步代码）和动态模块加载特性的应用程序。 + 大多数应用还是得运行在IE中，所以我们需要这些能力。 + Next are the polyfills for Angular2, `angular2-polyfills.js`. + 下一个是Angular2的polyfill —— `angular2-polyfills.js`。 + Then the [SystemJS](#systemjs) library for module loading, followed by the Reactive Extensions RxJS library. + + 下一个是响应式编程的扩展库RxJS。 + + 最后则是为实现模块加载功能而引入的[SystemJS](#systemjs)库。 + .l-sub-section :marked Our QuickStart doesn't use the Reactive Extensions but any substantial application will want them when working with observables. We added the library here in QuickStart so we don't forget later. + + 我们的QuickStart不会用到响应式扩展，但是大量的应用需要它们来提供observable（译注：响应式编程的核心特性，指监听数据的变更以便做出响应）特性。 + 我们把它加到QuickStart中，以免将来忘了。 + :marked Finally, we loaded the web development version of Angular 2 itself. + + 最后，我们加载Angular2的“Web开发版”。 We'll make different choices as we gain experience and become more concerned about production qualities such as load times and memory footprint. + + 一旦我们更有经验、对产品质量更加关注（如加载时间、内存脚印等），我们也可以做出不同的选择 a(id="systemjs") :marked ### SystemJS Configuration + ### SystemJS配置 The QuickStart uses SystemJS to load application and library modules. @@ -546,60 +593,104 @@ code-example(format=""). webpack. SystemJS happens to be a good choice but we want to be clear that it was a choice and not a preference. + 这个QuickStart使用SystemJS来加载应用和库模块。 + 还有一些其它候选者也能很好地工作，比如备受推崇的webpack。 + 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 here. + + 我们建议你要精通你所选的loader。 + 学习如何配置SystemJS的更多知识，参考这里。 With those cautions in mind, what are we doing in this QuickStart configuration? - +makeExample('quickstart/ts/index.html', 'systemjs', 'index.html (System configuration)')(format=".") + + 好好记住这些，我们再来看看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: - +makeExample('quickstart/ts/app/main.ts', 'app-component', 'main.ts (excerpt)')(format=".") + + 在我们的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 before running the application. - + + 这是因为我们在运行应用程序之前会执行从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 ### *<my-app>* @@ -607,20 +698,29 @@ code-example(format=""). metadata, finds the `my-app` selector, locates an element tag named `my-app`, and loads our application between those tags. + 当Angular在`main.ts`中调用`bootstrap`函数时，它读取`AppComponent`的元数据（metadata），发现选择器是`my-app`，于是它定位到一个元素名是`my-app`的DOM元素，并且把我们的应用加载到这个标记中。 .l-main-section :marked ## Add some style + ## 添加一些样式 Styles aren't essential but they're nice and the `index.html` assumes we have a stylesheet called `styles.css`. + 样式不是必备的，但是它让我们的应用更漂亮。`index.html`假设我们有一个名叫`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=".") + + 在根目录下创建一个`styles.css`文件来加上样式，这个文件也许是这样的： + ++makeExample('quickstart/ts/styles.1.css', null, 'styles.css (摘录)')(format=".") .l-main-section :marked ## Compile and run! + ## 编译和运行 Open a terminal window and enter this command: + 打开terminal（终端）窗口，并且敲如下命令： code-example(format=""). npm start :marked @@ -629,30 +729,53 @@ code-example(format=""). 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 @@ -669,6 +792,9 @@ figure.image-display .file typings.json :marked And here are the files: + + 一共有这些文件： + +makeTabs(` quickstart/ts/app/app.component.ts, quickstart/ts/app/main.ts, @@ -689,19 +815,35 @@ figure.image-display .l-main-section :marked ## Wrap Up + ## 完工！ Our first application doesn't do much. It's basically "Hello, World" for Angular 2. + + 我们的第一个应用没做什么，它只是Angular 2的“Hello, World” We kept it simple in our first pass: we wrote a little Angular component, we added some JavaScript libraries to `index.html`, and launched with a static file server. That's about all we'd expect to do for a "Hello, World" app. + 我们让自己的Angular 2首航保持简单：我们写一个小的Angular组件，添加一些JavaScript库到`index.html`，并且启动一个静态文件服务器。 + 这就是我们想通过“Hello, World”应用去表现的一切。 + **We have greater ambitions.** + + **我们的雄心壮志** The good news is that the overhead of setup is (mostly) behind us. We'll probably only touch the `package.json` to update libraries. We'll likely open `index.html` only if we need to add a library or some css stylesheets. + 好消息是：准备阶段已经结束了。 + 我们将来可能只是修改`package.json`来升级依赖库。 + 如果我们需要添加一些库或一些css样式表，我们可能打开`index.html`。 + We're about to take the next step and build a small application that demonstrates the great things we can build with Angular 2. + 我们将要开始下一步：构建一个小型应用，以示范更多有意思的Angular 2特性。 + Join us on the [Tour of Heroes Tutorial](./tutorial)! + + 来吧，开始我们的[探险之旅](./tutorial)！ From b90b2c92d602027e2cdd0fc1de624476c2c93c02 Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Sat, 9 Apr 2016 22:20:10 +0800 Subject: [PATCH 4/9] =?UTF-8?q?=E7=A7=BB=E9=99=A4google=20CDN=EF=BC=8C?= =?UTF-8?q?=E4=BB=A5=E5=85=8D=E8=A2=ABGFW=E6=8C=A1=E4=BD=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/_includes/_head-include.jade | 8 +++--- public/_includes/_scripts-include.jade | 36 +++----------------------- 2 files changed, 8 insertions(+), 36 deletions(-) diff --git a/public/_includes/_head-include.jade b/public/_includes/_head-include.jade index 2e46febe96..94f45103ab 100644 --- a/public/_includes/_head-include.jade +++ b/public/_includes/_head-include.jade @@ -34,9 +34,9 @@ meta(itemprop="description" content="#{description}") meta(itemprop="image" content="https://angular.io/resources/images/logos/standard/shield-large.png") link(rel="icon" type="image/x-icon" href="/resources/images/icons/favicon.ico") -link(rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css") -link(href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic,700" rel='stylesheet' type='text/css') -link(href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet") +link(rel="stylesheet" href="/resources/css/vendor/angular-material.min.css") +link(href="/resources/fonts/vendor/roboto.css" rel='stylesheet' type='text/css') +link(href="/resources/fonts/vendor/material-icons.css" rel="stylesheet") link(rel="stylesheet" href="/resources/css/vendor/icomoon/style.css") link(rel="stylesheet" href="/resources/css/vendor/animate.css") link(rel="stylesheet" href="/resources/css/main.css") @@ -57,4 +57,4 @@ link(rel="stylesheet" href="/resources/css/main.css") - \ No newline at end of file + diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade index c7fa5c3527..7170fb57de 100644 --- a/public/_includes/_scripts-include.jade +++ b/public/_includes/_scripts-include.jade @@ -7,10 +7,10 @@ script(src="/resources/js/vendor/clipboard.min.js") -script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js") -script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js") -script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js") -script(src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js") +script(src="/resources/js/vendor/angular.min.js") +script(src="/resources/js/vendor/angular-animate.min.js") +script(src="/resources/js/vendor/angular-aria.min.js") +script(src="/resources/js/vendor/angular-material.min.js") @@ -27,31 +27,3 @@ script(src="/resources/js/directives/code-tabs.js") script(src="/resources/js/directives/code-pane.js") script(src="/resources/js/directives/code-example.js") script(src="/resources/js/directives/scroll-y-offset-element.js") - - -script. - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); - - ga('create', 'UA-8594346-15', 'auto'); - ga('send', 'pageview') - - -if current.path[0] == "docs" - - script. - (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){ - (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t); - e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e); - })(window,document,'script','//s.swiftypecdn.com/install/v1/st.js','_st'); - - _st('install','VsuU7kH5Hnnj9tfyNvfK'); - - -script(src="//www.gstatic.com/feedback/api.js" type="text/javascript") - - -script. - (function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}})(document,"script","twitter-wjs"); \ No newline at end of file From 206244ea96c2ec2484a4ad1f853a73ce14036554 Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Sun, 10 Apr 2016 00:38:38 +0800 Subject: [PATCH 5/9] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=86=E5=90=84?= =?UTF-8?q?=E7=A7=8D=E5=85=AC=E5=85=B1=E9=A1=B5=E9=9D=A2=E7=9A=84=E6=B1=89?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/404.jade | 2 +- public/_data.json | 24 ++++----- public/_includes/_cta-bar.jade | 3 +- public/_includes/_footer.jade | 28 +++++------ public/_includes/_head-include.jade | 2 +- public/_includes/_hero-home.jade | 6 +-- public/_includes/_hover-card.jade | 2 +- public/_includes/_main-nav.jade | 18 +++---- public/_includes/_next-item.jade | 4 +- public/_includes/_util-fns.jade | 6 +-- public/_includes/_version-dropdown.jade | 2 +- public/about/_data.json | 10 ++-- public/about/index.jade | 7 ++- public/cardboard/_data.json | 6 +-- public/contribute.jade | 15 ++++++ public/docs/_data.json | 4 +- public/docs/_includes/_help.jade | 20 ++++++++ public/docs/_includes/_side-nav.jade | 16 +++--- public/docs/_includes/_ts-temp.jade | 16 +++--- public/docs/_includes/styleguide/_alerts.jade | 15 ++++-- public/docs/ts/latest/_data.json | 40 +++++++-------- public/features.jade | 50 ++++++++++++++++--- public/index.jade | 20 ++++++-- public/news.jade | 1 + public/support.jade | 10 ++-- public/survey.html | 4 +- 26 files changed, 213 insertions(+), 118 deletions(-) diff --git a/public/404.jade b/public/404.jade index bf7811fd68..d127557efd 100644 --- a/public/404.jade +++ b/public/404.jade @@ -1,4 +1,4 @@ .l-main-section h2 404 - p Whoops. Looks like what you're looking for can't be found. + p 啊~~~ 你好像在找某些不存在的东西！ diff --git a/public/_data.json b/public/_data.json index e3df10773e..6427634fc8 100644 --- a/public/_data.json +++ b/public/_data.json @@ -1,33 +1,33 @@ { "index": { "hero": "home", - "title": "One framework.", - "subtitle": "Mobile and desktop." + "title": "一个框架", + "subtitle": "适用于手机与桌面" }, "features": { - "title": "Features & Benefits", - "subtitle": "Powerful Features for Developing Apps" + "title": "特性与优点", + "subtitle": "开发应用程序的强力特性" }, "contribute": { - "title": "Contribute to Angular", - "subtitle": "Help us build the framework of the future!", + "title": "为Angular做贡献", + "subtitle": "帮我们构建未来时代的框架", "autoformat": "true" }, "news": { - "title": "News", - "subtitle": "Check out what we are up to" + "title": "新闻", + "subtitle": "看看我们正在做什么" }, "events": { - "title": "Events", - "subtitle": "Where we'll be presenting" + "title": "事件", + "subtitle": "我们将在哪里开会" }, "support": { - "title": "Support", - "subtitle": "Get help from the Angular Community" + "title": "支持", + "subtitle": "从Angular社区获得支持" } } diff --git a/public/_includes/_cta-bar.jade b/public/_includes/_cta-bar.jade index 029bc7e2f9..77d09bec4d 100644 --- a/public/_includes/_cta-bar.jade +++ b/public/_includes/_cta-bar.jade @@ -1,2 +1,3 @@ .cta-bar - a(href="/docs/ts/latest/quickstart.html" class="button button-large button-shield md-raised " + "md-primary" md-button) Get Started + a(href="/docs/ts/latest/quickstart.html" class="button button-large button-shield md-raised " + "md-primary" + md-button) 现在开始！ diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade index 2fd238dc06..065865dc59 100644 --- a/public/_includes/_footer.jade +++ b/public/_includes/_footer.jade @@ -14,7 +14,7 @@ else .logo-inverse-large .c2 - h3.text-headline LIBRARIES + h3.text-headline 库 ul.text-body li Angular 2.0 @@ -23,34 +23,34 @@ else li AngularFire .c2 - h3.text-headline LEARN + h3.text-headline 学习资源 ul.text-body - li 5 Min Quickstart - li Step by Step Guide - li Full API - li Resources - li Design Docs & Notes + li 5分钟快速开始 + li 单步指南 + li 全部API + li 资源 + li 设计文档 & 记录 .c2 - h3.text-headline HELP + h3.text-headline 帮助 ul.text-body li Google Group - li Chat Room - li Report an Issue + li 聊天室 + li 报告BUG .c3 - h3.text-headline COMMUNITY + h3.text-headline 社区 ul.text-body - li Blog + li 官方博客 li Google+ li Twitter li GitHub footer(class="background-steel") - small.text-caption Powered by Google ©2010-2016. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0. - a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow" md-button) + small.text-caption 来自 Google ©2010-2016。 代码许可协议：MIT-style License。 文档许可协议：CC BY 4.0. + a(aria-label="查看风格指南" href=styleguide title="风格指南" class="styleguide-trigger text-snow" md-button) span.icon-favorite diff --git a/public/_includes/_head-include.jade b/public/_includes/_head-include.jade index 94f45103ab..a28242c552 100644 --- a/public/_includes/_head-include.jade +++ b/public/_includes/_head-include.jade @@ -31,7 +31,7 @@ meta(property="og:description" content="#{description}") meta(itemprop="name" content="Angular 2") meta(itemprop="description" content="#{description}") -meta(itemprop="image" content="https://angular.io/resources/images/logos/standard/shield-large.png") +meta(itemprop="image" content="/resources/images/logos/standard/shield-large.png") link(rel="icon" type="image/x-icon" href="/resources/images/icons/favicon.ico") link(rel="stylesheet" href="/resources/css/vendor/angular-material.min.css") diff --git a/public/_includes/_hero-home.jade b/public/_includes/_hero-home.jade index 314f1ec67f..18970ea473 100644 --- a/public/_includes/_hero-home.jade +++ b/public/_includes/_hero-home.jade @@ -4,9 +4,9 @@ header(class="background-sky") .hero-cta a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" - md-button) Get Started + md-button) 现在开始！ .banner.is-centered .banner-ng-annoucement - h4 Announcing Angular Attack — a 48 hour online hackathon on May 14 - 15th, 2016.  - a(href="https://www.angularattack.com/" target="_blank") Register Today \ No newline at end of file + h4 Angular的挑战赛 — 一次48小时的线上黑客马拉松就在2016年5月14~15日。  + a(href="https://www.angularattack.com/" target="_blank") 立即注册 diff --git a/public/_includes/_hover-card.jade b/public/_includes/_hover-card.jade index a76f9948c2..df57eda266 100644 --- a/public/_includes/_hover-card.jade +++ b/public/_includes/_hover-card.jade @@ -9,4 +9,4 @@ a(class="hover-card is-button #{hasIcon}" href="#{url}" md-button) if cta p #{cta} else - p View #{name} Docs + p 查看 #{name} 文档 diff --git a/public/_includes/_main-nav.jade b/public/_includes/_main-nav.jade index 4cbe5e397e..339d5f0e04 100644 --- a/public/_includes/_main-nav.jade +++ b/public/_includes/_main-nav.jade @@ -2,14 +2,14 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5",scroll-y-off nav h1 Angular by Google - button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="appCtrl.toggleMainMenu($event)" md-button) Site Menu + button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="查看菜单" ng-click="appCtrl.toggleMainMenu($event)" md-button) 网站菜单 ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''") - li.l-left Features - li.l-left Docs - li.l-left About - li.l-left Contribute - li.l-left Support - li.l-left News - li.l-left Events - li.l-right.feedback-button feedback + li.l-left 特性 + li.l-left 文档 + li.l-left 关于 + li.l-left 贡献 + li.l-left 支持 + li.l-left 新闻 + li.l-left 事件 + li.l-right.feedback-button feedback diff --git a/public/_includes/_next-item.jade b/public/_includes/_next-item.jade index c4626a453f..cc75e7109d 100644 --- a/public/_includes/_next-item.jade +++ b/public/_includes/_next-item.jade @@ -8,7 +8,7 @@ for page, slug in data if currentPage if !nextPage && page.nextable .l-sub-section - h3 Next Step + h3 下一步 a(href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{slug}.html") #{page.title} //NEXT PAGE HAS NOW BEEN SET @@ -16,4 +16,4 @@ for page, slug in data // SET CURRENT PAGE FLAG WHEN YOU PASS IT if current.path[4] == slug - - var currentPage = true \ No newline at end of file + - var currentPage = true diff --git a/public/_includes/_util-fns.jade b/public/_includes/_util-fns.jade index d5274d903e..143489bf08 100644 --- a/public/_includes/_util-fns.jade +++ b/public/_includes/_util-fns.jade @@ -42,7 +42,7 @@ mixin makeJson( filePath, jsonConfig, title, stylePatterns) .example-title #{title} code-example(language="#{language}" format="#{format}") if (jsonExtract == 'ERROR') - err ERROR: Unable to extract json using config: "#{jsonConfig.toString()}" + err 错误: 无法通过配置"#{jsonConfig.toString()}"解析JSON else != styleString(jsonExtract, stylePatterns) @@ -149,7 +149,7 @@ script. - var fullFileName = getFragFilePath(filePath, region); - var frag = partial(fullFileName); - if (frag == null) { -- return "BAD FILENAME: " + fullFileName + " Current path: " + current.path + " PathToDocs: " + getPathToDocs(); +- return "出错的文件: " + fullFileName + " 所在路径: " + current.path + " 文档路径: " + getPathToDocs(); - } else { - // ``` gets translated to 
.....
and we need - // to remove this from the fragment prefix is 11 long and suffix is 13 long @@ -303,4 +303,4 @@ script. - } - } - } -- } \ No newline at end of file +- } diff --git a/public/_includes/_version-dropdown.jade b/public/_includes/_version-dropdown.jade index 2aea294f62..07d2bc6558 100644 --- a/public/_includes/_version-dropdown.jade +++ b/public/_includes/_version-dropdown.jade @@ -65,7 +65,7 @@ if language == 'dart' nav.hero-subtitle.text-subhead.dropdown - button(aria-label="Select a version of Angular" md-button class="dropdown-button" ng-click="appCtrl.toggleVersionMenu($event)") #{title} + button(aria-label="选择Angular版本" md-button class="dropdown-button" ng-click="appCtrl.toggleVersionMenu($event)") #{title} div(class="overlay ng-hide" ng-click="appCtrl.toggleVersionMenu($event)" ng-show="appCtrl.showMenu") diff --git a/public/about/_data.json b/public/about/_data.json index 67767f5e2a..1b5b389515 100644 --- a/public/about/_data.json +++ b/public/about/_data.json @@ -1,11 +1,11 @@ { "index": { - "title": "Moving the Web Forward", - "subtitle": "The Angular Core Team" + "title": "推动Web前进", + "subtitle": "Angular核心开发组" }, "presskit": { - "title": "Features & Benefits", - "subtitle": "Production Grade Features" + "title": "特性 & 优点", + "subtitle": "产品级特性" } -} \ No newline at end of file +} diff --git a/public/about/index.jade b/public/about/index.jade index b6b429b178..14f24c232f 100644 --- a/public/about/index.jade +++ b/public/about/index.jade @@ -2,12 +2,14 @@ .c2   .c8.text-center - h3.text-headline.text-uppercase Building For the Future + h3.text-headline.text-uppercase 为未来构建 p.text-body. Angular is built by a team of engineers who share a passion for making web development feel effortless. We believe that writing beautiful apps should be joyful and fun. We're building a platform for the future. + Angular由一个工程师组织打造，我们拥有共同的热情 —— 让Web开发变得更简单。我们深信，写漂亮的程序快乐而有趣。 + 我们正在构建一个面向未来的平台。 .c2   .clear @@ -15,6 +17,7 @@ .grid-fluid.l-space-bottom-6 h3.text-headline.text-uppercase.text-center Current Contributors + h3.text-headline.text-uppercase.text-center 目前的贡献者 for type in [ 'Lead', 'Google', 'Community' ] @@ -27,7 +30,7 @@ image(src="#{person.picture}" alt="#person.name") nav - button(aria-label="View Bio") View Bio + button(aria-label="View Bio") 个人经历 if person.twitter a(title="twitter" href="https://twitter.com/#{person.twitter}" ng-click="$event.stopPropagation()") diff --git a/public/cardboard/_data.json b/public/cardboard/_data.json index a092533354..0867aeb5f6 100644 --- a/public/cardboard/_data.json +++ b/public/cardboard/_data.json @@ -1,7 +1,7 @@ { "index": { - "title": "Angular Cardboard Hack-A-Thon", - "subtitle": "Winners Announced", + "title": "Angular Hack-A-Thon 卡片墙", + "subtitle": "胜利者宣言", "autoformat": "true" } -} \ No newline at end of file +} diff --git a/public/contribute.jade b/public/contribute.jade index 3e439abfcb..abd0459d9b 100644 --- a/public/contribute.jade +++ b/public/contribute.jade @@ -1,33 +1,48 @@ .l-main-section h2 Angular Projects + h2 Angular项目列表 p We'd love for you to contribute to our source code and to make Angular projects even better. + p 我们希望你给我们捐献代码，让Angular项目变得更好。 .l-sub-section h3 Angular 2 p Angular 2, now in beta, is a next generation mobile and desktop application development platform. + p Angular 2, 正在beta阶段，是下一代移动和桌面应用开发平台。 a(href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular 2 + a(href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button) 为Angular 2做贡献 .l-sub-section h3 Angular for JavaScript or Dart + h3 Angular - JavaScript 或 Dart p Angular is a development platform for building mobile and desktop applications. + p Angular是一个开发平台，用于构建移动和桌面应用。 a(href="https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular for JS + a(href="https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md" class="button" md-button). + 帮助Angular JS a(href="https://github.com/angular/angular.dart/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular for DART + a(href="https://github.com/angular/angular.dart/blob/master/CONTRIBUTING.md" class="button" md-button). + 帮助Angular DART .l-sub-section h3 Angular Material p Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design specification for use in Angular single-page applications (SPAs). + p 我们的目标是精益、轻量级、基于Angular的一组UI组件，它们实现了material设计规范，可以用在Angular单页面应用中。 a(href="https://github.com/angular/material/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular Material + a(href="https://github.com/angular/material/blob/master/CONTRIBUTING.md" class="button" md-button). + 帮助Angular Material .l-sub-section h3 AngularFire p AngularFire is the officially supported Angular binding for Firebase. Firebase is a full backend so you don't need servers to build your Angular app. + p AngularFire是一个官方提供的Angular版Firebase绑定。Firebase是一个完整的后端，所以你不需要自己搭建服务器就能构建一个Angular应用。 a(href="https://github.com/firebase/angularFire" class="button" md-button) Contribute to AngularFire + a(href="https://github.com/firebase/angularFire" class="button" md-button) 帮助AngularFire diff --git a/public/docs/_data.json b/public/docs/_data.json index 121e4db32f..c8a083efd9 100644 --- a/public/docs/_data.json +++ b/public/docs/_data.json @@ -1,7 +1,7 @@ { "index": { - "title": "Angular Docs", - "subtitle": "Choose a language for Angular", + "title": "Angular文档", + "subtitle": "选择Angular的语种", "layout": "../_layout" } } diff --git a/public/docs/_includes/_help.jade b/public/docs/_includes/_help.jade index 20b131054a..7322e7dfcb 100644 --- a/public/docs/_includes/_help.jade +++ b/public/docs/_includes/_help.jade @@ -1,9 +1,11 @@ .l-main-section h2 Get Help Using Angular + h2 获得使用Angular的帮助 p. We have an incredible community of developers who are passionate about solving problems. We recommend some of the following methods to get help with Angular. + 我们有一个难以置信的开发者社区，他们充满激情的解决问题。我们建议您通过下列方式获取关于Angular的帮助： .l-sub-section @@ -13,29 +15,47 @@ li. Search the archive first. It's likely that your question has already been answered. + li. + 先搜索文档。 + 你的问题很可能有别人问过了。 li. To avoid the spam moderation queue, don't include code directly in your email. (See #3) + li. + 为了避免被当成垃圾邮件，请不要在你的邮件中包含代码。（参见下一条） li. Link to a live code example that demonstrates your problem or question, so you'll get an answer faster. Use this template. + li. + 给出一个“活代码范例”的链接，来演示你的难题或问题，那样你会更快的获得答案。 + 使用这个模板。 li. If you get help, help others. Good karma rulez! + li. + 如果得到了帮助，别忘了帮助别人。人生金律！ a(href="https://groups.google.com/forum/#!forum/angular" class="button button-primary" md-button) View the Google Group + + a(href="https://groups.google.com/forum/#!forum/angular" class="button button-primary" md-button) 访问Google Group .l-sub-section h3 Angular Chat Room + h3 Angular聊天室 p Talk in real time with other Angular developers. + p 和其他Angular开发者实时聊天。 a(href="http://webchat.freenode.net/?channels=angularjs&uio=d4" class="button button-primary" md-button) View the Chat Room + a(href="http://webchat.freenode.net/?channels=angularjs&uio=d4" class="button button-primary" md-button) 访问聊天室 .l-sub-section h3 Report an Issue + h3 报告问题 p If you run into an issue or have a feature request, you can create a new issue on our GitHub repository. + p 如果你遇到了问题或者需要某些特性，你可以在我们的Github仓库中创建一个新的issue。 a(href="https://github.com/angular/angular/issues" class="button button-primary" md-button) Report an Issue + a(href="https://github.com/angular/angular/issues" class="button button-primary" md-button) 报告问题 diff --git a/public/docs/_includes/_side-nav.jade b/public/docs/_includes/_side-nav.jade index 374acc5215..71ed5a5c74 100644 --- a/public/docs/_includes/_side-nav.jade +++ b/public/docs/_includes/_side-nav.jade @@ -43,30 +43,30 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav // SEARCH BAR header.side-nav-search.st-input-wrapper form.st-input-inner - label(for="search-io" class="is-hidden") Search Docs - input(type="search" id="search-io" placeholder="SEARCH DOCS...") - button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="appCtrl.toggleDocsMenu($event)" md-button) Docs + label(for="search-io" class="is-hidden") 搜索文档 + input(type="search" id="search-io" placeholder="搜索文档...") + button(class="mobile-trigger button" aria-label="查看文档菜单" ng-click="appCtrl.toggleDocsMenu($event)" md-button) 文档 div(class="side-nav-secondary" ng-class="appCtrl.showDocsNav ? 'is-visible' : ''") .nav-blocks - .nav-title Tutorial + .nav-title 指南 .nav-primary-link(class="#{qs.class}") a(href="#{qs.href}" title="#{qs.tooltip}") #{qs.navTitle} - .nav-sub-title Case Study: Tour of Heroes + .nav-sub-title 案例: 英雄之旅 .nav-ordered-lists ol each item in tutorial li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle} .nav-blocks - .nav-title Basics + .nav-title 基础知识 .nav-ordered-lists ol each item in basics li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle} .nav-blocks - .nav-title Developer Guide + .nav-title 开发人员指南 .nav-unordered-lists ul each item in guide @@ -80,7 +80,7 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle} .nav-blocks - .nav-title Reference + .nav-title 参考 .nav-unordered-lists ul each item in reference diff --git a/public/docs/_includes/_ts-temp.jade b/public/docs/_includes/_ts-temp.jade index b4a6b8ad8a..30e089e841 100644 --- a/public/docs/_includes/_ts-temp.jade +++ b/public/docs/_includes/_ts-temp.jade @@ -1,10 +1,10 @@ - var language = current.path[1] -- var lang = 'your choosen language' +- var lang = '你选中的语言' if language == 'dart' - lang = 'Dart' if language == 'js' - - lang = 'JavaScript' + - lang = 'JavaScript' if language == 'ts' - lang = 'TypeScript' @@ -20,14 +20,14 @@ if secondaryPath - var data = secondaryPath._data - var listType = data._listtype - var items = listType == 'api' ? secondaryPath : data - + for item, slug in items if slug == current.path[4] - name = 'the ' + item.title + ' chapter' - + p. - This chapter is not yet available in #{lang}. - We recommend reading the TypeScript version. + 这个章节在 #{lang} 语种下还不可用。 + 建议您阅读TypeScript版本。 a(href=path, class='md-primary md-button md-ink-ripple'). - Read !{name} in TypeScript -// != partial(path) \ No newline at end of file + 阅读!{name}TypeScript版本 +// != partial(path) diff --git a/public/docs/_includes/styleguide/_alerts.jade b/public/docs/_includes/styleguide/_alerts.jade index 19b6d7e0f9..14684d3c8f 100644 --- a/public/docs/_includes/styleguide/_alerts.jade +++ b/public/docs/_includes/styleguide/_alerts.jade @@ -1,22 +1,29 @@ #sg-alerts.showcase.shadow-1 header.showcase-header h2 Alerts + h2 警告 p. Please use alerts sparingly throughout the docs. They are meant to draw attention on important occasions. Alerts should not be used for multi-line content (user callouts insteads) or stacked on top of each other. - + p. + 请在文档中严谨的使用警告。这意味着只在重要的场合用它吸引注意力。 + 不要用警告表现多行内容（使用插图代替），也不要把它们堆叠在一起。 .showcase-content .l-sub-section h3 Adding an alert + h3 添加一个警告 .alert.is-critical A very critical alert + .alert.is-critical 非常关键的警告 .alert.is-important A very important alert + .alert.is-important 非常重要的警告 .alert.is-helpful A very helpful alert + .alert.is-helpful 非常有用的警告 pre.prettyprint.linenums code. - .alert.is-critical A very critical alert - .alert.is-important A very important alert - .alert.is-helpful A very helpful alert \ No newline at end of file + .alert.is-critical 非常关键的警告 + .alert.is-important 非常重要的警告 + .alert.is-helpful 非常有用的警告 diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json index d0533f5b6e..a875c42c44 100644 --- a/public/docs/ts/latest/_data.json +++ b/public/docs/ts/latest/_data.json @@ -1,68 +1,68 @@ { "index": { "icon": "home", - "title": "Angular Docs", - "menuTitle": "Docs Home", - "banner": "Welcome to Angular in TypeScript! The current Angular 2 release is beta.14. Please consult the Change Log about recent enhancements, fixes, and breaking changes." + "title": "Angular文档", + "menuTitle": "文档首页", + "banner": "欢迎来到 Angular in TypeScript! 当前的Angular版本是 beta.14。请参考Change Log来了解最近的增强、修正和破坏性变更。" }, "quickstart": { "icon": "query-builder", - "title": "5 Min Quickstart", - "description": "Get up and running with Angular 2" + "title": "五分钟快速开始", + "description": "Angular 2起跑" }, "tutorial": { "icon": "list", - "title": "Tutorial", - "banner": "Angular 2 is currently in Beta." + "title": "教程", + "banner": "Angular 2正处于Beta阶段。" }, "guide": { "icon": "list", - "title": "Developer Guides", - "banner": "Angular 2 is currently in Beta." + "title": "开发人员指南", + "banner": "Angular 2正处于Beta阶段。" }, "cookbook": { "icon": "list", "title": "Cookbook", - "banner": "How to solve common implementation challenges." + "banner": "教你解决常见的“该怎么做”问题。" }, "api/": { "icon": "book", - "title": "API Preview", + "title": "API预览", "reference": true }, "cheatsheet": { - "title": "Angular Cheat Sheet", - "intro": "A quick guide to Angular syntax.", + "title": "Angular小抄", + "intro": "关于Angular语法的快速指南", "reference": true }, "glossary": { - "title": "Glossary", - "intro": "Brief definitions of the most important words in the Angular 2 vocabulary", + "title": "词汇表", + "intro": "Angular 2中那些最重要的词汇的简短定义", "reference": true }, "resources": { "icon": "play-circle-fill", - "title": "Angular Resources", - "banner": "Angular 2 is currently in Beta.", + "title": "Angular资源", + "banner": "Angular 2正处于Beta阶段", "resources": true }, "help": { "icon": "chat", - "title": "Help & Support", + "title": "帮助与支持", "resources": true }, "styleguide": { - "title": "Docs Style Guide", - "intro": "Design & Layout Patterns For Documentation" + "title": "文档风格指南", + "intro": "文档的设计与布局模式" } } diff --git a/public/features.jade b/public/features.jade index 3554aee1ff..30d5bd891e 100644 --- a/public/features.jade +++ b/public/features.jade @@ -1,4 +1,3 @@ - .grid-fluid.l-space-bottom-8 .c3.text-center @@ -9,7 +8,9 @@ Angular 2 is dramatically faster than Angular 1 with support for fast initial loads through server-side pre-rendering, offline compile for fast startup, and ultrafast change detection and view caching for smooth virtual scrolling and snappy view transitions. - + h3.text-headline.text-uppercase 速度与性能 + p.text-body. + Angular 2的性能相对Angular 1已经有了戏剧性的提升，包括通过服务端渲染完成初次加载、离线编译来获得更快的启动速度、超快的变更检测，以及通过视图缓存来实现平滑的虚拟滚动和干净利落的场景切换。 .grid-fluid.l-space-bottom-8 .c3.text-center @@ -20,6 +21,9 @@ Make your intention clear using natural, easy-to-write syntax. Reduce complexity for your team: new, structure-rich templates are readable and easy to understand at a glance. + h3.text-headline.text-uppercase 简单而丰富 + p.text-body. + 通过自然、易写的语法，清晰表达你的意图。降低开发组的复杂度：新的、富结构化的模板富有可读性，容易被快速理解。 @@ -33,7 +37,9 @@ Android, and iOS. Angular Universal provides for server-side rendering for fast initial views on mobile web. Ionic and NativeScript let you build hybrid and native UI mobile apps. Web worker support keeps your app UI fully responsive no matter how heavy the load. - + h3.text-headline.text-uppercase 跨平台 + p.text-body. + 学习Angular 2让你有了一个工具，可以构建桌面应用、移动网页、安卓版应用、iOS版应用。Angular Universal提供了一个服务端渲染工具，可以快速的在移动设备上提供起始页面。Ionic和NativeScript让你构建混合式（hybrid）和原生界面的移动应用。Web worker让你的应用界面保持迅速及时的响应，而不用担心负载过重。 .grid-fluid.l-space-bottom-8 @@ -44,7 +50,9 @@ p.text-body. Upgrade your Angular 1 application at your own pace by mixing in Angular 2 components, directives, pipes, services and more by using the ngUpgrade APIs. - + h3.text-headline.text-uppercase 从Angular 1无缝升级 + p.text-body. + 使用ngUpgrade API，可以一小步一小步的把Angular 2的组件、指令、管道、服务等混入Angular1应用，完成无缝平滑升级。 .grid-fluid.l-space-bottom-8 @@ -56,7 +64,9 @@ The choice of language is up to you. In addition to full support for ES5, TypeScript, and Dart, Angular 2 works equally well with ES2015 and other languages that compile to JavaScript. - + h3.text-headline.text-uppercase 灵活的开发 + p.text-body. + 选择什么语言取决于你。它不仅完全支持ES5、TypeScript和Dart，Angular 2在ES2015和其他能编译成JavaScript的语言下也能工作得一样好。 .grid-fluid.l-space-bottom-8 @@ -72,7 +82,13 @@ lazy loading for mobile users. If you already use routing from a prior version of Angular, you can easily migrate to Angular 2 routing. - + h3.text-headline.text-uppercase 全面的路由 + p.text-body. + 经过精密设计的视图： + 映射URL路径到应用组件， + 使用嵌套路由、兄弟路由等高级特性。 + 为移动用户，Angular 2提供了卡片式导航、转场动画和延迟加载特性。 + 如果你还在使用来自Angular老版本的路由，你可以轻易迁移到Angular 2路由。 .grid-fluid.l-space-bottom-8 @@ -85,6 +101,10 @@ allowing you to maintain modular applications without writing tedious glue code. Dependency injection helps you write tests by making it easy to inject test doubles. + h3.text-headline.text-uppercase 依赖注入 + p.text-body. + Angular 2具有强力、易于使用的依赖注入机制，允许你管理模块化的应用，而不用写枯燥的胶水代码。 + 通过让注入测试副本，依赖注入可以帮助你更容易的写测试。 .grid-fluid.l-space-bottom-8 @@ -95,7 +115,10 @@ p.text-body. In addition to fully supporting latest versions of Chrome, Edge, Firefox, IE, and Safari, Angular 2 is also tested for older browsers including IE9+ and Android 4.1+. - + .c7 + h3.text-headline.text-uppercase 老旧浏览器支持 + p.text-body. + 除了完全支持Chrome、Edge、Firefox、IE和Safari的最新版本外，Angular2还支持老旧浏览器，如IE9+、Android 4.1+。 .grid-fluid.l-space-bottom-8 @@ -110,7 +133,11 @@ intelligently handle changes to animations in response to user events. Plan complex animation flows by sequencing the behavior of an entire website on a timeline. - + h3.text-headline.text-uppercase 动画 + p.text-body. + [开发中]通过简单易用的Angular事件，在移动和桌面环境下深入底层提供动画支持。 + 你可以使用CSS、JavaScript和Web Animations API来智能处理动画的变化来响应用户事件。 + 还计划通过控制整个网站在时间线上的一连串行为来支持复杂的动画流程。 .grid-fluid.l-space-bottom-8 @@ -126,6 +153,13 @@ Generate static applications for each locale. Easily promote accessibility via screen readers and assistive devices by automatically generating appropriate ARIA attributes. + h3.text-headline.text-uppercase 国际化(I18N)与可访问性 + p.text-body(ng-non-bindable). + [开发中] 抵达所有用户。可以在Angular插值表达式中使用熟悉的ICU消息格式，包括复数化和性别化规则。 + 自动提取消息、伪本地化和翻译更新。 + 为每一个区域（locale）生成一个静态应用。 + 通过自动生成相应的ARIA属性，可以更容易的通过屏幕阅读器和辅助设备提升可访问性。 + diff --git a/public/index.jade b/public/index.jade index fa9bb30168..6cff2aff64 100644 --- a/public/index.jade +++ b/public/index.jade @@ -4,21 +4,29 @@ div(layout-gt-sm='row' style='margin: 0 -24px') div(flex=33 style='padding:0 24px') h3.text-headline Fast p.text-body Angular computes updates based on changes to data, not DOM, for fast updates that scale to the largest data sets with minimal memory overhead. + h3.text-headline 快速 + p.text-body Angular基于数据的变更来计算更新，而不是DOM，当处理极大规模的数据集时，能以很小的内存开销提供快速更新。 div(flex=33 style='padding:0 24px') h3.text-headline Mobile p.text-body With Angular Universal for server-side rendering and Web Workers for smooth scrolling and transitions, Angular 2 solves the core challenges in mobile web performance. + h3.text-headline 移动优先 + p.text-body 通过Angular Universal提供服务端渲染，通过Web Workers提供平滑的滚动和转场效果。据此，Angular 2解决了移动网站性能问题的核心挑战。 div(flex=33 style='padding:0 24px') h3.text-headline Flexible p.text-body Supports several languages including plain JavaScript, TypeScript, and Dart. Also supports both object-style data structure with POJO data-binding and functional reactive style with unidirectional data flow and support for observables and immutable data structures. + h3.text-headline 弹性 + p.text-body 支持一系列语言，包括普通JavaScript、TypeScript和Dart。同样支持基于POJO数据绑定的对象式数据结构和基于单向数据流的函数式响应式（reactive）风格，还支持基于监听（observable）和不可变（immutable）对象的数据结构。 br div h3.text-headline The Basics p.text-body In Angular you display data by defining components. Data in your component classes is automatically available to display in your templates or control how they render as in the example below. + h3.text-headline 基础 p.text-body While this example uses TypeScript, Angular works equally well with ES5, ES6 and Dart as well. + p.text-body 虽然这个范例使用了TypeScript，但是Angular在ES5、ES6和Dart中也能很好的工作。 p(style='text-align:right') md-button.md-primary(href='/resources/live-examples/homepage-hello-world/ts/plnkr.html' target='_blank') span.icon-open-in-new - | Try in Plunker + | 在Plunker中试用 +makeTabs(` ../docs/_fragments/homepage-hello-world/ts/app/hello_world.html, ../docs/_fragments/homepage-hello-world/ts/app/hello_world.ts, @@ -32,12 +40,15 @@ div br div h3.text-headline Structuring Apps With Components + h3.text-headline 应用程序的组件式结构 p.text-body Groups of coordinated components divide the responsibilities of our application. This ToDo list app has a separate component for the form, the list, and the core app logic. Where the previous example component referenced templates in separate files, this one shows using inline templates. + p.text-body 我们把应用的职责拆分成一组相互合作的组件。这个TODO List应用包括一组独立的组件，它们组成了表单、列表和核心应用逻辑。虽然前面的范例组件使用了独立文件来存放模板，但这个范例将使用内联模板。 p.text-body Defining types as we do here in Todo.ts communicates our intention to other developers, helps us find bugs in our code, and lets IDEs do more work for us in refactoring, code navigation, and code completion. + p.text-body 就像我们在Todo.ts中的做法，定义类型（types）可以像其他开发者展示我们的意图，帮助我们发现代码中的BUG，以及让我们的IDE更好的帮助我们：重构、代码导航、以及代码自动完成（Code completion）。 p(style='text-align:right') md-button.md-primary(href='/resources/live-examples/homepage-todo/ts/plnkr.html' target='_blank') span.icon-open-in-new - | Try in Plunker + | 在Plunker中试用 +makeTabs(` ../docs/_fragments/homepage-todo/ts/app/todo_app.ts, ../docs/_fragments/homepage-todo/ts/app/todo_form.ts, @@ -55,12 +66,15 @@ div br div h3.text-headline Advanced Component Communication + h3.text-headline 高级组件通讯 p.text-body This demo shows an efficient implementation of tabs/panes. Each pane is only instantiated while it is visible. Panes which are not visible are released and do not have associated memory, DOM and change detection cost. + p.text-body 这个范例展示了一个高效的页标签（tabs）/面板（panes）实现。只有可见的面板才会被实例化，不可见的则被释放，并且没有相关的内存、DOM和变更检测的开销。 p.text-body The demo also showcases dependency injection and the ability of one component to query for other components. Such queries automatically update even as detail panes are added. This allows the tabs component to work with ngFor without any special knowledge of it. + p.text-body 这个范例也示范了依赖注入和从一个组件查询其它组件的能力。这些查询会自动更新 —— 即使加入了新的面板也能正常工作。这让tabs组件可以很好的和ngFor协作，而不需要了解特别的知识。 p(style='text-align:right') md-button.md-primary(href='/resources/live-examples/homepage-tabs/ts/plnkr.html' target='_blank') span.icon-open-in-new - | Try in Plunker + | 在Plunker中试用 +makeTabs(` ../docs/_fragments/homepage-tabs/ts/app/di_demo.ts, ../docs/_fragments/homepage-tabs/ts/app/ui_tabs.ts, diff --git a/public/news.jade b/public/news.jade index 02de0381e1..2f96d9070b 100644 --- a/public/news.jade +++ b/public/news.jade @@ -1,6 +1,7 @@ .grid-fluid.l-space-bottom-2 .c12.text-center h3.text-headline.text-uppercase Core Team + h3.text-headline.text-uppercase 核心开发组 .clear .grid-fluid diff --git a/public/support.jade b/public/support.jade index 34fc2656a6..5deaa9b70e 100644 --- a/public/support.jade +++ b/public/support.jade @@ -7,7 +7,7 @@ p angular2 p angular2-forms p angular2-template - + hr .grid-fluid @@ -15,7 +15,7 @@ figure img(src="/resources/images/support/gitter-logo.png" alt="Us" style="width:240px;") .c8 - p Community driven real time chat + p 由社区驱动的实时聊天 // hr @@ -33,13 +33,13 @@ figure img(src="/resources/images/support/github-logo.png" alt="Us" style="width:240px;" ) .c8 - p File Angular 2 issues at our GitHub Repository + p Angular 2的问题归档在我们的GitHub仓库 - hr + hr .grid-fluid .c4 figure img(src="/resources/images/support/reddit-logo.png" alt="Us" style="width:240px;" ) .c8 - p Resources, articles, discussions & more: /r/Angular2 + p 资源, 文档, 讨论以及更多内容在: /r/Angular2 diff --git a/public/survey.html b/public/survey.html index 296ad5feab..086c13085d 100644 --- a/public/survey.html +++ b/public/survey.html @@ -4,7 +4,7 @@ - 2016 Angular Usage Trends Survey + 2016 Angular使用统计调查 '); +//# sourceMappingURL=angular.min.js.map From cd1206f72320491b1d48c3f149ae8d266f97388b Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Tue, 12 Apr 2016 19:29:55 +0800 Subject: [PATCH 7/9] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E7=94=A8=E8=AF=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docs/ts/latest/quickstart.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index f4d5c06157..9f84d31179 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -846,4 +846,4 @@ figure.image-display Join us on the [Tour of Heroes Tutorial](./tutorial)! - 来吧，开始我们的[探险之旅](./tutorial)！ + 来吧，开始我们的[英雄之旅](./tutorial)！ From a70e665169414017a3c32f52476980162a4458da Mon Sep 17 00:00:00 2001 From: "Zhimin(Rex) YE" Date: Tue, 12 Apr 2016 22:52:13 +0100 Subject: [PATCH 8/9] =?UTF-8?q?=E9=83=A8=E5=88=86=E7=BF=BB=E8=AF=91?= =?UTF-8?q?=E4=BA=86=E8=AF=8D=E6=B1=87=E8=A1=A8=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docs/ts/latest/glossary.jade | 70 ++++++++++++++++++++++++++--- 1 file changed, 64 insertions(+), 6 deletions(-) diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade index 3494ffbd00..119cc60d6f 100644 --- a/public/docs/ts/latest/glossary.jade +++ b/public/docs/ts/latest/glossary.jade @@ -61,35 +61,50 @@ include _util-fns .l-main-section :marked ## Barrel - ## 桶（Barrel） + ## 封装桶（Barrel） .l-sub-section :marked A **barrel** is an Angular library module consisting of a logical grouping of single-purpose modules such as `Component` and `Directive`. + 一个**封装桶**是一个模块库，包含了按照逻辑分组到一起的单一用途的多个模块，比如组件和指令。 + Familiar barrels include `angular2/core`, `angular2/common`, `angular2/platform/browser`, `angular2/http`, and `angular2/router`. + 你熟悉的封装桶包含`angular2/core`, `angular2/common`, `angular2/platform/browser`, + `angular2/http`, 和 `angular2/router`. + Barrels are packaged and shipped as [**bundles**](#bundle) that we may load with script tags in our `index.html`. + 封装桶被当做捆绑包[**bundles**](#bundle)打包和发布，以便我们通过Script标签在`index.html`页面里面装载。 + The script, `angular2.dev.js`, is a bundle. + `angular2.dev.js`脚本就是一个捆绑包（bundle） Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)". - + 获取更多关于模块，封装桶和捆绑包的信息："[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)" :marked ## Binding + ## 绑定 .l-sub-section :marked Almost always refers to [Data Binding](#data-binding) and the act of binding an HTML object property to a data object property. + 几乎都是指的数据绑定[Data Binding](#data-binding)和将一个HTML对象属性绑定到一个数据对象属性的行为。 + May refer to a [Dependency Injection](#dependency-injection) binding between a "token" or "key" and a dependency [provider](#provider). This more rare usage should be clear in context. + 有可能指的是依赖注入[Dependency Injection](#dependency-injection)在一个标志(Token)或钥匙(Key)和一个依赖提供商Dependency [provider](#provider)之间的绑定。 + 这个用法很少，而且一般都应该在上下文中明确标示。 + :marked ## Bootstrap + ## 引导程序 .l-sub-section :marked We launch an Angular application by "bootstrapping" it with the `bootstrap` method. @@ -97,58 +112,94 @@ include _util-fns and optionally registers service [providers](#provider) with the [dependency injection system](#dependency-injection). + 要启动一个Angular的应用程序，我们通过一个名叫`bootstrap`的函数方法来引导装入。这个`bootstrap`函数方法会识别应用程序的顶级“根”组件"root" [Component](#component)， + 并通过依赖注入系统[dependency injection system](#dependency-injection)选择性的注册服务提供商service [providers](#provider)。 + One can bootstrap multiple apps in the same `index.html`, each with its own top level root. + 你可以在同一个`index.html`启动多个程序，每个程序都有自己的顶级根组件。 :marked ## Bundle + ## 捆绑包 .l-sub-section :marked Angular JavaScript libraries are shipped in **bundles** within an **npm package** such as [angular2](https://www.npmjs.com/package/angular2). + Angular Javascript库是以一个**NPM包**（**npm package**），捆绑多个**捆绑包**（**bundles**）的形式发布的。 + 比如[angular2](https://www.npmjs.com/package/angular2). + The scripts `angular2.dev.js`, `http.js`, `router.js`, and `Rx.js` are familiar examples of bundles. + `angular2.dev.js`, `http.js`, `router.js`, 和 `Rx.js`等脚本文件是比较常见的捆绑包（bundle）例子。 + + A bundle contains one more more [**barrels**](#barrel) and each barrel contains a collection of logically related [modules](#module) + 一个捆绑包（bundle）包含了一个或多个**封装桶**[**barrels**](#barrel) + Familiar barrels include `angular2/core`, `angular2/common`, `angular2/platform/browser`, `angular2/http`, `angular2/router`. + 常见的封装桶包括`angular2/core`, `angular2/common`, `angular2/platform/browser`, + `angular2/http`, `angular2/router`等。 + Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)". + 获取更多关于模块，封装头和捆绑包的知识："[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)"。 .l-main-section :marked ## camelCase + ## 驼峰式命名法 .l-sub-section :marked The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter _except the first letter which is a lowercase letter_. - + + 除了首字母外小写外，每一个单词或简写以大写字母开始的编写词汇或短语的方法叫做驼峰式命名法。 + Function, property, and method names are typically spelled in camelCase. Examples include: `square`, `firstName` and `getHeroes`. - + + 函数、属性和方法名字一般都是以驼峰式大小写的方式命名。比如`square`, `firstName` 和 `getHeroes`等。 + This form is also known as **lower camel case**, to distinguish it from **upper camel case** which we call [PascalCase](#pascalcase). When we write "camelCase" in this documentation we always mean *lower camel case*. + 这种形式也被叫做**小驼峰式命名法**（**lower camel case**），以便区分**大驼峰式命名法**（我们叫帕斯卡命名法）。 + 当我们文档中使用“小驼峰式命名法” （“camelCase”）的时候，我们永远指的是小驼峰命名法。 + :marked ## Component + ## 组件 .l-sub-section :marked An Angular class responsible for exposing data to a [View](#view) and handling most of the view’s display and user-interaction logic. + 组件是一个用来展示数据到视图[View](#view)，并处理几乎所有视图显示和用户互动逻辑的Angular类（Angular Class）。 + The Component is one of the most important building blocks in the Angular system. It is, in fact, an Angular [Directive](#directive) with a companion [Template](#template). + 组件是Angular系统的最重要的基本单位之一。 + 它其实是一个拥有模板[Template](#template)的指令[Directive](#directive)。 + The developer applies the `#{atSym}Component` !{decorator} to the component class, thereby attaching to the class the essential component metadata that Angular needs to create a component instance and render it with its template as a view. + 开发人员在使用`#{atSym}Component` !{修饰器}!{decorator}来修饰一个组件类，就是把这个类附加到基本组件元数据（essential component metadata）上面。 + Angular需要利用这个基本组件元数的信息，来建立一个组件实例，把一个组件的模板作为视图画出来。 + Those familiar with "MVC" and "MVVM" patterns will recognize the Component in the role of "Controller" or "View Model". + + 那些熟悉 "MVC" 和 "MVVM" 架构模式的应该能意识到组件充当了控制和视图模型的角色。 // #enddocregion b-c // #docregion d1 @@ -156,16 +207,23 @@ include _util-fns .l-main-section :marked ## dash-case + ## 横杠分隔命名法 .l-sub-section :marked The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-). - + + 使用横杠来分隔每个单词来编写词汇或短语的方法叫做横杠分隔命名法 + Directive selectors and the root of filenames are often spelled in dash-case. Examples include: `my-app` and the `hero-list.component.ts`. - + + 指令的选择器和文件名通常都是通过横杠分隔命名法来命名的。比如`my-app` and the `hero-list.component.ts` + This form is also known as [kebab-case](#kebab-case). + 这种命名法也被叫做可芭比命名法[kebab-case](#kebab-case) :marked ## Data Binding + ## 数据绑定 .l-sub-section :marked Applications display data values to a user and respond to user From 4ed712b169f7f6b613b2e232ebf41d3f7f5598b7 Mon Sep 17 00:00:00 2001 From: "Zhimin(Rex) YE" Date: Tue, 12 Apr 2016 23:15:09 +0100 Subject: [PATCH 9/9] Added Data binding translation to Glossary. --- public/docs/ts/latest/glossary.jade | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade index 119cc60d6f..9e1ada2f2d 100644 --- a/public/docs/ts/latest/glossary.jade +++ b/public/docs/ts/latest/glossary.jade @@ -229,17 +229,25 @@ include _util-fns Applications display data values to a user and respond to user actions (clicks, touches, keystrokes). + 应用程序一般会显示数据给用户，并对用户的操作（点击、触屏、按键）做出回应。 + We could push application data values into HTML, attach event listeners, pull changed values from the screen, and update application data values ... all by hand. + + 我们自己处理这些操作：将数据显示到HTML网页，配加事件监听器，从屏幕获取数据变化，并更新数据等等。。。 Or we could declare the relationship between an HTML widget and an application data source ... and let a data binding framework handle the details. + + 或者，我们可以声明HTML小件和数据源的关系等，让一个数据绑定的框架工具来处理所有细节。 Data Binding is that second approach. Angular has a rich data binding framework with a variety of data binding operations and supporting declaration syntax. + + 数据绑定是第二种方法。Angular有一个非常强大的数据绑定框架工具，具有多种用来数据绑定操作，支持声明语法规则。 The many forms of binding include: * [Interpolation](template-syntax.html#interpolation) @@ -250,8 +258,18 @@ include _util-fns * [Style Binding](template-syntax.html#style-binding) * [Two-way data binding with ngModel](template-syntax.html#ng-model) + 绑定模式包括： + * [插补Interpolation](template-syntax.html#interpolation) + * [属性绑定Property Binding](template-syntax.html#property-binding) + * [事件绑定Event Binding](template-syntax.html#event-binding) + * [特征绑定Attribute Binding](template-syntax.html#attribute-binding) + * [类绑定Class Binding](template-syntax.html#class-binding) + * [样式绑定Style Binding](template-syntax.html#style-binding) + * [使用ngModel进行双向数据绑定Two-way data binding with ngModel](template-syntax.html#ng-model) + Learn more about data binding in the [Template Syntax](template-syntax.html#data-binding) chapter. + 到[模板语法Template Syntax](template-syntax.html#data-binding)章节获取更多关于数据绑定的知识。 // #enddocregion d1