honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

review of router.jade, to line 429

Browse Source
This commit is contained in:
Zhimin(Rex) YE 2016-06-28 20:45:40 +01:00
parent aca0989f52
commit 8e2299de2a
1 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
public/docs/ts/latest/guide/router.jade
View File

@ -12,12 +12,12 @@ include ../_util-fns
The Angular ***Component Router*** enables navigation from one [view](./glossary.html#view) to the next The Angular ***Component Router*** enables navigation from one [view](./glossary.html#view) to the next
as users perform application tasks. as users perform application tasks.
Angular的***组件路由器***让你能从一个[视图](./glossary.html#view)导航到另一个 —— 就像用户在日常操作中用到的方式。 在用户使用应用程序时，Angular的***组件路由器***能让用户从一个[视图](./glossary.html#view)导航到另一个视图。
We cover the router's primary features in this chapter, illustrating them through the evolution We cover the router's primary features in this chapter, illustrating them through the evolution
of a small application that we can [run live](/resources/live-examples/router/ts/plnkr.html). of a small application that we can [run live](/resources/live-examples/router/ts/plnkr.html).
在本章中，我们覆盖了该路由器的主要特性，我们通过一个小型应用的成长演进来讲解它。我们可以[到在线例子](/resources/live-examples/router/ts/plnkr.html)体会下。 本章覆盖了该路由器的主要特性。我们通过一个小型应用的成长演进来讲解它。参见[在线例子](/resources/live-examples/router/ts/plnkr.html)。
.l-sub-section .l-sub-section
@ -27,7 +27,7 @@ include ../_util-fns
To see the URL changes in the browser address bar, To see the URL changes in the browser address bar,
pop out the preview window by clicking the blue 'X' button in the upper right corner. pop out the preview window by clicking the blue 'X' button in the upper right corner.
如果想看到浏览器地址栏的变化情况，请点击右上角的蓝色'X'按钮以弹出预览窗口。 请点击右上角的蓝色'X'按钮以弹出预览窗口，这样可以看到浏览器地址栏的变化情况。
.l-main-section .l-main-section
@ -42,7 +42,7 @@ include ../_util-fns
We click the browser's back and forward buttons and the browser navigates We click the browser's back and forward buttons and the browser navigates
backward and forward through the history of pages we've seen. backward and forward through the history of pages we've seen.
浏览器是在应用中进行导航的常见操作模型。 浏览器是一个熟悉的应用导航操作模型。
如果在地址栏中输入一个URL，浏览器就会导航到相应的页面。 如果在地址栏中输入一个URL，浏览器就会导航到相应的页面。
如果你在页面中点击链接，浏览器就会导航到一个新的页面。 如果你在页面中点击链接，浏览器就会导航到一个新的页面。
如果你点击浏览器上的前进和后退按钮，浏览器就会根据你看过的页面历史向前或向后进行导航。 如果你点击浏览器上的前进和后退按钮，浏览器就会根据你看过的页面历史向前或向后进行导航。
@ -57,10 +57,11 @@ include ../_util-fns
or in response to some other stimulus from any source. And the router logs activity or in response to some other stimulus from any source. And the router logs activity
in the browser's history journal so the back and forward buttons work as well. in the browser's history journal so the back and forward buttons work as well.
Angular的***组件路由器***（以下简称路由器）借鉴了这个模型。它把浏览器中的URL看做一个操作指南，据此导航到一个由客户端生成的视图，并可以把参数传给支撑视图的相应组件，帮它决定具体该展现哪些内容。 Angular的***组件路由器***（以下简称路由器）借鉴了这个模型。它把浏览器中的URL看做一个操作指南，
据此导航到一个由客户端生成的视图，并可以把参数传给支撑视图的相应组件，帮它决定具体该展现哪些内容。
我们可以为页面中的链接绑定一个路由，这样，当用户点击链接时，就会导航到应用中相应的视图。 我们可以为页面中的链接绑定一个路由，这样，当用户点击链接时，就会导航到应用中相应的视图。
当用户点击按钮、从下拉框中选取，或响应来自任何地方的事件时，我们也可以在代码控制下进行导航。 当用户点击按钮、从下拉框中选取，或响应来自任何地方的事件时，我们也可以在代码控制下进行导航。
路由器还能在浏览器的历史日志中记录下这些活动，所以浏览器的前进和后退按钮也能照常工作。 路由器还在浏览器的历史日志中记录下这些活动，这样浏览器的前进和后退按钮也能照常工作。
We'll learn many router details in this chapter which covers We'll learn many router details in this chapter which covers
@ -80,7 +81,7 @@ include ../_util-fns
* the [link parameters array](#link-parameters-array) that propels router navigation * the [link parameters array](#link-parameters-array) that propels router navigation
* [链接参数的数组](#link-parameters-array)，路由器中的路标 * 推动路由器导航的[链接参数数组](#link-parameters-array)，
* navigating when the user clicks a data-bound [RouterLink](#router-link) * navigating when the user clicks a data-bound [RouterLink](#router-link)
@ -100,7 +101,7 @@ include ../_util-fns
* [redirecting](#redirect) from one route to another * [redirecting](#redirect) from one route to another
* 从一个路由[重定向](#redirect)到另一个 * 从一个路由[重定向](#redirect)到另一个路由
* confirming or canceling navigation with [guards](#guards) * confirming or canceling navigation with [guards](#guards)
@ -120,12 +121,12 @@ include ../_util-fns
* choosing the "HTML5" or "hash" [URL style](#browser-url-styles) * choosing the "HTML5" or "hash" [URL style](#browser-url-styles)
* 选择"HTML5"或"hash"[风格的URL](#browser-url-styles) * 选择"HTML5"或"hash"[URL风格](#browser-url-styles)
We proceed in phases marked by milestones building from a simple two-pager with placeholder views We proceed in phases marked by milestones building from a simple two-pager with placeholder views
up to a modular, multi-view design with child routes. up to a modular, multi-view design with child routes.
接下来，我们设定的里程碑是从一个简单的、只有占位(placeholder)视图的双页范例，升级成一个模块化的、带有子路由的多视图设计。 接下来，我们分为几个里程碑阶段，把一个简单的、只有占位(placeholder)视图的双页范例，升级成一个模块化的、带有子路由的多视图设计。
But first, an overview of router basics. But first, an overview of router basics.
@ -170,8 +171,8 @@ include ../_util-fns
We import what we need from it as we would from any other Angular package. We import what we need from it as we would from any other Angular package.
Angular的组件路由器是一个可选的服务，它用来呈现指定的URL所对应的视图。 Angular的组件路由器是一个可选的服务，它用来呈现指定的URL所对应的视图。
它并不是Angular 2核心库的一部分，而是在它自己的包儿`@angular/router`中。 它并不是Angular 2核心库的一部分，而是在它自己的`@angular/router`包中。
像其它Angular包儿一样，我们也可以从它导入所需的一切。 像其它Angular包一样，我们可以从它导入所需的一切。
+makeExample('router/ts/app/app.component.1.ts','import-router', 'app/app.component.ts (import)')(format=".") +makeExample('router/ts/app/app.component.1.ts','import-router', 'app/app.component.ts (import)')(format=".")
@ -180,7 +181,7 @@ include ../_util-fns
:marked :marked
We cover other options in the [details below](#browser-url-styles). We cover other options in the [details below](#browser-url-styles).
其它选项我们将会在[后面](#browser-url-styles)详细讲解。 我们将会在[后面](#browser-url-styles)详细讲解其它选项。
:marked :marked
### Configuration ### Configuration
@ -195,7 +196,7 @@ include ../_util-fns
A router has no routes until we configure it. A router has no routes until we configure it.
The preferred way is to bootstrap our application with an array of routes using the **`provideRouter`** function. The preferred way is to bootstrap our application with an array of routes using the **`provideRouter`** function.
我们首先得配置路由器，才会有路由信息。 需要先配置路由器，才会有路由信息。
首选方案是用带有“路由数组”的**`provideRouter`**工厂函数（`[provideRouter(routes)]`）来启动此应用。 首选方案是用带有“路由数组”的**`provideRouter`**工厂函数（`[provideRouter(routes)]`）来启动此应用。
In the following example, we configure our application with three route definitions. In the following example, we configure our application with three route definitions.
@ -216,7 +217,7 @@ include ../_util-fns
There are no **leading slashes** in our **path**. The router parses and builds the URL for us, There are no **leading slashes** in our **path**. The router parses and builds the URL for us,
allowing us to use relative and absolute paths when navigating between application views. allowing us to use relative and absolute paths when navigating between application views.
在**path**中**不用斜线`/`**开头。路由器会为我们解析和生成URL，以便在多个视图间导航时，可以自由使用相对路径和绝对路径。 **path**中**不能用斜线`/`**开头。路由器会为我们解析和生成URL，以便在多个视图间导航时，可以自由使用相对路径和绝对路径。
The `:id` in the third route is a token for a route parameter. In a URL such as `/hero/42`, "42" The `:id` in the third route is a token for a route parameter. In a URL such as `/hero/42`, "42"
is the value of the `id` parameter. The corresponding `HeroDetailComponent` is the value of the `id` parameter. The corresponding `HeroDetailComponent`
@ -234,7 +235,7 @@ include ../_util-fns
so we can simplify registration of router dependencies later in `main.ts`. so we can simplify registration of router dependencies later in `main.ts`.
We don't have any other providers to register right now. But we will. We don't have any other providers to register right now. But we will.
最后，我们通过`APP_ROUTER_PROVIDERS`数组导出这个供应商，以便我们以后将来在`main.ts`中简单的注册路由器的依赖。 最后，我们通过`APP_ROUTER_PROVIDERS`数组导出这个供应商，以便我们以后将来在`main.ts`中简单的注册路由器依赖。
目前我们还没有注册任何别的供应商，但很快就会这么做了！ 目前我们还没有注册任何别的供应商，但很快就会这么做了！
:marked :marked
@ -269,7 +270,7 @@ code-example(format="", language="html").
But most of the time we navigate as a result of some user action such as the click of But most of the time we navigate as a result of some user action such as the click of
an anchor tag. an anchor tag.
现在，我们已经有了配置好的一些路由，还找到了渲染它们的地方，但又该如何导航到它呢？固然，我们从浏览器的地址栏直接输入URL也能做到，但是大多数情况下，导航是某些用户操作的结果，比如点击一个A标签。 现在，我们已经有了配置好的一些路由，还找到了渲染它们的地方，但又该如何导航到它呢？固然，从浏览器的地址栏直接输入URL也能做到，但是大多数情况下，导航是某些用户操作的结果，比如点击一个A标签。
We add a **`RouterLink`** directive to the anchor tag and bind it to a template expression that We add a **`RouterLink`** directive to the anchor tag and bind it to a template expression that
returns an array of route link parameters (the **link parameters array**). The router ultimately resolves that array returns an array of route link parameters (the **link parameters array**). The router ultimately resolves that array
@ -308,7 +309,7 @@ code-example(format="", language="html").
The component has a `RouterOutlet` where it can display views produced by the router. The component has a `RouterOutlet` where it can display views produced by the router.
It has `RouterLink`s that users can click to navigate via the router. It has `RouterLink`s that users can click to navigate via the router.
该应用提供了一个配置过的路由器。 为应用提供了一个配置过的路由器。
组件中有一个`RouterOutlet`，它能显示路由器所生成的视图。 组件中有一个`RouterOutlet`，它能显示路由器所生成的视图。
它还有一些`RouterLink`，用户可以点击它们，来通过路由器进行导航。 它还有一些`RouterLink`，用户可以点击它们，来通过路由器进行导航。
@ -425,7 +426,7 @@ table
as it evolves over a sequence of milestones. as it evolves over a sequence of milestones.
We strongly recommend taking the time to read and understand this story. We strongly recommend taking the time to read and understand this story.
下面的详情区描述了一个带路由的范例应用，它经过一系列里程碑一步步演进。我们强烈建议你花点时间阅读并理解这个需求故事。 下面的详情区描述了一个带路由的范例应用，它经过一系列里程碑一步步演进。我们强烈建议你花点时间阅读并理解这个过程。
.l-main-section .l-main-section