-
Notifications
You must be signed in to change notification settings - Fork 76
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c4fed99
commit 5a3e113
Showing
15 changed files
with
264 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
# 08-routing-recap | ||
|
||
In this activity, you'll learn | ||
|
||
- how to leverage the RouterLink directive to make the most use of Angular Router. | ||
- how to get paremeters from the dynamic urls | ||
|
||
## Run this example | ||
|
||
From the command line at the root of the project: | ||
|
||
```bash | ||
ng serve 08-routing-recap | ||
``` | ||
|
||
## Instructions | ||
|
||
### Define Routes & add `<router-outlet />` | ||
|
||
1. In `app.routes.ts`, define a route for `HomeComponent` as the default route. | ||
|
||
1. Define routes for `DetailsComponent`, add a URL parameter to the path for `DetailComponent` called `id` - | ||
|
||
``` | ||
/details/:id | ||
``` | ||
|
||
1. In `app.component.ts`, add the `<router-outlet />` to component template. | ||
|
||
### Update components | ||
|
||
1. In `app.component.ts`, dynamically generate a list of links for products in `productTitles`. | ||
|
||
- Generate a link and use the `routerLink` attribute. | ||
|
||
- Use the index of the `productTitles` element | ||
|
||
_Hint, you can access ` $index`` in the context of the `@for` [@for documentation](https://angular.dev/api/core/@for)_ | ||
|
||
1. In, `details.component.ts`, create a property called `productId` of type `number`. | ||
|
||
1. In detail component define an `@Input` property called `id` and create `setter` function for it: | ||
|
||
```typescript | ||
@Input() set id(value: number) { | ||
this.productId = value; | ||
} | ||
``` | ||
|
||
1. Update the `DetailsComponent` template to reference the product from the product list that at the indeces for `productId`. | ||
|
||
1. Save your changes. | ||
|
||
1. Confirm that you can now route between products in the browser. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { Component } from '@angular/core'; | ||
import { RouterOutlet } from '@angular/router'; | ||
|
||
@Component({ | ||
selector: 'app-root', | ||
standalone: true, | ||
imports: [RouterOutlet], | ||
template: ` <h1>Welcome to {{ title }}!</h1> `, | ||
}) | ||
export class AppComponent { | ||
title = '08-routing-recap'; | ||
|
||
productTitles = ['Product 1', 'Product 2', 'Product 3']; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import { ApplicationConfig } from '@angular/core'; | ||
import { provideRouter } from '@angular/router'; | ||
|
||
import { routes } from './app.routes'; | ||
|
||
export const appConfig: ApplicationConfig = { | ||
providers: [provideRouter(routes)] | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import { Routes } from '@angular/router'; | ||
|
||
export const routes: Routes = []; |
37 changes: 37 additions & 0 deletions
37
projects/08-routing-recap/src/app/details/details.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import { Component } from '@angular/core'; | ||
import { CommonModule } from '@angular/common'; | ||
|
||
@Component({ | ||
selector: 'app-details', | ||
standalone: true, | ||
imports: [CommonModule], | ||
template: ` | ||
<section> | ||
<p>Title</p> | ||
<ul> | ||
<li>Price</li> | ||
<li>Description</li> | ||
</ul> | ||
</section> | ||
`, | ||
styles: ``, | ||
}) | ||
export class DetailsComponent { | ||
productList = [ | ||
{ | ||
title: 'Product 1', | ||
price: 9234, | ||
description: 'Product 1 is the best', | ||
}, | ||
{ | ||
title: 'Product 2', | ||
price: 3043, | ||
description: 'Product 2 is special', | ||
}, | ||
{ | ||
title: 'Product 3', | ||
price: 4355, | ||
description: 'Product 3 has my heart', | ||
}, | ||
]; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { Component } from '@angular/core'; | ||
import { CommonModule } from '@angular/common'; | ||
|
||
@Component({ | ||
selector: 'app-home', | ||
standalone: true, | ||
imports: [CommonModule], | ||
template: ` | ||
<p> | ||
home works! | ||
</p> | ||
`, | ||
styles: `` | ||
}) | ||
export class HomeComponent { | ||
|
||
} |
Empty file.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>08RoutingRecap</title> | ||
<base href="/"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<link rel="icon" type="image/x-icon" href="favicon.ico"> | ||
</head> | ||
<body> | ||
<app-root></app-root> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import { bootstrapApplication } from '@angular/platform-browser'; | ||
import { appConfig } from './app/app.config'; | ||
import { AppComponent } from './app/app.component'; | ||
|
||
bootstrapApplication(AppComponent, appConfig) | ||
.catch((err) => console.error(err)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
/* You can add global styles to this file, and also import other style files */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
/* To learn more about this file see: https://angular.io/config/tsconfig. */ | ||
{ | ||
"extends": "../../tsconfig.json", | ||
"compilerOptions": { | ||
"outDir": "../../out-tsc/app", | ||
"types": [] | ||
}, | ||
"files": [ | ||
"src/main.ts" | ||
], | ||
"include": [ | ||
"src/**/*.d.ts" | ||
] | ||
} |