iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(router): add index.html to first listing 

closes #642
draws earlier attention to loading router lib and base href
This commit is contained in:
Ward Bell 2016-01-04 09:40:38 -08:00
parent 2bcf442109
commit 4ccb7b848c
2 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,18 +2,23 @@
<!-- #docregion -->
<html>
<head>
<!-- Set the base href -->
<!-- #docregion base-href -->
<base href="/">
<!-- #enddocregion base-href -->
<title>Router Sample</title>
<link rel="stylesheet" href="styles.css">
<script src="node_modules/angular2/bundles/angular2-polyfills.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/angular2/bundles/angular2.dev.js"></script>
<!-- Add the router library -->
<!-- #docregion router-lib -->
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<!-- #enddocregion router-lib -->
<script>
System.config({
packages: {

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

@ -22,8 +22,9 @@ include ../../../../_includes/_util-fns
We'll learn many router details in this chapter which covers
* loading the [router library](#load-library) and setting the [base href](#base-href)
* [configuring a router](#route-config)
* the [link parameter arrays](#link-parameters-array) that propel router navigation
* the [link parameters array](#link-parameters-array) that propels router navigation
* navigating when the user clicks a data-bound [RouterLink](#router-link)
* navigating under [program control](#navigate)
* embedding critical information in the URL with [route parameters](#route-parameters)
@ -31,6 +32,7 @@ include ../../../../_includes/_util-fns
* setting a [default route](#default)
* confirming or canceling navigation with [router lifecycle hooks](#lifecycle-hooks)
* passing optional information in [query parameters](#query-parameters)
* choosing the "HTML5" or "hash" [URL style](#browser-url-styles)
We proceed in phases marked by milestones building rom a simple two-pager with placeholder views
up to a modular, multi-view design with child routes.
@ -264,6 +266,7 @@ figure.image-display
figure.image-display
img(src='/resources/images/devguide/router/router-1-anim.gif' alt="App in action" )
:marked
<a id="load-library"></a>
### Load the Component Router 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.
@ -274,6 +277,7 @@ figure.image-display
<a id="base-href"></a>
+makeExample('router/ts/index.html','router-lib')(format=".")
:marked
<a id="base-href"></a>
### Set the *&lt;base href>*
The Component Router uses the browser's
[history.pushState](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries)
@ -432,14 +436,19 @@ figure.image-display
.file tsconfig.json
.file package.json
:marked
Here are the application-specific files
Here are the files discussed in this milestone
+makeTabs(
`router/ts/app/app.component.1.ts,
router/ts/app/boot.1.ts,
router/ts/app/hero-list.component.ts,
router/ts/app/crisis-list.component.ts`,
router/ts/app/crisis-list.component.ts,
router/ts/index.html`,
',all,,',
`app.component.ts, boot.ts,hero-list.component.ts,crisis-list.component.ts`)
`app.component.ts,
boot.ts,
hero-list.component.ts,
crisis-list.component.ts,
index.html`)
:marked
<a id="heroes-feature"></a>
@ -1286,7 +1295,7 @@ code-example(format="." language="bash").
We can do that!
We compose a 3-item link parameter array following the recipe we just created.
We compose a 3-item link parameters array following the recipe we just created.
This time we set the id to the "Asteroid Crisis" (`{id:3}`).
We can't define a normal route because that requires setting a target component.
@ -1295,7 +1304,7 @@ code-example(format="." language="bash").
+makeExample('router/ts/app/app.component.ts', 'asteroid-route')(format=".")
:marked
We hope the picture is clear. We can write applications with one, two or more levels of routing.
The link parameter array affords the flexibility to represent any routing depth and
The link parameters array affords the flexibility to represent any routing depth and
any legal sequence of route names and (optional) route parameter objects.
<a id="onInit"></a>