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

docs(router): incorporate Brian's comments; other fixes

Browse Source 
closes #712
This commit is contained in:
Ward Bell 2016-01-17 15:02:15 -08:00
parent 38e75c8de9
commit c7f58ee459
3 changed files with 29 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/docs/_examples/router/ts/index.html
View File

@ -9,6 +9,13 @@
<title>Router Sample</title> <title>Router Sample</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<!-- #docregion ie-polyfills -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/distsystem-polyfills.js"></script>
<!-- #enddocregion ie-polyfills -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script>

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

@ -10,7 +10,7 @@ include ../../../../_includes/_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.
The Angular "**Component Router**" (AKA "the router") borrows from this model. The Angular "**Component Router**" ("the router") borrows from this model.
It can interpret a browser URL as an instruction It can interpret a browser URL as an instruction
to navigate to a client-generated view and pass optional parameters along to the supporting view component to navigate to a client-generated view and pass optional parameters along to the supporting view component
to help it decide what specific content to present. to help it decide what specific content to present.
@ -70,9 +70,9 @@ include ../../../../_includes/_util-fns
When the browser's URL changes, the router looks for a corresponding **`RouteDefinition`** When the browser's URL changes, the router looks for a corresponding **`RouteDefinition`**
from which it can determine the component to display. from which it can determine the component to display.
A new router has no route definitions. We have to configure it. A router has no route definitions until we configure it.
The preferred way to configure the router is with a **`@RouteConfig`** [decorator](glossary.html#decorator) The preferred way to simultaneously create a router and add its routes is with a **`@RouteConfig`** [decorator](glossary.html#decorator)
applied to a host component. applied to the router's host component.
In this example, we configure the top-level `AppComponent` with three route definitions In this example, we configure the top-level `AppComponent` with three route definitions
+makeExample('router/ts/app/app.component.2.ts', 'route-config', 'app.component.ts (excerpt)')(format=".") +makeExample('router/ts/app/app.component.2.ts', 'route-config', 'app.component.ts (excerpt)')(format=".")
@ -83,7 +83,8 @@ include ../../../../_includes/_util-fns
There are several flavors of `RouteDefinition`. There are several flavors of `RouteDefinition`.
The most common by far is the named **`Route`** which maps a URL path to a component The most common by far is the named **`Route`** which maps a URL path to a component
The `name` field is the name of the `Route`. The name **must** be spelled in **PascalCase**. The `name` field is the route name which **must** be spelled in **PascalCase**
to avoid potential confusion with the route `path`.
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`
@ -268,7 +269,8 @@ figure.image-display
<a id="load-library"></a> <a id="load-library"></a>
### Load the Component Router library ### Load the Component Router library
The Component Router is not part of the Angular 2 core. It is in its own library. The Component Router is not part of the Angular 2 core. It is in its own library.
The router is an optional service and you might prefer a different router someday. The router is an optional service because not all applications need routing and,
depending on your requirements, you may need a different routing library.
The Component Router library is part of the Angular npm bundle. The Component Router library is part of the Angular npm bundle.
We make it available by loading its script in our `index.html`, right after We make it available by loading its script in our `index.html`, right after
@ -287,9 +289,9 @@ figure.image-display
"HTML 5 style" URLs. "HTML 5 style" URLs.
We must **add a [&lt;base href> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag** We must **add a [&lt;base href> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag**
to the `index.html` to make this work. to the `index.html` to make `pushState` routing work.
The `href` value specifies the base URL to use for all *relative* URLs within a document including The browser also needs the base `href` value to prefix *relative* URLs when downloading and linking to
links to css files, scripts, and images. css files, scripts, and image.
Add the base element just after the `<head>` tag. Add the base element just after the `<head>` tag.
If the `app` folder is the application root, as it is for our application, If the `app` folder is the application root, as it is for our application,
@ -817,7 +819,7 @@ code-example(format="").
:marked :marked
Notice that the **path ends with a slash and three trailing periods (`/...`)**. Notice that the **path ends with a slash and three trailing periods (`/...`)**.
That means this is an incomplete route (AKA a ***non-terminal route***). The finished route will be some combination of That means this is an incomplete route (a ***non-terminal route***). The finished route will be some combination of
the parent `/crisis-center/` route and a route from the **child router** that belongs to the designated component. the parent `/crisis-center/` route and a route from the **child router** that belongs to the designated component.
All is well. All is well.

10
tools/plunker-builder/indexHtmlTranslator.js
View File

@ -78,6 +78,16 @@ var _rxData = [
from: 'node_modules/angular2/bundles/testing.dev.js', from: 'node_modules/angular2/bundles/testing.dev.js',
to: 'https://code.angularjs.org/2.0.0-beta.0/testing.dev.js' to: 'https://code.angularjs.org/2.0.0-beta.0/testing.dev.js'
}, },
{
pattern: 'script',
from: 'node_modules/es6-shim/es6-shim.min.js',
to: 'https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js'
},
{
pattern: 'script',
from: 'node_modules/systemjs/distsystem-polyfills.js',
to: 'https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js'
},
{ {
pattern: 'link', pattern: 'link',
from: 'node_modules/bootstrap/dist/css/bootstrap.min.css', from: 'node_modules/bootstrap/dist/css/bootstrap.min.css',