diff --git a/adev/src/content/guide/routing/BUILD.bazel b/adev/src/content/guide/routing/BUILD.bazel new file mode 100644 index 00000000000..a251848b705 --- /dev/null +++ b/adev/src/content/guide/routing/BUILD.bazel @@ -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", + ], +) diff --git a/adev/src/content/guide/routing/common-router-tasks.md b/adev/src/content/guide/routing/common-router-tasks.md index e8ff7307c1f..6f9913952e1 100644 --- a/adev/src/content/guide/routing/common-router-tasks.md +++ b/adev/src/content/guide/routing/common-router-tasks.md @@ -624,7 +624,7 @@ The browser uses the `` value to prefix relative URLs when referencin Add the `` element just after the `` 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. - + ### HTML5 URLs and the `` diff --git a/adev/src/content/guide/routing/overview.md b/adev/src/content/guide/routing/overview.md index 56295e16ee9..9ffc9ca3a3f 100644 --- a/adev/src/content/guide/routing/overview.md +++ b/adev/src/content/guide/routing/overview.md @@ -1,4 +1,4 @@ - + Routing helps you change what the user sees in a single-page app. diff --git a/adev/src/content/guide/routing/router-reference.md b/adev/src/content/guide/routing/router-reference.md index 9159617520d..ea84037ced4 100644 --- a/adev/src/content/guide/routing/router-reference.md +++ b/adev/src/content/guide/routing/router-reference.md @@ -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: - + 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`. diff --git a/adev/src/content/guide/routing/router-tutorial.md b/adev/src/content/guide/routing/router-tutorial.md index 7d35aa0be41..13b3d1ca403 100644 --- a/adev/src/content/guide/routing/router-tutorial.md +++ b/adev/src/content/guide/routing/router-tutorial.md @@ -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. - + 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. - + 1. In your code editor, open the file, `app.component.html` and replace its contents with the following HTML. - + 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. - + 1. Add the `router-outlet` directive. - + 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. - + 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. - + 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. - + 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. - + 1. Open the `app.routes.ts` file and add the following route to the routes list: diff --git a/adev/src/content/guide/routing/routing-with-urlmatcher.md b/adev/src/content/guide/routing/routing-with-urlmatcher.md index 65dfff3ba79..d874ff85b25 100644 --- a/adev/src/content/guide/routing/routing-with-urlmatcher.md +++ b/adev/src/content/guide/routing/routing-with-urlmatcher.md @@ -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. - + 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 @@ -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. - + This custom matcher is a function that performs the following tasks: