From 0976dfe54cdba53fa96ebe0ce453a8350f8fc01c Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Fri, 9 Mar 2018 13:36:16 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=E7=BF=BB=E8=AF=91?= =?UTF-8?q?=E5=AD=97=E5=85=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aio/tools/translator/dict-latest.json | 3184 ++++++++++++++++++++++++- 1 file changed, 3117 insertions(+), 67 deletions(-) diff --git a/aio/tools/translator/dict-latest.json b/aio/tools/translator/dict-latest.json index 53b3808ec6..14b4e32f0e 100644 --- a/aio/tools/translator/dict-latest.json +++ b/aio/tools/translator/dict-latest.json @@ -106,7 +106,7 @@ }, { "original": "This example filters the `title` property to uppercase.", - "translation": "在这个例子中，我们把`title`属性过滤成了大写形式。", + "translation": "这个例子中把`title`属性过滤成了大写形式。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/ajs-quick-reference.md" }, { @@ -141,7 +141,7 @@ }, { "original": "Angular has true template input variables that are explicitly defined using the `let` keyword.", - "translation": "在Angular中，我们有了真正的模板输入变量，它需要使用`let`关键字进行明确定义。", + "translation": "Angular 有了真正的模板输入变量，它需要使用`let`关键字进行明确定义。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/ajs-quick-reference.md" }, { @@ -176,7 +176,7 @@ }, { "original": "Angular doesn't have a bootstrap directive.\n To launch the app in code, explicitly bootstrap the application's root module (`AppModule`)\n in `main.ts`\n and the application's root component (`AppComponent`) in `app.module.ts`.", - "translation": "Angular 没有引导指令。\n 我们总是通过显式调用一个`bootstrap`函数，并传入应用模块的名字(`AppComponent`)来启动应用。", + "translation": "Angular 没有引导指令。\n 总是要通过显式调用一个`bootstrap`函数，并传入应用模块的名字(`AppComponent`)来启动应用。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/ajs-quick-reference.md" }, { @@ -701,7 +701,7 @@ }, { "original": "For more information on modules, see [NgModules](guide/ngmodules).", - "translation": "要了解关于模块的更多知识，参见[NgModules](guide/ngmodule)。", + "translation": "要了解关于模块的更多知识，参见[NgModules](guide/ngmodules)。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/ajs-quick-reference.md" }, { @@ -1551,7 +1551,7 @@ }, { "original": "NgModules are a big deal.\nThis page introduces modules; the [NgModules](guide/ngmodules) pages \nrelating to NgModules covers them in detail.", - "translation": "NgModules 很重要。这里只是简单介绍，在 [NgModules](guide/ngmodule)中会做深入讲解。", + "translation": "NgModules 很重要。这里只是简单介绍，在 [NgModules](guide/ngmodules)中会做深入讲解。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/architecture.md" }, { @@ -1696,7 +1696,7 @@ }, { "original": "Learn more from the [NgModules](guide/ngmodules) page.", - "translation": "更多信息，参见 [NgModules](guide/ngmodule)。", + "translation": "更多信息，参见 [NgModules](guide/ngmodules)。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/architecture.md" }, { @@ -2376,7 +2376,7 @@ }, { "original": "_Directives_ must be declared in [Angular Modules](guide/ngmodules) in the same manner as _components_.", - "translation": "和**组件**一样，这些**指令**也必须在[Angular模块](guide/ngmodule)中进行声明。", + "translation": "和**组件**一样，这些**指令**也必须在[Angular模块](guide/ngmodules)中进行声明。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/attribute-directives.md" }, { @@ -3271,7 +3271,7 @@ }, { "original": "Added two plunkers that each test _one simple component_ so you can write a component test plunker of your own: one for the QuickStart seed's `AppComponent` and another for the Testing guide's `BannerComponent`.\nLinked to these plunkers in \"Testing\" and \"Setup anatomy\" guides.", - "translation": "添加了两个plunker例子，每个都测试一个简单的组件，以便你可以自己在plunker中写组件测试：一个用于测试快速起步中的`AppComponent`，另一个用于测试“测试”章节的`BannerComponent`。\n并在[测试](guide/testing#live-examples)和[环境设置剖析](guide/setup-systemjs-anatomy)中链接到它们。", + "translation": "添加了两个plunker例子，每个都测试一个简单的组件，以便你可以自己在plunker中写组件测试：一个用于测试快速起步中的`AppComponent`，另一个用于测试“测试”章节的`BannerComponent`。\n并在“测试”和“环境设置剖析”中链接到它们。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/change-log.md" }, { @@ -3336,7 +3336,12 @@ }, { "original": "The updated TypeScript to JavaScript guide explains how to write apps in ES6/7\nby translating the common idioms in the TypeScript documentation examples\n(and elsewhere on the web) to ES6/7 and ES5.", - "translation": "更新了“[从TypeScript到JavaScript](guide/ts-to-js)”烹饪宝典，解释如何使用ES6/7编写应用。\n将TypeScript文档示例中（以及网站其它地方）的习惯用法翻译成ES6/7和ES5。", + "translation": "更新了“从TypeScript到JavaScript”，以解释如何使用ES6/7编写应用。\n将TypeScript文档示例中（以及网站其它地方）的习惯用法翻译成ES6/7和ES5。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/change-log.md" + }, + { + "original": "This was [removed in August 2017](https://github.com/angular/angular/pull/18694) but can still be\nviewed in the [v2 documentation](https://v2.angular.io/docs/ts/latest/cookbook/ts-to-js.html).", + "translation": "本章已经 [于2017年8月移除](https://github.com/angular/angular/pull/18694)，\n不过仍然可以在[第二版的文档中](https://v2.angular.io/docs/ts/latest/cookbook/ts-to-js.html)看到。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/change-log.md" }, { @@ -3441,7 +3446,7 @@ }, { "original": "All guided samples with routing use the _Routing Module_ and prose content has been updated,\nmost conspicuously in the\n[NgModule](guide/ngmodules) guide and [NgModule FAQ](guide/ngmodule-faq) guide.", - "translation": "所有使用路由的例子都使用**路由模块**，相关内容也被更新。更新最多的是[Angular模块（NgModule）](guide/ngmodule)章和[Angular模块常见问题](guide/ngmodule-faq)烹饪书。", + "translation": "所有使用路由的例子都使用**路由模块**，相关内容也被更新。更新最多的是[Angular模块（NgModule）](guide/ngmodules)章和[Angular模块常见问题](guide/ngmodule-faq)烹饪书。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/change-log.md" }, { @@ -4666,7 +4671,7 @@ }, { "original": "A *provider* is something that can create or deliver a service.\nAngular creates a service instance from a class provider by using `new`.\nRead more about providers in the [Dependency Injection](guide/dependency-injection#register-providers-ngmodule)\nguide.", - "translation": "*提供商*是用来新建或者交付服务的。\nAngular拿到“类提供商”之后，会通过`new`操作来新建服务实例。\n从[依赖注入](guide/dependency-injection#injector-providers)一章可以学到关于提供商的更多知识。", + "translation": "*提供商*是用来新建或者交付服务的。\nAngular拿到“类提供商”之后，会通过`new`操作来新建服务实例。\n从[依赖注入](guide/dependency-injection#register-providers-ngmodule)一章可以学到关于提供商的更多知识。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/dependency-injection-in-action.md" }, { @@ -5431,7 +5436,7 @@ }, { "original": "Obtaining a component reference is a bit tricky in Angular.\nAlthough an Angular application is a tree of components,\nthere is no public API for inspecting and traversing that tree.", - "translation": "在Angular里，获取一个组件的引用比较复杂。虽然Angular应用程序是一个组件树，但它没有公开的API来在该树中巡查和穿梭。", + "translation": "在Angular里，获取一个组件的引用比较复杂。虽然Angular应用程序是一个组件树，但它没有公共API来在该树中巡查和穿梭。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/dependency-injection-in-action.md" }, { @@ -5441,7 +5446,7 @@ }, { "original": "There is no public API for acquiring a parent reference.\nBut because every component instance is added to an injector's container,\nyou can use Angular dependency injection to reach a parent component.", - "translation": "但没有公开的API来获取父组件的引用。但是因为每个组件的实例都被加到了依赖注入器的容器中，可以使用Angular依赖注入来找到父组件。", + "translation": "但没有公共API来获取父组件的引用。但是因为每个组件的实例都被加到了依赖注入器的容器中，可以使用Angular依赖注入来找到父组件。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/dependency-injection-in-action.md" }, { @@ -9221,7 +9226,7 @@ }, { "original": "* [NgModules](guide/glossary#ngmodule).\nFor details and examples, see the [NgModules](guide/ngmodules) page.", - "translation": "[Angular 模块](guide/glossary#ngmodule)，见[Angular 模块](guide/ngmodule)。", + "translation": "[Angular 模块](guide/glossary#ngmodule)，见[Angular 模块](guide/ngmodules)。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/glossary.md" }, { @@ -11631,7 +11636,7 @@ }, { "original": "A module can list another module among its `exports`, in which case\n all of that module's public components, directives, and pipes are exported.", - "translation": "一个模块可以把另一个模块加入自己的`exports`列表中，这时，另一个模块的所有公开组件、指令和管道都会被导出。", + "translation": "一个模块可以把另一个模块加入自己的`exports`列表中，这时，另一个模块的所有公共组件、指令和管道都会被导出。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/ngmodule-api.md" }, { @@ -11876,7 +11881,7 @@ }, { "original": "Export [declarable](guide/bootstrapping#the-declarations-array) classes that components in _other_ NgModules\nare able to reference in their templates. These are your _public_ classes.\nIf you don't export a declarable class, it stays _private_, visible only to other components\ndeclared in this NgModule.", - "translation": "导出那些*其它模块*希望在自己的模板中引用的[可声明类](guide/ngmodule-faq#q-declarable)。这些也是你的*公开*类。\n如果你不导出某个类，它就是*私有的*，只对当前模块中声明的其它组件可见。", + "translation": "导出那些*其它模块*希望在自己的模板中引用的[可声明类](guide/ngmodule-faq#q-declarable)。这些也是你的*公共*类。\n如果你不导出某个类，它就是*私有的*，只对当前模块中声明的其它组件可见。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/ngmodule-faq.md" }, { @@ -12446,7 +12451,7 @@ }, { "original": "The `SharedModule` may re-export other widget modules, such as `CommonModule`,\n`FormsModule`, and NgModules with the UI controls that you use most widely.", - "translation": "`SharedModule`可以重新导出其它[小部件模块](guide/ngmodule-faq#widget-feature-module)，比如`CommonModule`、`FormsModule`和提供你广泛使用的UI控件的那些模块。", + "translation": "`SharedModule`可以重新导出其它小部件模块，比如`CommonModule`、`FormsModule`和提供你广泛使用的UI控件的那些模块。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/ngmodule-faq.md" }, { @@ -15861,7 +15866,7 @@ }, { "original": "Adding the configured `RouterModule` to the `AppModule` is sufficient for simple route configurations.\nAs the application grows, you'll want to refactor the routing configuration into a separate file\nand create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicated to the purpose\nof routing in feature modules.", - "translation": "作为简单的路由配置，将添加配置好的`RouterModule`到`AppModule`中就足够了。\n随着应用的成长，我们将需要将路由配置重构到单独的文件，并创建**[路由模块](guide/router#routing-module)** - 一种特别的、专门为特性模块的路由器服务的**服务模块**。", + "translation": "作为简单的路由配置，将添加配置好的`RouterModule`到`AppModule`中就足够了。\n随着应用的成长，我们将需要将路由配置重构到单独的文件，并创建**[路由模块](#routing-module)** - 一种特别的、专门为特性模块的路由器服务的**服务模块**。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/router.md" }, { @@ -16161,22 +16166,22 @@ }, { "original": "* Separates routing concerns from other application concerns.", - "translation": "把路由这个关注点从其它应用类关注点中分离出去", + "translation": "把路由这个关注点从其它应用类关注点中分离出去。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/router.md" }, { "original": "* Provides a module to replace or remove when testing the application.", - "translation": "测试特性模块时，可以替换或移除路由模块", + "translation": "测试特性模块时，可以替换或移除路由模块。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/router.md" }, { "original": "* Provides a well-known location for routing service providers including guards and resolvers.", - "translation": "为路由服务提供商（包括守卫和解析器等）提供一个共同的地方", + "translation": "为路由服务提供商（包括守卫和解析器等）提供一个共同的地方。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/router.md" }, { "original": "* Does **not** declare components.", - "translation": "**不要**[声明组件](guide/ngmodule-faq#routing-module)", + "translation": "**不要**声明组件。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/router.md" }, { @@ -19716,7 +19721,7 @@ }, { "original": "Compiles the application with the [JIT compiler](guide/glossary#jit) and\n [bootstraps](guide/bootstrapping)\n the application's main module (`AppModule`) to run in the browser.\n The JIT compiler is a reasonable choice during the development of most projects and\n it's the only viable choice for a sample running in a _live-coding_ environment like Stackblitz.\n You'll learn about alternative compiling and [deployment](guide/deployment) options later in the documentation.", - "translation": "使[即时 (JiT) 编译器](guide/glossary#jit)用编译应用并且在浏览器中[启动](guide/bootstrapping#main \"启动应用\")并运行应用。\n 对于大多数项目的开发，这都是合理的选择。而且它是在像 Stackblitz 这样的*在线编程*环境中运行例子的唯一选择。\n 你将在本文档中学习其他编译和开发选择。", + "translation": "使[即时 (JiT) 编译器](guide/glossary#jit)用编译应用并且在浏览器中[启动](guide/bootstrapping \"启动应用\")并运行应用。\n 对于大多数项目的开发，这都是合理的选择。而且它是在像 Stackblitz 这样的*在线编程*环境中运行例子的唯一选择。\n 你将在本文档中学习其他编译和开发选择。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/setup.md" }, { @@ -24826,7 +24831,7 @@ }, { "original": "Sometimes the public name of an input/output property should be different from the internal name.", - "translation": "有时需要让输入/输出属性的公开名字不同于内部名字。", + "translation": "有时需要让输入/输出属性的公共名字不同于内部名字。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/template-syntax.md" }, { @@ -24841,7 +24846,7 @@ }, { "original": "Fortunately, you can have a public name for the property that meets conventional expectations,\nwhile using a different name internally.\nIn the example immediately above, you are actually binding *through the* `myClick` *alias* to\nthe directive's own `clicks` property.", - "translation": "幸运的是，可以使用约定俗成的公开名字，同时在内部使用不同的名字。\n在上面例子中，实际上是把`myClick`这个别名指向了指令自己的`clicks`属性。", + "translation": "幸运的是，可以使用约定俗成的公共名字，同时在内部使用不同的名字。\n在上面例子中，实际上是把`myClick`这个别名指向了指令自己的`clicks`属性。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/template-syntax.md" }, { @@ -24851,7 +24856,7 @@ }, { "original": "You can also alias property names in the `inputs` and `outputs` arrays.\nYou write a colon-delimited (`:`) string with\nthe directive property name on the *left* and the public alias on the *right*:", - "translation": "也可在`inputs`和`outputs`数组中为属性指定别名。\n可以写一个冒号 (`:`) 分隔的字符串，*左侧*是指令中的属性名，*右侧*则是公开的别名。", + "translation": "也可在`inputs`和`outputs`数组中为属性指定别名。\n可以写一个冒号 (`:`) 分隔的字符串，*左侧*是指令中的属性名，*右侧*则是公共别名。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/template-syntax.md" }, { @@ -26701,7 +26706,7 @@ }, { "original": "For more information, see [NgModules](guide/ngmodules).", - "translation": "要了解更多，请参阅[NgModules](guide/ngmodule)页。", + "translation": "要了解更多，请参阅[NgModules](guide/ngmodules)页。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/guide/upgrade.md" }, { @@ -29369,6 +29374,51 @@ "translation": "Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/marketing/docs.md" }, + { + "original": "
Get a Glimpse of Angular
", + "translation": "
Angular 走马观花
", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/marketing/docs.md" + }, + { + "original": "

A quick look at an Angular \"hello world\" application.

", + "translation": "

快速体验 Angular 的 \"hello world\" 应用。

", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/marketing/docs.md" + }, + { + "original": "

Angular in Action

", + "translation": "

体验 Angular

", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/marketing/docs.md" + }, + { + "original": "
Get Going with Angular
", + "translation": "
开始使用 Angular
", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/marketing/docs.md" + }, + { + "original": "

Get going on your own environment with the Quickstart.

", + "translation": "

跟随\"快速上手\"构建你的开发环境

", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/marketing/docs.md" + }, + { + "original": "

Quickstart

", + "translation": "

快速上手

", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/marketing/docs.md" + }, + { + "original": "
Fundamentals
", + "translation": "
基本原理
", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/marketing/docs.md" + }, + { + "original": "

Learn Angular application fundamentals, starting with an architecture overview.

", + "translation": "

学习 Angular 应用的基本原理。
从架构概览开始。

", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/marketing/docs.md" + }, + { + "original": "

Architecture

", + "translation": "

架构

", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/marketing/docs.md" + }, { "original": "## Assumptions", "translation": "## 基本假设", @@ -29376,7 +29426,7 @@ }, { "original": "This documentation assumes that you are already familiar with\n[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript \"Learn JavaScript\"),\nand some of the tools from the\n[latest standards](https://babeljs.io/learn-es2015/ \"Latest JavaScript standards\") such as\n[classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes \"ES2015 Classes\")\nand [modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import \"ES2015 Modules\").\nThe code samples are written using [TypeScript](https://www.typescriptlang.org/ \"TypeScript\").\nMost Angular code can be written with just the latest JavaScript,\nusing [types](https://www.typescriptlang.org/docs/handbook/classes.html \"TypeScript Types\") for dependency injection,\nand using [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html \"Decorators\") for metadata.", - "translation": "本文档假设你已经熟悉了[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript \"学习 JavaScript\")和来自[最新标准](https://babeljs.io/learn-es2015/ \"Latest JavaScript standards\")的一些知识，比如 [类](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes \"ES2015 类\") 和 [模块](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import \"ES2015 模块\")。\n下列代码范例都是用最新版本的JavaScript写的，利用[类型](https://www.typescriptlang.org/docs/handbook/classes.html \"TypeScript 类型\")实现依赖注入，并使用[装饰器](https://www.typescriptlang.org/docs/handbook/decorators.html \"装饰器\")来提供元数据。", + "translation": "本文档假设你已经熟悉了 [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript \"Learn JavaScript\") 和来自 [最新标准](https://babeljs.io/learn-es2015/ \"Latest JavaScript standards\") 的一些知识，比如 [类](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes \"ES2015 Classes\") 和 [模块](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import \"ES2015 Modules\")。\n下列代码范例都是用最新版本的JavaScript写的，利用 [类型](https://www.typescriptlang.org/docs/handbook/classes.html \"TypeScript Types\") 实现依赖注入，并使用[装饰器](https://www.typescriptlang.org/docs/handbook/decorators.html \"Decorators\")来提供元数据。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/marketing/docs.md" }, { @@ -29481,7 +29531,7 @@ }, { "original": "The _Tour of Heroes_ tutorial covers the fundamentals of Angular. \nIn this tutorial you will build an app that helps a staffing agency manage its stable of heroes.", - "translation": "**英雄指南**教程涵盖了 Angular 的核心原理。在本教程中，我们将构建一个应用，来帮助招聘机构来管理一群英雄。", + "translation": "**英雄指南**教程涵盖了 Angular 的核心原理。在本教程中，你将构建一个应用，来帮助招聘机构来管理一群英雄。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/index.md" }, { @@ -29491,7 +29541,7 @@ }, { "original": "By the end of the tutorial you will be able to do the following:", - "translation": "在本教程的最后，我们将完成下列工作：", + "translation": "在本教程的最后，你将完成下列工作：", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/index.md" }, { @@ -29541,7 +29591,7 @@ }, { "original": "You'll learn enough Angular to get started and gain confidence that\nAngular can do whatever you need it to do.", - "translation": "完成本教程后，我们将学到足够的 Angular 知识，并确信 Angular 确实能提供我们所需的支持。", + "translation": "你将学到足够的 Angular 知识，并确信 Angular 确实能提供你所需的支持。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/index.md" }, { @@ -29551,54 +29601,219 @@ }, { "original": "## What you'll build", - "translation": "## 我们要构建出什么", + "translation": "## 你要构建出什么", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/index.md" }, { "original": "Here's a visual idea of where this tutorial leads, beginning with the \"Dashboard\"\nview and the most heroic heroes:", - "translation": "下面是本教程关于界面的构想：开始是“Dashboard（仪表盘）”视图，来展示我们最勇敢的英雄。", + "translation": "下面是本教程关于界面的构想：开始是“Dashboard（仪表盘）”视图，来展示最勇敢的英雄。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/index.md" }, { "original": "You can click the two links above the dashboard (\"Dashboard\" and \"Heroes\")\nto navigate between this Dashboard view and a Heroes view.", - "translation": "仪表盘顶部中有两个链接：“Dashboard（仪表盘）”和“Heroes（英雄列表）”。\n 我们将点击它们在“仪表盘”和“英雄列表”视图之间导航。", + "translation": "仪表盘顶部中有两个链接：“Dashboard（仪表盘）”和“Heroes（英雄列表）”。\n 你将点击它们在“仪表盘”和“英雄列表”视图之间导航。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/index.md" }, { "original": "If you click the dashboard hero \"Magneta,\" the router opens a \"Hero Details\" view\nwhere you can change the hero's name.", - "translation": "当我们点击仪表盘上名叫“Magneta”的英雄时，路由将把我们带到这个英雄的详情页，在这里，我们可以修改英雄的名字。", + "translation": "当你点击仪表盘上名叫“Magneta”的英雄时，路由会打开英雄详情页，在这里，你可以修改英雄的名字。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/index.md" }, { "original": "Clicking the \"Back\" button returns you to the Dashboard.\nLinks at the top take you to either of the main views.\nIf you click \"Heroes,\" the app displays the \"Heroes\" master list view.", - "translation": "点击“Back（后退）”按钮将返回到“Dashboard（仪表盘）”。\n顶部的链接可以把我们带到任何一个主视图。\n如果我们点击“Heroes（英雄列表）”链接，应用将把我们带到“英雄”主列表视图。", + "translation": "点击“Back（后退）”按钮将返回到“Dashboard（仪表盘）”。\n顶部的链接可以把你带到任何一个主视图。\n如果你点击“Heroes（英雄列表）”链接，应用将把你带到“英雄”主列表视图。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/index.md" }, { "original": "When you click a different hero name, the read-only mini detail beneath the list reflects the new choice.", - "translation": "当我们点击另一位英雄时，一个只读的“微型详情视图”会显示在列表下方，以体现我们的选择。", + "translation": "当你点击另一位英雄时，一个只读的“微型详情视图”会显示在列表下方，以体现你的选择。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/index.md" }, { "original": "You can click the \"View Details\" button to drill into the\neditable details of the selected hero.", - "translation": "我们可以点击“View Details（查看详情）”按钮进入所选英雄的编辑视图。", + "translation": "你可以点击“View Details（查看详情）”按钮进入所选英雄的编辑视图。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/index.md" }, { "original": "The following diagram captures all of the navigation options.", - "translation": "下面这张图汇总了我们所有可能的导航路径。", + "translation": "下面这张图汇总了所有可能的导航路径。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/index.md" }, { "original": "Here's the app in action:", - "translation": "下图演示了我们应用中的所有操作。", + "translation": "下图演示了本应用中的动图。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/index.md" }, + { + "original": "# The Application Shell", + "translation": "# 应用的“外壳”", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "## Install the Angular CLI", + "translation": "## 安装 Angular CLI 命令行工具", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "Install the [Angular CLI](https://github.com/angular/angular-cli), if you haven't already done so.", + "translation": "如果还没有安装 [Angular CLI](https://github.com/angular/angular-cli)，请执行：", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "## Create a new application", + "translation": "## 创建新应用", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "Create a new project named `angular-tour-of-heroes` with this CLI command.", + "translation": "使用 CLI 命令创建一个名叫 `angular-tour-of-heroes` 的新项目。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "The Angular CLI generated a new project with a default application and supporting files.", + "translation": "这样 Angular CLI 就创建了一个带默认应用及其支持文件的新项目。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "## Serve the application", + "translation": "## 启动应用服务器", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "Go to the project directory and launch the application.", + "translation": "进入项目目录，并启动这个应用。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "The `ng serve` command builds the app, starts the development server,\nwatches the source files, and rebuilds the app as you make changes to those files.", + "translation": "`ng serve` 命令会构建本应用、启动开发服务器、监听源文件，并且当那些文件发生变化时重新构建本应用。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "The `--open` flag opens a browser to `http://localhost:4200/`.", + "translation": "`--open` 标志会打开浏览器，并访问 `http://localhost:4200/`。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "You should see the app running in your browser.", + "translation": "你会发现本应用正运行在浏览器中。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "## Angular components", + "translation": "## Angular 组件", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "The page you see is the _application shell_.\nThe shell is controlled by an Angular **component** named `AppComponent`.", + "translation": "你所看到的这个页面就是*应用的外壳*。\n这个外壳是被一个名叫 `AppComponent` 的 Angular 组件控制的。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "_Components_ are the fundamental building blocks of Angular applications.\nThey display data on the screen, listen for user input, and take action based on that input.", + "translation": "*组件*是 Angular 应用中的基本构造块。\n它们在屏幕上显示数据，监听用户输入，并且根据这些输入执行相应的动作。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "## Change the application title", + "translation": "## 修改应用标题", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "Open the project in your favorite editor or IDE and navigate to the `src/app` folder.", + "translation": "用你最喜欢的编辑器或 IDE 打开这个项目，并访问 `src/app` 目录。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "You'll find the implementation of the shell `AppComponent` distributed over three files:", + "translation": "你会在这里看到 `AppComponent` 壳的三个实现文件：", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "1. `app.component.ts`— the component class code, written in TypeScript.", + "translation": "`app.component.ts`— 组件的类代码，这是用 TypeScript 写的。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "1. `app.component.html`— the component template, written in HTML.", + "translation": "`app.component.html`— 组件的模板，这是用 HTML 写的。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "1. `app.component.css`— the component's private CSS styles.", + "translation": "`app.component.ts`— 组件的私有 CSS 样式。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "Open the component class file (`app.component.ts`) and change the value of the `title` property to 'Tour of Heroes'.", + "translation": "打开组件的类文件 (`app.component.ts`)，并把 `title` 属性的值修改为 'Tour of Heroes' （英雄指南）。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "Open the component template file (`app.component.html`) and\ndelete the default template generated by the Angular CLI.\nReplace it with the following line of HTML.", + "translation": "打开组件的模板文件 `app.component.html` 并清空 Angular CLI 自动生成的默认模板。改为下列 HTML 内容：", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "The double curly braces are Angular's *interpolation binding* syntax. \nThis interpolation binding presents the component's `title` property value \ninside the HTML header tag.", + "translation": "双花括号语法是 Angular 的*插值绑定*语法。\n这个插值绑定的意思是把组件的 `title` 属性的值绑定到 HTML 中的 `h1` 标记中。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "The browser refreshes and displays the new application title.", + "translation": "浏览器自动刷新，并且显示出了新的应用标题。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "## Add application styles", + "translation": "## 添加应用样式", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "Most apps strive for a consistent look across the application.\nThe CLI generated an empty `styles.css` for this purpose.\nPut your application-wide styles there.", + "translation": "大多数应用都会努力让整个应用保持一致的外观。\n因此，CLI 会生成一个空白的 `styles.css` 文件。\n你可以把全应用级别的样式放进去。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "Here's an excerpt from the `styles.css` for the _Tour of Heroes_ sample app.", + "translation": "下面是这个*英雄指南*范例应用中 `styles.css` 文件的片段。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "## Final code review", + "translation": "## 查看最终代码", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "The source code for this tutorial and the complete _Tour of Heroes_ global styles \nare available in the .", + "translation": "本教程的源文件以及*英雄指南*的完整全局样式可以在 中看到。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "Here are the code files discussed on this page.", + "translation": "下面是本页所提到的源代码：", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, { "original": "## Summary", "translation": "## 小结", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" }, + { + "original": "* You created the initial application structure using the Angular CLI.", + "translation": "你使用 Angular CLI 创建了初始的应用结构。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "* You learned that Angular components display data.", + "translation": "你学会了使用 Angular 组件来显示数据。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, + { + "original": "* You used the double curly braces of interpolation to display the app title.", + "translation": "你使用双花括号插值表达式显示了应用标题。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt0.md" + }, { "original": "# The Hero Editor", "translation": "# 英雄编辑器", @@ -29606,7 +29821,7 @@ }, { "original": "The application now has a basic title.\nNext you will create a new component to display hero information\nand place that component in the application shell.", - "translation": "应用程序现在有了基本的标题。\n接下来我们要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。", + "translation": "应用程序现在有了基本的标题。\n接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" }, { @@ -29614,9 +29829,129 @@ "translation": "## 创建英雄列表组件", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" }, + { + "original": "Using the Angular CLI, generate a new component named `heroes`.", + "translation": "使用 Angular CLI 创建一个名为 `heroes` 的新组件。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "The CLI creates a new folder, `src/app/heroes/` and generates\nthe three files of the `HeroesComponent`.", + "translation": "CLI 创建了一个新的文件夹 `src/app/heroes/`，并生成了 `HeroesComponent` 的三个文件。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "The `HeroesComponent` class file is as follows:", + "translation": "`HeroesComponent` 的类文件如下：", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "You always import the `Component` symbol from the Angular core library\nand annotate the component class with `@Component`.", + "translation": "你要从 Angular 核心库中导入 `Component` 符号，并为组件类加上 `@Component` 装饰器。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "`@Component` is a decorator function that specifies the Angular metadata for the component.", + "translation": "`@Component` 是个装饰器函数，用于为该组件指定 Angular 所需的元数据。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "The CLI generated three metadata properties:", + "translation": "CLI 自动生成了三个元数据属性：", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "1. `selector`— the component's CSS element selector", + "translation": "`selector`— 组件的选择器（CSS 元素选择器）", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "1. `templateUrl`— the location of the component's template file.", + "translation": "`templateUrl`— 组件模板文件的位置。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "1. `styleUrls`— the location of the component's private CSS styles.", + "translation": "`styleUrls`— 组件私有 CSS 样式表文件的位置。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "The [CSS element selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors),\n`'app-heroes'`, matches the name of the HTML element that identifies this component within a parent component's template.", + "translation": "[CSS 元素选择器](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors) `app-heroes` 用来在父组件的模板中匹配 HTML 元素的名称，以识别出该组件。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "The `ngOnInit` is a [lifecycle hook](guide/lifecycle-hooks#oninit) \nAngular calls `ngOnInit` shortly after creating a component.\nIt's a good place to put initialization logic.", + "translation": "`ngOnInit` 是一个[生命周期钩子](guide/lifecycle-hooks#oninit)，Angular 在创建完组件后很快就会调用 `ngOnInit`。这里是放置初始化逻辑的好地方。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Always `export` the component class so you can `import` it elsewhere ... like in the `AppModule`.", + "translation": "始终要 `export` 这个组件类，以便在其它地方（比如 `AppModule`）导入它。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "### Add a _hero_ property", + "translation": "### 添加 `hero` 属性", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Add a `hero` property to the `HeroesComponent` for a hero named \"Windstorm.\"", + "translation": "往 `HeroesComponent` 中添加一个 `hero` 属性，用来表示一个名叫 “Windstorm” 的英雄。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "### Show the hero", + "translation": "### 显示英雄", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Open the `heroes.component.html` template file.\nDelete the default text generated by the Angular CLI and \nreplace it with a data binding to the new `hero` property.", + "translation": "打开模板文件 `heroes.component.html`。删除 Angular CLI 自动生成的默认内容，改为到 `hero` 属性的数据绑定。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "## Show the _HeroesComponent_ view", + "translation": "## 显示 `HeroesComponent` 视图", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "To display the `HeroesComponent`, you must add it to the template of the shell `AppComponent`.", + "translation": "要显示 `HeroesComponent` 你必须把它加到壳组件 `AppComponent` 的模板中。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Remember that `app-heroes` is the [element selector](#selector) for the `HeroesComponent`. \nSo add an `` element to the `AppComponent` template file, just below the title.", + "translation": "别忘了，`app-heroes` 就是 `HeroesComponent` 的 [元素选择器](#selector)。\n所以，只要把 `` 元素添加到 `AppComponent` 的模板文件中就可以了，就放在标题下方。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Assuming that the CLI `ng serve` command is still running,\nthe browser should refresh and display both the application title and the hero name.", + "translation": "如果 CLI 的 `ng serve` 命令仍在运行，浏览器就会自动刷新，并且同时显示出应用的标题和英雄的名字。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "## Create a Hero class", + "translation": "## 创建 `Hero` 类", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "A real hero is more than a name.", + "translation": "真实的英雄当然不止一个名字。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Create a `Hero` class in its own file in the `src/app` folder.\nGive it `id` and `name` properties.", + "translation": "在 `src/app` 文件夹中为 `Hero` 类创建一个文件，并添加 `id` 和 `name` 属性。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Return to the `HeroesComponent` class and import the `Hero` class.", + "translation": "回到 `HeroesComponent` 类，并且导入这个 `Hero` 类。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, { "original": "Refactor the component's `hero` property to be of type `Hero`.\nInitialize it with an `id` of `1` and the name `Windstorm`.", - "translation": "现在，有了一个`Hero`类，我们把组件`hero`属性的类型换成`Hero`。\n然后以`1`为 id、以 “Windstorm” 为名字，初始化它。", + "translation": "把组件的 `hero` 属性的类型重构为 `Hero`。\n然后以`1`为 `id`、以 “Windstorm” 为名字初始化它。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" }, { @@ -29624,11 +29959,51 @@ "translation": "修改后的 `HeroesComponent` 类应该是这样的：", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" }, + { + "original": "The page no longer displays properly because you changed the hero from a string to an object.", + "translation": "页面显示变得不正常了，因为你刚刚把 `hero` 从字符串改成了对象。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "## Show the hero object", + "translation": "## 显示 `hero` 对象", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Update the binding in the template to announce the hero's name\nand show both `id` and `name` in a details layout like this:", + "translation": "修改模板中的绑定，以显示英雄的名字，并在详情中显示 `id` 和 `name`，就像这样：", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, { "original": "The browser refreshes and display's the hero's information.", "translation": "浏览器自动刷新，并显示这位英雄的信息。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" }, + { + "original": "## Format with the _UppercasePipe_", + "translation": "## 使用 `UppercasePipe` 进行格式化", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Modify the `hero.name` binding like this.", + "translation": "把 `hero.name` 的绑定修改成这样：", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "The browser refreshes and now the hero's name is displayed in capital letters.", + "translation": "浏览器刷新了。现在，英雄的名字显示成了大写字母。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "The word `uppercase` in the interpolation binding, \nright after the pipe operator ( | ),\nactivates the built-in `UppercasePipe`.", + "translation": "绑定表达式中的 `uppercase` 位于管道操作符（ | ）的右边，用来调用内置管道 `UppercasePipe`。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "[Pipes](guide/pipes) are a good way to format strings, currency amounts, dates and other display data.\nAngular ships with several built-in pipes and you can create your own.", + "translation": "[管道](guide/pipes) 是格式化字符串、金额、日期和其它显示数据的好办法。\nAngular 发布了一些内置管道，而且你还可以创建自己的管道。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, { "original": "## Edit the hero", "translation": "## 编辑英雄名字", @@ -29676,7 +30051,7 @@ }, { "original": "Notice that the app stopped working when you added `[(ngModel)]`.", - "translation": "注意，当我们加上 `[(ngModel)]` 之后这个应用无法工作了。", + "translation": "注意，当你加上 `[(ngModel)]` 之后这个应用无法工作了。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" }, { @@ -29684,9 +30059,99 @@ "translation": "打开浏览器的开发工具，就会在控制台中看到如下信息：", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" }, + { + "original": "Although `ngModel` is a valid Angular directive, it isn't available by default.", + "translation": "虽然 `ngModel` 是一个有效的 Angular 指令，不过它在默认情况下是不可用的。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "It belongs to the optional `FormsModule` and you must _opt-in_ to using it.", + "translation": "它属于一个可选模块`FormsModule`，你必须自行添加此模块才能使用该指令。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Angular needs to know how the pieces of your application fit together\nand what other files and libraries the app requires.\nThis information is called _metadata_", + "translation": "Angular 需要知道如何把应用程序的各个部分组合到一起，以及该应用需要哪些其它文件和库。\n这些信息被称为*元数据（metadata）*。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Some of the metadata is in the `@Component` decorators that you added to your component classes.\nOther critical metadata is in [`@NgModule`](guide/ngmodules) decorators.", + "translation": "有些元数据位于 `@Component` 装饰器中，你会把它加到组件类上。\n另一些关键性的元数据位于 [`@NgModule`](guide/ngmodules) 装饰器中。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "The most important `@NgModule`decorator annotates the top-level **AppModule** class.", + "translation": "最重要的 `@NgModule` 装饰器位于顶级类 **AppModule** 上。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "The Angular CLI generated an `AppModule` class in `src/app/app.module.ts` when it created the project.\nThis is where you _opt-in_ to the `FormsModule`.", + "translation": "Angular CLI 在创建项目的时候就在 `src/app/app.module.ts` 中生成了一个 `AppModule` 类。\n这里也就是你要添加 `FormsModule` 的地方。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "### Import _FormsModule_", + "translation": "### 导入 `FormsModule`", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Open `AppModule` (`app.module.ts`) and import the `FormsModule` symbol from the `@angular/forms` library.", + "translation": "打开 `AppModule` (`app.module.ts`) 并从 `@angular/forms` 库中导入 `FormsModule` 符号。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Then add `FormsModule` to the `@NgModule` metadata's `imports` array, which contains a list of external modules that the app needs.", + "translation": "然后把 `FormsModule` 添加到 `@NgModule` 元数据的 `imports` 数组中，这里是该应用所需外部模块的列表。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, { "original": "When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the `

` above the textbox.", - "translation": "浏览器刷新。又见到我们的英雄了。我们可以编辑英雄的名字，也能看到这个改动立刻体现在`

`中。", + "translation": "刷新浏览器，应用又能正常工作了。你可以编辑英雄的名字，并且会看到这个改动立刻体现在这个输入框上方的`

`中。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "### Declare _HeroesComponent_", + "translation": "### 声明 `HeroesComponent`", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Every component must be declared in _exactly one_ [NgModule](guide/ngmodules).", + "translation": "每个组件都必须声明在（且只能声明在）一个 [NgModule](guide/ngmodules) 中。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "_You_ didn't declare the `HeroesComponent`.\nSo why did the application work?", + "translation": "*你*没有声明过 `HeroesComponent`，可为什么本应用却正常呢？", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "It worked because the Angular CLI declared `HeroesComponent` in the `AppModule` when it generated that component.", + "translation": "这是因为 Angular CLI 在生成 `HeroesComponent` 组件的时候就自动把它加到了 `AppModule` 中。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Open `src/app/app.module.ts` and find `HeroesComponent` imported near the top.", + "translation": "打开 `src/app/app.module.ts` 你就会发现 `HeroesComponent` 已经在顶部导入过了。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "The `HeroesComponent` is declared in the `@NgModule.declarations` array.", + "translation": "`HeroesComponent` 也已经声明在了 `@NgModule.declarations` 数组中。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Note that `AppModule` declares both application components, `AppComponent` and `HeroesComponent`.", + "translation": "注意 `AppModule` 声明了应用中的所有组件，`AppComponent` 和 `HeroesComponent`。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "## Final code review", + "translation": "## 查看最终代码", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "Your app should look like this . Here are the code files discussed on this page.", + "translation": "应用跑起来应该是这样的：。本页中所提及的代码如下：", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" }, { @@ -29694,24 +30159,354 @@ "translation": "## 小结", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" }, + { + "original": "* You used the CLI to create a second `HeroesComponent`.", + "translation": "你使用 CLI 创建了第二个组件 `HeroesComponent`。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "* You displayed the `HeroesComponent` by adding it to the `AppComponent` shell.", + "translation": "你把 `HeroesComponent` 添加到了壳组件 `AppComponent` 中，以便显示它。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "* You applied the `UppercasePipe` to format the name.", + "translation": "你使用 `UppercasePipe` 来格式化英雄的名字。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "* You used two-way data binding with the `ngModel` directive.", + "translation": "你用 `ngModel` 指令实现了双向数据绑定。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "* You learned about the `AppModule`.", + "translation": "你知道了 `AppModule`。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "* You imported the `FormsModule` in the `AppModule` so that Angular would recognize and apply the `ngModel` directive.", + "translation": "你把 `FormsModule` 导入了 `AppModule`，以便 Angular 能识别并应用 `ngModel` 指令。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "* You learned the importance of declaring components in the `AppModule`\nand appreciated that the CLI declared it for you.", + "translation": "你知道了把组件声明到 `AppModule` 是很重要的，并认识到 CLI 会自动帮你声明它。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt1.md" + }, + { + "original": "# Display a Heroes List", + "translation": "# 显示英雄列表", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md" + }, { "original": "In this page, you'll expand the Tour of Heroes app to display a list of heroes, and\nallow users to select a hero and display the hero's details.", - "translation": "我们需要管理多个英雄。我们将扩展《英雄指南》应用，让它显示一个英雄列表，\n 允许用户选择一个英雄，查看该英雄的详细信息。", + "translation": "本页中，你将扩展《英雄指南》应用，让它显示一个英雄列表，\n并允许用户选择一个英雄，查看该英雄的详细信息。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md" + }, + { + "original": "## Create mock heroes", + "translation": "## 创建模拟（mock）的英雄数据", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md" + }, + { + "original": "You'll need some heroes to display.", + "translation": "你需要一些英雄数据以供显示。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md" + }, + { + "original": "Eventually you'll get them from a remote data server.\nFor now, you'll create some _mock heroes_ and pretend they came from the server.", + "translation": "最终，你会从远端的数据服务器获取它。\n不过目前，你要先创建一些*模拟的英雄数据*，并假装它们是从服务器上取到的。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md" + }, + { + "original": "Create a file called `mock-heroes.ts` in the `src/app/` folder.\nDefine a `HEROES` constant as an array of ten heroes and export it.\nThe file should look like this.", + "translation": "在 `src/app/` 文件夹中创建一个名叫 `mock-heroes.ts` 的文件。\n定义一个包含十个英雄的常量数组 `HEROES`，并导出它。\n该文件是这样的。", "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md" }, { "original": "## Displaying heroes", - "translation": "## 显示我们的英雄", + "translation": "## 显示这些英雄", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md" + }, + { + "original": "You're about to display the list of heroes at the top of the `HeroesComponent`.", + "translation": "你要在 `HeroesComponent` 的顶部显示这个英雄列表。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md" + }, + { + "original": "Open the `HeroesComponent` class file and import the mock `HEROES`.", + "translation": "打开 `HeroesComponent` 类文件，并导入模拟的 `HEROES`。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md" + }, + { + "original": "Add a `heroes` property to the class that exposes these heroes for binding.", + "translation": "往类中添加一个 `heroes` 属性，这样可以暴露出这些英雄，以供绑定。", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md" + }, + { + "original": "### List heroes with _*ngFor_", + "translation": "### 使用 `*ngFor` 列出这些英雄", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md" + }, + { + "original": "Open the `HeroesComponent` template file and make the following changes:", + "translation": "打开 `HeroesComponent` 的模板文件，并做如下修改：", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md" + }, + { + "original": "* Add an `

` at the top,", + "translation": "在顶部添加 `

`，", + "sourceFile": "/Users/twer/private/GDE/angular-cn/aio/content/tutorial/toh-pt2.md" + }, + { + "original": "* Below it add an HTML unordered list (`