Skip to content

Commit 745d624

Browse files
kapunahelewongkapunahelewong
committed
docs: refactor routing doc
This rewrite changes headings to focus on user tasks rather than features, verifies that content is up-to-date and complete, removes colloquial phrases, adds prerequisites, and expands on a task-based section in the beginning (a quick reference).
1 parent 0147de9 commit 745d624

File tree

14 files changed

+1603
-1703
lines changed

14 files changed

+1603
-1703
lines changed

‎aio/content/examples/router/src/app/app-routing.module.7.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { NgModule } from '@angular/core';
2+
import { Routes, RouterModule } from '@angular/router'; // CLI imports router
3+
4+
const routes: Routes = []; // sets up routes constant where you define your routes
5+
6+
// configures NgModule imports and exports
7+
@NgModule({
8+
imports: [RouterModule.forRoot(routes)],
9+
exports: [RouterModule]
10+
})
11+
export class AppRoutingModule { }

‎aio/content/examples/router/src/app/app-routing.module.8.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// #docplaster
2+
import { NgModule } from '@angular/core';
3+
import { Routes, RouterModule } from '@angular/router'; // CLI imports router
4+
5+
// #docregion routes, routes-with-wildcard, redirect
6+
const routes: Routes = [
7+
{ path: 'first-component', component: FirstComponent },
8+
{ path: 'second-component', component: SecondComponent },
9+
// #enddocregion routes
10+
{ path: '', redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
11+
{ path: '**', component: FirstComponent },
12+
// #enddocregion redirect
13+
{ path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page
14+
// #docregion routes
15+
// #docregion redirect
16+
];
17+
// #enddocregion routes, routes-with-wildcard, redirect
18+
19+
20+
@NgModule({
21+
imports: [RouterModule.forRoot(routes)],
22+
exports: [RouterModule]
23+
})
24+
export class AppRoutingModule { }
25+
26+

‎aio/content/examples/router/src/app/app-routing.module.9.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// #docplaster
2+
import { NgModule } from '@angular/core';
3+
import { Routes, RouterModule } from '@angular/router'; // CLI imports router
4+
5+
// #docregion child-routes
6+
const routes: Routes = [
7+
{ path: 'first-component',
8+
component: FirstComponent, // this is the component with the <router-outlet> in the template
9+
children: [
10+
{
11+
path: 'child-a', // child route path
12+
component: ChildAComponent // child route component that the router renders
13+
},
14+
{
15+
path: 'child-b',
16+
component: ChildBComponent // another child route component that the router renders
17+
}
18+
] },
19+
// #enddocregion child-routes
20+
21+
22+
@NgModule({
23+
imports: [RouterModule.forRoot(routes)],
24+
exports: [RouterModule]
25+
})
26+
export class AppRoutingModule { }
27+
28+

‎aio/content/examples/router/src/app/app.component.4.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-root',
5+
templateUrl: 'app.component.html',
6+
styleUrls: ['app.component.css']
7+
})
8+
export class AppComponent {
9+
// #docregion relative-to
10+
goToItems() {
11+
this.router.navigate(['items'], { relativeTo: this.route });
12+
}
13+
// #enddocregion relative-to
14+
15+
}

‎aio/content/examples/router/src/app/app.component.7.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<h1>Angular Router App</h1>
2+
<!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in AppRoutingModule) -->
3+
<nav>
4+
<ul>
5+
<li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li>
6+
<li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li>
7+
</ul>
8+
</nav>
9+
<!-- The routed views render in the <router-outlet>-->
10+
<router-outlet></router-outlet>

‎aio/content/examples/router/src/app/app.component.8.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!-- #docregion child-routes-->
2+
<h2>First Component</h2>
3+
4+
<nav>
5+
<ul>
6+
<li><a routerLink="child-a">Child A</a></li>
7+
<li><a routerLink="child-b">Child B</a></li>
8+
</ul>
9+
</nav>
10+
11+
<router-outlet></router-outlet>
12+
<!-- #enddocregion child-routes-->
13+
14+
15+
<!-- #docregion relative-route-->
16+
17+
<h2>First Component</h2>
18+
19+
<nav>
20+
<ul>
21+
<li><a routerLink="../second-component">Relative Route to second component</a></li>
22+
</ul>
23+
</nav>
24+
<router-outlet></router-outlet>
25+
26+
<!-- #enddocregion relative-route-->

‎aio/content/examples/router/src/app/app.module.8.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { BrowserModule } from '@angular/platform-browser';
2+
import { NgModule } from '@angular/core';
3+
import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule
4+
import { AppComponent } from './app.component';
5+
6+
@NgModule({
7+
declarations: [
8+
AppComponent
9+
],
10+
imports: [
11+
BrowserModule,
12+
AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array
13+
],
14+
providers: [],
15+
bootstrap: [AppComponent]
16+
})
17+
export class AppModule { }

‎aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
// #docregion
33
import { switchMap } from 'rxjs/operators';
44
import { Component, OnInit } from '@angular/core';
5+
// #docregion imports-route-info
56
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
7+
// #enddocregion imports-route-info
68
import { Observable } from 'rxjs';
79

810
import { HeroService } from '../hero.service';
@@ -16,11 +18,16 @@ import { Hero } from '../hero';
1618
export class HeroDetailComponent implements OnInit {
1719
hero$: Observable<Hero>;
1820

21+
// #docregion activated-route
1922
constructor(
2023
private route: ActivatedRoute,
24+
// #enddocregion activated-route
2125
private router: Router,
2226
private service: HeroService
27+
// #docregion activated-route
2328
) {}
29+
// #enddocregion activated-route
30+
2431

2532
ngOnInit() {
2633
this.hero$ = this.route.paramMap.pipe(

‎aio/content/guide/ajs-quick-reference.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -415,8 +415,8 @@ The following are some of the key AngularJS built-in directives and their equiva
415415
<code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="router-link"></code-example>
416416

417417

418-
For more information on routing, see the [RouterLink binding](guide/router#router-link)
419-
section of the [Routing & Navigation](guide/router) page.
418+
For more information on routing, see [Defining a basic route](guide/router#basic-route)
419+
in the [Routing & Navigation](guide/router) page.
420420

421421
</td>
422422

‎aio/content/guide/browser-support.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -303,7 +303,7 @@ Some features of Angular may require additional polyfills.
303303
<td>
304304

305305
[Router](guide/router) when using
306-
[hash-based routing](guide/router#appendix-locationstrategy-and-browser-url-styles)
306+
[hash-based routing](guide/router#location-strategy)
307307
</td>
308308

309309
<td>

0 commit comments

Comments
 (0)