From 4dcb3206f77a3742a5a4d7b83a97a5cd6df2fce2 Mon Sep 17 00:00:00 2001 From: SkyZeroZx <73321943+SkyZeroZx@users.noreply.github.com> Date: Wed, 29 Oct 2025 21:12:34 -0500 Subject: [PATCH] docs: Standardize route parameter input signal & code block tags in routing docs (#64788) PR Close #64788 --- .../content/guide/routing/define-routes.md | 28 ++++----- .../guide/routing/lifecycle-and-events.md | 2 +- .../guide/routing/routing-with-urlmatcher.md | 62 +++++++++---------- .../guide/routing/show-routes-with-outlets.md | 12 ++-- adev/src/content/guide/routing/testing.md | 8 +-- 5 files changed, 56 insertions(+), 56 deletions(-) diff --git a/adev/src/content/guide/routing/define-routes.md b/adev/src/content/guide/routing/define-routes.md index 6d94248d22d..50d50891eec 100644 --- a/adev/src/content/guide/routing/define-routes.md +++ b/adev/src/content/guide/routing/define-routes.md @@ -8,7 +8,7 @@ In Angular, a **route** is an object that defines which component should render Here is a basic example of a route: -```angular-ts +```ts import { AdminPage } from './app-admin/app-admin.component'; const adminPage = { @@ -25,7 +25,7 @@ Most projects define routes in a separate file that contains `routes` in the fil A collection of routes looks like this: -```angular-ts +```ts import { Routes } from '@angular/router'; import { HomePage } from './home-page/home-page.component'; import { AdminPage } from './about-page/admin-page.component'; @@ -50,7 +50,7 @@ When bootstrapping an Angular application without the Angular CLI, you can pass Inside of the `providers` array, you can add the Angular router to your application by adding a `provideRouter` function call with your routes. -```angular-ts +```ts import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; @@ -87,9 +87,9 @@ Learn more about [query parameters in Angular in this guide](/guide/routing/read The following example displays a user profile component based on the user id passed in through the URL. -```angular-ts +```ts import { Routes } from '@angular/router'; -import { UserProfile } from './user-profile/user-profile; +import { UserProfile } from './user-profile/user-profile'; const routes: Routes = [ { path: 'user/:id', component: UserProfile } @@ -107,7 +107,7 @@ Valid route parameter names must start with a letter (a-z, A-Z) and can only con You can also define paths with multiple parameters: -```angular-ts +```ts import { Routes } from '@angular/router'; import { UserProfile } from './user-profile/user-profile.component'; import { SocialMediaFeed } from './user-profile/social–media-feed.component'; @@ -128,7 +128,7 @@ When you need to catch all routes for a specific path, the solution is a wildcar A common example is defining a Page Not Found component. -```angular-ts +```ts import { Home } from './home/home.component'; import { UserProfile } from './user-profile/user-profile.component'; import { NotFound } from './not-found/not-found.component'; @@ -150,7 +150,7 @@ When you define routes, the order is important because Angular uses a first-matc The following example shows routes defined from most-specific to least specific: -```angular-ts +```ts const routes: Routes = [ { path: '', component: HomeComponent }, // Empty path { path: 'users/new', component: NewUserComponent }, // Static, most specific @@ -181,7 +181,7 @@ Each approach offers distinct advantages for different scenarios. When you define a route with the `component` property, the referenced component is eagerly loaded as part of the same JavaScript bundle as the route configuration. -```angular-ts +```ts import { Routes } from "@angular/router"; import { HomePage } from "./components/home/home-page" import { LoginPage } from "./components/auth/login-page" @@ -208,7 +208,7 @@ While including more JavaScript in your initial page load leads to slower initia You can use the `loadComponent` property to lazily load the JavaScript for a route only at the point at which that route would become active. -```angular-ts +```ts import { Routes } from "@angular/router"; export const routes: Routes = [ @@ -264,7 +264,7 @@ Note: While lazy routes have the upfront performance benefit of reducing the amo You can define a route that redirects to another route instead of rendering a component: -```angular-ts +```ts import { BlogComponent } from './home/blog.component'; const routes: Routes = [ @@ -366,7 +366,7 @@ Each route has a `providers` property that lets you provide dependencies to that Common scenarios where this can be helpful include applications that have different services based on whether the user is an admin or not. -```angular-ts +```ts export const ROUTES: Route[] = [ { path: 'admin', @@ -398,7 +398,7 @@ There are two ways to work with route data: static data that remains constant, a You can associate arbitrary static data with a route via the `data` property in order to centralize things like route-specific metadata (e.g., analytics tracking, permissions, etc.): -```angular-ts +```ts import { Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; @@ -434,7 +434,7 @@ Nested routes, also known as child routes, are a common technique for managing m You can add child routes to any route definition with the `children` property: -```angular-ts +```ts const routes: Routes = [ { path: 'product/:id', diff --git a/adev/src/content/guide/routing/lifecycle-and-events.md b/adev/src/content/guide/routing/lifecycle-and-events.md index 6e3676f887c..07391532065 100644 --- a/adev/src/content/guide/routing/lifecycle-and-events.md +++ b/adev/src/content/guide/routing/lifecycle-and-events.md @@ -116,7 +116,7 @@ export class AppComponent { Track page views for analytics: -```typescript +```ts import { Component, inject, signal, effect } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; diff --git a/adev/src/content/guide/routing/routing-with-urlmatcher.md b/adev/src/content/guide/routing/routing-with-urlmatcher.md index 2368c3f19eb..6faf6f025f3 100644 --- a/adev/src/content/guide/routing/routing-with-urlmatcher.md +++ b/adev/src/content/guide/routing/routing-with-urlmatcher.md @@ -13,35 +13,35 @@ Implement Angular's `UrlMatcher` to create a custom route matcher. ## Create a sample application -Using the Angular CLI, create a new application, *angular-custom-route-match*. -In addition to the default Angular application framework, you will also create a *profile* component. +Using the Angular CLI, create a new application, _angular-custom-route-match_. +In addition to the default Angular application framework, you will also create a _profile_ component. -1. Create a new Angular project, *angular-custom-route-match*. +1. Create a new Angular project, _angular-custom-route-match_. - ```shell - ng new angular-custom-route-match - ``` + ```shell + ng new angular-custom-route-match + ``` - When prompted with `Would you like to add Angular routing?`, select `Y`. + When prompted with `Would you like to add Angular routing?`, select `Y`. - When prompted with `Which stylesheet format would you like to use?`, select `CSS`. + When prompted with `Which stylesheet format would you like to use?`, select `CSS`. - After a few moments, a new project, `angular-custom-route-match`, is ready. + After a few moments, a new project, `angular-custom-route-match`, is ready. 1. From your terminal, navigate to the `angular-custom-route-match` directory. -1. Create a component, *profile*. +1. Create a component, _profile_. - ```shell - ng generate component profile - ``` + ```shell + ng generate component profile + ``` 1. In your code editor, locate the file, `profile.component.html` and replace the placeholder content with the following HTML. - + 1. In your code editor, locate the file, `app.component.html` and replace the placeholder content with the following HTML. - + ## Configure your routes for your application @@ -52,24 +52,24 @@ This handle is identified by a preceding `@` symbol. 1. In your code editor, open your `app.config.ts` file. 1. Add an `import` statement for Angular's `provideRouter` and `withComponentInputBinding` as well as the application routes. - ```ts - import {provideRouter, withComponentInputBinding} from '@angular/router'; + ```ts + import {provideRouter, withComponentInputBinding} from '@angular/router'; - import {routes} from './app.routes'; - ``` + import {routes} from './app.routes'; + ``` 1. In the providers array, add a `provideRouter(routes, withComponentInputBinding())` statement. 1. Define the custom route matcher by adding the following code to the application routes. - + This custom matcher is a function that performs the following tasks: -* The matcher verifies that the array contains only one segment -* The matcher employs a regular expression to ensure that the format of the username is a match -* If there is a match, the function returns the entire URL, defining a `username` route parameter as a substring of the path -* If there isn't a match, the function returns null and the router continues to look for other routes that match the URL +- The matcher verifies that the array contains only one segment +- The matcher employs a regular expression to ensure that the format of the username is a match +- If there is a match, the function returns the entire URL, defining a `username` route parameter as a substring of the path +- If there isn't a match, the function returns null and the router continues to look for other routes that match the URL HELPFUL: A custom URL matcher behaves like any other route definition. Define child routes or lazy loaded routes as you would with any other route. @@ -77,12 +77,12 @@ HELPFUL: A custom URL matcher behaves like any other route definition. Define ch With the custom matcher in place, you can now bind the route parameter in the `profile` component. -In your code editor, open your `profile.component.ts` file and create an `Input` matching the `username` parameter. +In your code editor, open your `profile.component.ts` file and create an `input` matching the `username` parameter. We added the `withComponentInputBinding` feature earlier in `provideRouter`. This allows the `Router` to bind information directly to the route components. ```ts -@Input() username!: string; +username = input.required(); ``` ## Test your custom URL matcher @@ -91,17 +91,17 @@ With your code in place, you can now test your custom URL matcher. 1. From a terminal window, run the `ng serve` command. - - ng serve - + ```shell + ng serve + ``` 1. Open a browser to `http://localhost:4200`. - You should see a single web page, consisting of a sentence that reads `Navigate to my profile`. + You should see a single web page, consisting of a sentence that reads `Navigate to my profile`. 1. Click the **my profile** hyperlink. - A new sentence, reading `Hello, Angular!` appears on the page. + A new sentence, reading `Hello, Angular!` appears on the page. ## Next steps diff --git a/adev/src/content/guide/routing/show-routes-with-outlets.md b/adev/src/content/guide/routing/show-routes-with-outlets.md index ef3b119e9df..3b74649c23d 100644 --- a/adev/src/content/guide/routing/show-routes-with-outlets.md +++ b/adev/src/content/guide/routing/show-routes-with-outlets.md @@ -8,7 +8,7 @@ The `RouterOutlet` directive is a placeholder that marks the location where the ``` -```angular-ts +```ts import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; @@ -23,7 +23,7 @@ export class AppComponent {} In this example, if an application has the following routes defined: -```angular-ts +```ts import { Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { ProductsComponent } from './products/products.component'; @@ -96,7 +96,7 @@ In this example, the `Settings` component will display the desired panel based o A child route is like any other route, in that it needs both a `path` and a `component`. The one difference is that you place child routes in a children array within the parent route. -```angular-ts +```ts const routes: Routes = [ { path: 'settings-component', @@ -133,7 +133,7 @@ Each outlet must have a unique name. The name cannot be set or changed dynamical Angular matches the outlet's name to the `outlet` property defined on each route: -```angular-ts +```ts { path: 'user/:id', component: UserDetails, @@ -169,7 +169,7 @@ Check out the [API docs for RouterOutlet](/api/router/RouterOutlet?tab=api) if y Passing contextual data to routed components often requires global state or complicated route configurations. To make this easier, each `RouterOutlet` supports a `routerOutletData` input. Routed components and their children can read this data as a signal using the `ROUTER_OUTLET_DATA` injection token, allowing outlet-specific configuration without modifying route definitions. -```ts +```angular-ts import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; @@ -186,7 +186,7 @@ export class DashboardComponent {} The routed component can inject the provided outlet data using `ROUTER_OUTLET_DATA`: -```ts +```angular-ts import { Component, inject } from '@angular/core'; import { ROUTER_OUTLET_DATA } from '@angular/router'; diff --git a/adev/src/content/guide/routing/testing.md b/adev/src/content/guide/routing/testing.md index 5a1f2fe13da..c231e552d12 100644 --- a/adev/src/content/guide/routing/testing.md +++ b/adev/src/content/guide/routing/testing.md @@ -46,7 +46,7 @@ describe('UserProfile', () => { }); ``` -```ts +```angular-ts // user-profile.component.ts import { Component, inject } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @@ -186,7 +186,7 @@ describe('App Router Outlet', () => { }); ``` -```ts +```angular-ts // app.component.ts import { Component } from '@angular/core'; import { RouterOutlet, RouterLink } from '@angular/router'; @@ -254,7 +254,7 @@ describe('Nested Routes', () => { }); ``` -```ts +```angular-ts // nested-components.ts import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; @@ -314,7 +314,7 @@ describe('Search', () => { }); ``` -```ts +```angular-ts // search.component.ts import { Component, inject, computed } from '@angular/core'; import { ActivatedRoute } from '@angular/router';