skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

build: set up markdown pipeline for routing directory of the content guide (#53290)

Browse Source 
Set up the markdown pipeline to include the required source files.

PR Close #53290
This commit is contained in:
Joey Perrott
2023-11-30 18:43:28 +00:00
committed by Dylan Hunn
parent 0d7f679d0f
commit 069dcd11c8
6 changed files with 36 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
adev/src/content/guide/routing/BUILD.bazel
+21
View File
@@ -0,0 +1,21 @@
load("@npm//@angular/build-tooling/bazel/markdown_to_html:markdown_to_html.bzl", "markdown_to_html")
markdown_to_html(
name = "routing",
srcs = glob([
"*.md",
]),
data = [
"//adev/src/assets/images:routing.svg",
"//adev/src/content/examples/router:src/app/app.component.1.html",
"//adev/src/content/examples/router:src/index.html",
"//adev/src/content/examples/router-tutorial:src/app/app.component.css",
"//adev/src/content/examples/router-tutorial:src/app/app.component.html",
"//adev/src/content/examples/router-tutorial:src/app/crisis-list/crisis-list.component.html",
"//adev/src/content/examples/router-tutorial:src/app/heroes-list/heroes-list.component.html",
"//adev/src/content/examples/router-tutorial:src/app/page-not-found/page-not-found.component.html",
"//adev/src/content/examples/routing-with-urlmatcher:src/app/app.component.html",
"//adev/src/content/examples/routing-with-urlmatcher:src/app/app.routes.ts",
"//adev/src/content/examples/routing-with-urlmatcher:src/app/profile/profile.component.html",
],
)
adev/src/content/guide/routing/common-router-tasks.md
+1 -1
View File
@@ -624,7 +624,7 @@ The browser uses the `<base href>` value to prefix relative URLs when referencin
Add the `<base>` element just after the `<head>` tag.
If the `app` folder is the application root, as it is for this application, set the `href` value in `index.html` as shown here.
<docs-code header="src/index.html (base-href)" path="router/src/index.html" visibleRegion="base-href"/>
<docs-code header="src/index.html (base-href)" path="adev/src/content/examples/router/src/index.html" visibleRegion="base-href"/>
### HTML5 URLs and the `<base href>`
adev/src/content/guide/routing/overview.md
+1 -1
View File
@@ -1,4 +1,4 @@
<docs-decorative-header title="Angular Routing" imgSrc="assets/images/routing.svg"> <!-- markdownlint-disable-line -->
<docs-decorative-header title="Angular Routing" imgSrc="adev/src/assets/images/routing.svg"> <!-- markdownlint-disable-line -->
Routing helps you change what the user sees in a single-page app.
</docs-decorative-header>
adev/src/content/guide/routing/router-reference.md
+1 -1
View File
@@ -87,7 +87,7 @@ To navigate as a result of some user action such as the click of an anchor tag,
Consider the following template:
<docs-code header="src/app/app.component.html" path="router/src/app/app.component.1.html"/>
<docs-code header="src/app/app.component.html" path="adev/src/content/examples/router/src/app/app.component.1.html"/>
The `RouterLink` directives on the anchor tags give the router control over those elements.
The navigation paths are fixed, so you can assign a string as a one-time binding to the `routerLink`.
adev/src/content/guide/routing/router-tutorial.md
+9 -9
View File
@@ -47,7 +47,7 @@ This application will have two components: *crisis-list* and *heroes-list*.
1. In your code editor, locate the file, `crisis-list.component.html` and replace the placeholder content with the following HTML.
<docs-code header="src/app/crisis-list/crisis-list.component.html" path="router-tutorial/src/app/crisis-list/crisis-list.component.html"/>
<docs-code header="src/app/crisis-list/crisis-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.html"/>
1. Create a second component, *heroes-list*.
@@ -57,11 +57,11 @@ This application will have two components: *crisis-list* and *heroes-list*.
1. In your code editor, locate the file, `heroes-list.component.html` and replace the placeholder content with the following HTML.
<docs-code header="src/app/heroes-list/heroes-list.component.html" path="router-tutorial/src/app/heroes-list/heroes-list.component.html"/>
<docs-code header="src/app/heroes-list/heroes-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.html"/>
1. In your code editor, open the file, `app.component.html` and replace its contents with the following HTML.
<docs-code header="src/app/app.component.html" path="router-tutorial/src/app/app.component.html" visibleRegion="setup"/>
<docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="setup"/>
1. Verify that your new application runs as expected by running the `ng serve` command.
@@ -136,11 +136,11 @@ To implement this functionality, you add the `router-outlet` directive to your t
1. From your code editor, open the `app.component.html` file.
1. Delete the following lines.
<docs-code header="src/app/app.component.html" path="router-tutorial/src/app/app.component.html" visibleRegion="components"/>
<docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="components"/>
1. Add the `router-outlet` directive.
<docs-code header="src/app/app.component.html" path="router-tutorial/src/app/app.component.html" visibleRegion="router-outlet"/>
<docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="router-outlet"/>
1. Add `RouterOutlet` to the imports of the `AppComponent` in `app.component.ts`
@@ -176,7 +176,7 @@ You'll add that functionality in the next section.
1. Open the `app.component.html` file and add the following HTML below the title.
<docs-code header="src/app/app.component.html" path="router-tutorial/src/app/app.component.html" visibleRegion="nav"/>
<docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="nav"/>
This HTML uses an Angular directive, `routerLink`.
This directive connects the routes you defined to your template files.
@@ -185,7 +185,7 @@ You'll add that functionality in the next section.
1. Open the `app.component.css` file and add the following styles.
<docs-code header="src/app/app.component.css" path="router-tutorial/src/app/app.component.css"/>
<docs-code header="src/app/app.component.css" path="adev/src/content/examples/router-tutorial/src/app/app.component.css"/>
If you view your application in the browser, you should see these two links.
When you click on a link, the corresponding component appears.
@@ -198,7 +198,7 @@ Add this functionality using Angular's `routerLinkActive` directive.
1. From your code editor, open the `app.component.html` file.
1. Update the anchor tags to include the `routerLinkActive` directive.
<docs-code header="src/app/app.component.html" path="router-tutorial/src/app/app.component.html" visibleRegion="routeractivelink"/>
<docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="routeractivelink"/>
1. Add the `RouterLinkActive` directive to the `imports` list of `AppComponent` in `app.component.ts`.
View your application again.
@@ -243,7 +243,7 @@ In this section, you'll create a 404 page and update your route configuration to
1. From your code editor, open the `page-not-found.component.html` file and replace its contents with the following HTML.
<docs-code header="src/app/page-not-found/page-not-found.component.html" path="router-tutorial/src/app/page-not-found/page-not-found.component.html"/>
<docs-code header="src/app/page-not-found/page-not-found.component.html" path="adev/src/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.html"/>
1. Open the `app.routes.ts` file and add the following route to the routes list:
adev/src/content/guide/routing/routing-with-urlmatcher.md
+3 -3
View File
@@ -37,11 +37,11 @@ In addition to the default Angular application framework, you will also create a
1. In your code editor, locate the file, `profile.component.html` and replace the placeholder content with the following HTML.
<docs-code header="src/app/profile/profile.component.html" path="routing-with-urlmatcher/src/app/profile/profile.component.html"/>
<docs-code header="src/app/profile/profile.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.component.html"/>
1. In your code editor, locate the file, `app.component.html` and replace the placeholder content with the following HTML.
<docs-code header="src/app/app.component.html" path="routing-with-urlmatcher/src/app/app.component.html"/>
<docs-code header="src/app/app.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.component.html"/>
## Configure your routes for your application
@@ -62,7 +62,7 @@ This handle is identified by a preceding `@` symbol.
1. Define the custom route matcher by adding the following code to the application routes.
<docs-code header="src/app/app.routes.ts" path="routing-with-urlmatcher/src/app/app.routes.ts" visibleRegion="matcher"/>
<docs-code header="src/app/app.routes.ts" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.routes.ts" visibleRegion="matcher"/>
This custom matcher is a function that performs the following tasks: