Skip to content

Commit c4fed99

Browse files
committed
add 07-routing-basics lesson
1 parent 4fb1439 commit c4fed99

File tree

5 files changed

+56
-6
lines changed

5 files changed

+56
-6
lines changed

projects/07-routing-basics/README.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# 07-routing-basics
2+
3+
For most apps, there comes a point where the app requires more than a single page. When that time inevitably comes, routing becomes a big part of the performance story for users.
4+
5+
In this activity, you'll learn how to setup and configure your app to use Angular Router.
6+
7+
## Run this example
8+
9+
From the command line at the root of the project:
10+
11+
```bash
12+
ng serve 07-routing-basics
13+
```
14+
15+
## Instructions
16+
17+
### Enable Routing in the application
18+
19+
1. In `app.routes.ts`, add a the default route path (`''`) that routes to the `GreetingsComponent` in the `routes` array.
20+
21+
1. In `app.config.ts`, enable routing in the application by updating the `providers` array with an entry the following entry:
22+
23+
```typescript
24+
provideRouter(routes);
25+
```
26+
27+
### Add a router outlet to display the routes
28+
29+
1. In `app.component,ts`, import `RouterModule` at the file level, then add it to the component `imports` array.
30+
31+
1. Next, add a `<router-outlet />` to the template of 'AppComponent'.
32+
33+
1. Save your changes.
34+
35+
1. Confirm that the updates are reflected in the browser. In this case you should see a greeting rendered in the browser.
36+
37+
_Be sure to stop any previously running instances of the application_

projects/07-routing-basics/src/app/app.component.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@ import { CommonModule } from '@angular/common';
55
selector: 'app-root',
66
standalone: true,
77
imports: [CommonModule],
8-
template: `
9-
<h1>Welcome to {{title}}!</h1>
10-
11-
12-
`,
8+
template: ` <h1>Enable routing to see the greeting below</h1> `,
139
styles: [],
1410
})
1511
export class AppComponent {
Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { ApplicationConfig } from '@angular/core';
2+
import { provideRouter } from '@angular/router';
3+
import { routes } from './app.routes';
24

35
export const appConfig: ApplicationConfig = {
4-
providers: []
6+
providers: [],
57
};
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Routes } from '@angular/router';
2+
3+
export const routes: Routes = [
4+
{
5+
// add a default path to greetings component
6+
},
7+
];
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-greetings',
5+
template: `<p>Hello dear learner 👋🏾</p>`,
6+
standalone: true,
7+
})
8+
export class GreetingsComponent {}

0 commit comments

Comments
 (0)