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

Browse Source 
closes 
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
public/docs
_examples/router/ts
index.html
ts/latest/guide
router.jade

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

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

27
public/docs/ts/latest/guide/router.jade

@ -22,8 +22,9 @@ include ../../../../_includes/_util-fns
We'll learn many router details in this chapter which covers 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) * [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 when the user clicks a data-bound [RouterLink](#router-link)
* navigating under [program control](#navigate) * navigating under [program control](#navigate)
* embedding critical information in the URL with [route parameters](#route-parameters) * embedding critical information in the URL with [route parameters](#route-parameters)
@ -31,6 +32,7 @@ include ../../../../_includes/_util-fns
* setting a [default route](#default) * setting a [default route](#default)
* confirming or canceling navigation with [router lifecycle hooks](#lifecycle-hooks) * confirming or canceling navigation with [router lifecycle hooks](#lifecycle-hooks)
* passing optional information in [query parameters](#query-parameters) * 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 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. up to a modular, multi-view design with child routes.
@ -264,6 +266,7 @@ figure.image-display
figure.image-display figure.image-display
img(src='/resources/images/devguide/router/router-1-anim.gif' alt="App in action" ) img(src='/resources/images/devguide/router/router-1-anim.gif' alt="App in action" )
:marked :marked
<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 and you might prefer a different router someday.
@ -274,6 +277,7 @@ figure.image-display
<a id="base-href"></a> <a id="base-href"></a>
+makeExample('router/ts/index.html','router-lib')(format=".") +makeExample('router/ts/index.html','router-lib')(format=".")
:marked :marked
<a id="base-href"></a>
### Set the *&lt;base href>* ### Set the *&lt;base href>*
The Component Router uses the browser's 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) [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 tsconfig.json
.file package.json .file package.json
:marked :marked
Here are the application-specific files Here are the files discussed in this milestone
+makeTabs( +makeTabs(
`router/ts/app/app.component.1.ts, `router/ts/app/app.component.1.ts,
router/ts/app/boot.1.ts, router/ts/app/boot.1.ts,
router/ts/app/hero-list.component.ts, router/ts/app/hero-list.component.ts,
router/ts/app/crisis-list.component.ts`, router/ts/app/crisis-list.component.ts,
',all,,', router/ts/index.html`,
`app.component.ts, boot.ts,hero-list.component.ts,crisis-list.component.ts`) ',all,,',
`app.component.ts,
boot.ts,
hero-list.component.ts,
crisis-list.component.ts,
index.html`)
:marked :marked
<a id="heroes-feature"></a> <a id="heroes-feature"></a>
@ -1286,7 +1295,7 @@ code-example(format="." language="bash").
We can do that! 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}`). 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. 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=".") +makeExample('router/ts/app/app.component.ts', 'asteroid-route')(format=".")
:marked :marked
We hope the picture is clear. We can write applications with one, two or more levels of routing. 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. any legal sequence of route names and (optional) route parameter objects.
<a id="onInit"></a> <a id="onInit"></a>