HEROES
+Heroes
-
\ No newline at end of file
+ "{{ hero.name }}"
-
- {{ hero.id }}
-
-
-
-
- - -
-{{ hero.name }}
+Id: {{ hero.id }}
+ + + + diff --git a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.html b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.html index 322e996926..aaf0672449 100644 --- a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.html +++ b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.html @@ -1,4 +1,4 @@ -HEROES
+Heroes
-
diff --git a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.css b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.css
index 7c8e1be801..606deceae5 100644
--- a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.css
+++ b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.css
@@ -3,79 +3,53 @@
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
- width: 15em;
+ width: 100%;
}
.heroes li {
position: relative;
cursor: pointer;
- background-color: #EEE;
- margin: .5em;
- padding: .3em 0;
- height: 1.6em;
- border-radius: 4px;
}
.heroes li:hover {
- color: #607D8B;
- background-color: #DDD;
left: .1em;
}
.heroes a {
- color: #888;
+ color: black;
text-decoration: none;
- position: relative;
display: block;
+ font-size: 1.2rem;
+ background-color: #eee;
+ margin: .5rem .5rem .5rem 0;
+ padding: .5rem 0;
+ border-radius: 4px;
}
.heroes a:hover {
- color:#607D8B;
+ color: #2c3a41;
+ background-color: #e6e6e6;
}
-.heroes .badge {
- display: inline-block;
- font-size: small;
- color: white;
- padding: 0.8em 0.7em 0 0.7em;
- background-color: #607D8B;
- line-height: 1em;
- position: relative;
- left: -1px;
- top: -4px;
- height: 1.8em;
- min-width: 16px;
- text-align: right;
- margin-right: .8em;
- border-radius: 4px 0 0 4px;
-}
-
-button {
- background-color: #eee;
- border: none;
- padding: 5px 10px;
- border-radius: 4px;
- cursor: pointer;
- font-family: Arial, sans-serif;
-}
-
-button:hover {
- background-color: #cfd8dc;
-}
-
-button.delete {
- position: relative;
- left: 194px;
- top: -32px;
- background-color: gray !important;
- color: white;
+.heroes a:active {
+ background-color: #525252;
+ color: #fafafa;
}
/* #docregion selected */
-.heroes li.selected {
- background-color: #CFD8DC;
- color: white;
+.heroes .selected a {
+ background-color: #d6e6f7;
}
-.heroes li.selected:hover {
- background-color: #BBD8DC;
+
+.heroes .selected a:hover {
+ background-color: #bdd7f5;
}
/* #enddocregion selected */
+
+.heroes .badge {
+ padding: .5em .6em;
+ color: white;
+ background-color: #435b60;
+ min-width: 16px;
+ margin-right: .8em;
+ border-radius: 4px 0 0 4px;
+}
diff --git a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.html b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.html
index 282a82e174..62d3dbe8ac 100644
--- a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.html
+++ b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.html
@@ -1,11 +1,10 @@
-
HEROES
+Heroes
- \ No newline at end of file + diff --git a/aio/content/guide/router-tutorial-toh.md b/aio/content/guide/router-tutorial-toh.md index a540951d29..35d1ff0f78 100644 --- a/aio/content/guide/router-tutorial-toh.md +++ b/aio/content/guide/router-tutorial-toh.md @@ -56,7 +56,7 @@ The application renders with a row of navigation buttons and the *Heroes* view w-@@ -64,7 +64,7 @@ The application renders with a row of navigation buttons and the *Heroes* view w Select one hero and the application takes you to a hero editing screen.
+ 
-@@ -73,14 +73,14 @@ Alter the name. Click the "Back" button and the application returns to the heroes list which displays the changed hero name. Notice that the name change took effect immediately. -Had you clicked the browser's back button instead of the application's "Back" button, the app would have returned you to the heroes list as well. +Had you clicked the browser's back button instead of the application's "Back" button, the application would have returned you to the heroes list as well. Angular application navigation updates the browser history as normal web navigation does. Now click the *Crisis Center* link for a list of ongoing crises.
+
-Select a crisis and the application takes you to a crisis editing screen. @@ -91,7 +91,7 @@ Notice that the corresponding name in the crisis list does _not_ change.
+ 
-@@ -102,7 +102,7 @@ Click the browser back button or the "Heroes" link to activate a dialog.
+ 
-@@ -123,7 +123,7 @@ Begin with a basic version of the application that navigates between two empty v
+
-{@a import} @@ -206,7 +206,7 @@ Registering the `RouterModule.forRoot()` in the `AppModule` `imports` array make The root `AppComponent` is the application shell. It has a title, a navigation bar with two links, and a router outlet where the router renders components.
+
-The router outlet serves as a placeholder where the routed components are rendered. @@ -529,10 +529,10 @@ The Routing Module has several characteristics: ### Integrate routing with your app The sample routing application does not include routing by default. -When you use the [Angular CLI](cli) to create a project that does use routing, set the `--routing` option for the project or app, and for each NgModule. +When you use the [Angular CLI](cli) to create a project that does use routing, set the `--routing` option for the project or application, and for each NgModule. When you create or initialize a new project (using the CLI [`ng new`](cli/new) command) or a new application (using the [`ng generate app`](cli/generate) command), specify the `--routing` option. This tells the CLI to include the `@angular/router` npm package and create a file named `app-routing.module.ts`. -You can then use routing in any NgModule that you add to the project or app. +You can then use routing in any NgModule that you add to the project or application. For example, the following command generates an NgModule that can use routing. @@ -604,14 +604,6 @@ This milestone covers the following: This sample application recreates the heroes feature in the "Services" section of the [Tour of Heroes tutorial](tutorial/toh-pt4 "Tour of Heroes: Services"), and reuses much of the code from the
+ 
. - - - A typical application has multiple feature areas, each dedicated to a particular business purpose with its own folder. This section shows you how refactor the application into different feature modules, import them into the main module and navigate among them. @@ -1001,8 +993,8 @@ Since `ngOnInit()` is only called once per component instantiation, you can dete When subscribing to an observable in a component, you almost always unsubscribe when the component is destroyed. However, `ActivatedRoute` observables are among the exceptions because `ActivatedRoute` and its observables are insulated from the `Router` itself. -The `Router` destroys a routed component when it is no longer needed. This means all the component's members will also be destroyed, -including the injected `ActivatedRoute` and the subscriptions to its `Observable` properties. +The `Router` destroys a routed component when it is no longer needed. This means all the component's members will also be destroyed, +including the injected `ActivatedRoute` and the subscriptions to its `Observable` properties. The `Router` does not `complete` any `Observable` of the `ActivatedRoute` so any `finalize` or `complete` blocks will not run. If you need to handle something in a `finalize`, you will still need to unsubscribe in `ngOnDestroy`. You will also have to @@ -1180,14 +1172,14 @@ Look for it within the repeated ` - ` tag as shown here:
-Add some styles to apply when the list item is selected. +Add some styles to apply when the hero is selected. When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected: -The optional `foo` route parameter is harmless and the router continues to ignore it. @@ -1552,13 +1544,7 @@ This section shows you how to organize the crisis center to conform to the follo * Each area root component has its own router outlet and child routes. * Feature area routes rarely (if ever) cross with routes of other features. -If your application had many feature areas, the app component trees might look like this: - - -
+
-- +If your application had many feature areas, the component trees might consist of multiple components for those features, each with branches of other, related, components. {@a child-routing-component} @@ -1776,23 +1762,26 @@ It displays a short form with a header, an input box for the message, and two buttons, "Send" and "Cancel".
---Here's the component, its template and styles: +Here's the component, its template, and styles:
+ 
- @@ -1901,7 +1890,7 @@ Setting the popup `RouterOutlet` to `null` clears the outlet and removes the sec ## Milestone 5: Route guards -At the moment, any user can navigate anywhere in the application any time, but sometimes you need to control access to different parts of your app for various reasons. Some of which may include the following: +At the moment, any user can navigate anywhere in the application any time, but sometimes you need to control access to different parts of your application for various reasons. Some of which may include the following: * Perhaps the user is not authorized to navigate to the target component. * Maybe the user must login (authenticate) first. @@ -2895,8 +2884,8 @@ to see the finished route configuration. {@a final-app} -## Final app +## Final application -For the completed router app, see the- + - + - + for the final source code. +For the completed router application, see the for the final source code. {@a link-parameters-array} diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md index f04b62d854..7a0f5b3463 100644 --- a/aio/content/guide/router.md +++ b/aio/content/guide/router.md @@ -5,14 +5,14 @@ This topic describes how to implement many of the common tasks associated with a {@a basics} ## Generate an application with routing enabled -The following command uses the Angular CLI to generate a basic Angular application with an app routing module, called `AppRoutingModule`, which is an NgModule where you can configure your routes. +The following command uses the Angular CLI to generate a basic Angular application with an application routing module, called `AppRoutingModule`, which is an NgModule where you can configure your routes. The application name in the following example is `routing-app`. ng new routing-app --routing -When generating a new app, the CLI prompts you to select CSS or a CSS preprocessor. +When generating a new application, the CLI prompts you to select CSS or a CSS preprocessor. For this example, accept the default of `CSS`. ### Adding components for routing @@ -79,7 +79,7 @@ The following is the default `AppModule` using the CLI with the `--routing` flag The Angular CLI performs this step automatically. The CLI also sets up a `Routes` array for your routes and configures the `imports` and `exports` arrays for `@NgModule()`. -+ ` The router uses the browser's history.pushState for navigation. -`pushState` allows you to customize in-app URL paths; for example, `localhost:4200/crisis-center`. -The in-app URLs can be indistinguishable from server URLs. +`pushState` allows you to customize in-application URL paths; for example, `localhost:4200/crisis-center`. +The in-application URLs can be indistinguishable from server URLs. Modern HTML5 browsers were the first to support `pushState` which is why many people refer to these URLs as "HTML5 style" URLs. diff --git a/aio/content/images/guide/router/component-tree.png b/aio/content/images/guide/router/component-tree.png deleted file mode 100644 index 1a7cb936a3..0000000000 Binary files a/aio/content/images/guide/router/component-tree.png and /dev/null differ diff --git a/aio/content/images/guide/router/contact-form.png b/aio/content/images/guide/router/contact-form.png new file mode 100644 index 0000000000..1f3b28c4d3 Binary files /dev/null and b/aio/content/images/guide/router/contact-form.png differ diff --git a/aio/content/images/guide/router/contact-popup.png b/aio/content/images/guide/router/contact-popup.png deleted file mode 100644 index b92580aec8..0000000000 Binary files a/aio/content/images/guide/router/contact-popup.png and /dev/null differ diff --git a/aio/content/images/guide/router/crisis-center-detail.gif b/aio/content/images/guide/router/crisis-center-detail.gif new file mode 100644 index 0000000000..1329e6ab44 Binary files /dev/null and b/aio/content/images/guide/router/crisis-center-detail.gif differ diff --git a/aio/content/images/guide/router/crisis-center-detail.png b/aio/content/images/guide/router/crisis-center-detail.png deleted file mode 100644 index b1b910ff7d..0000000000 Binary files a/aio/content/images/guide/router/crisis-center-detail.png and /dev/null differ diff --git a/aio/content/images/guide/router/crisis-center-list.gif b/aio/content/images/guide/router/crisis-center-list.gif new file mode 100644 index 0000000000..2b63055791 Binary files /dev/null and b/aio/content/images/guide/router/crisis-center-list.gif differ diff --git a/aio/content/images/guide/router/crisis-center-list.png b/aio/content/images/guide/router/crisis-center-list.png deleted file mode 100644 index 8b913b259a..0000000000 Binary files a/aio/content/images/guide/router/crisis-center-list.png and /dev/null differ diff --git a/aio/content/images/guide/router/hero-detail.png b/aio/content/images/guide/router/hero-detail.png index ed4571f481..f6fc6268fb 100644 Binary files a/aio/content/images/guide/router/hero-detail.png and b/aio/content/images/guide/router/hero-detail.png differ diff --git a/aio/content/images/guide/router/hero-list.gif b/aio/content/images/guide/router/hero-list.gif new file mode 100644 index 0000000000..9f0ea2843a Binary files /dev/null and b/aio/content/images/guide/router/hero-list.gif differ diff --git a/aio/content/images/guide/router/hero-list.png b/aio/content/images/guide/router/hero-list.png deleted file mode 100644 index fa6c64675a..0000000000 Binary files a/aio/content/images/guide/router/hero-list.png and /dev/null differ diff --git a/aio/content/images/guide/router/router-1-anim.gif b/aio/content/images/guide/router/router-1-anim.gif index 07a012d25b..842f9c24d8 100644 Binary files a/aio/content/images/guide/router/router-1-anim.gif and b/aio/content/images/guide/router/router-1-anim.gif differ diff --git a/aio/content/images/guide/router/router-2-anim.gif b/aio/content/images/guide/router/router-2-anim.gif deleted file mode 100644 index 1a0fef8af6..0000000000 Binary files a/aio/content/images/guide/router/router-2-anim.gif and /dev/null differ diff --git a/aio/content/images/guide/router/selected-crisis.png b/aio/content/images/guide/router/selected-crisis.png deleted file mode 100644 index 6fee911886..0000000000 Binary files a/aio/content/images/guide/router/selected-crisis.png and /dev/null differ diff --git a/aio/content/images/guide/router/selected-hero.png b/aio/content/images/guide/router/selected-hero.png index c93f8f5b77..ca57b0293f 100644 Binary files a/aio/content/images/guide/router/selected-hero.png and b/aio/content/images/guide/router/selected-hero.png differ diff --git a/aio/content/images/guide/router/shell-and-outlet.gif b/aio/content/images/guide/router/shell-and-outlet.gif new file mode 100644 index 0000000000..2e90d868a7 Binary files /dev/null and b/aio/content/images/guide/router/shell-and-outlet.gif differ diff --git a/aio/content/images/guide/router/shell-and-outlet.png b/aio/content/images/guide/router/shell-and-outlet.png deleted file mode 100644 index 9545f3e032..0000000000 Binary files a/aio/content/images/guide/router/shell-and-outlet.png and /dev/null differ