Skip to content

Commit

Permalink
add 08-routing-recap lesson
Browse files Browse the repository at this point in the history
  • Loading branch information
MarkTechson committed Dec 5, 2023
1 parent c4fed99 commit 5a3e113
Show file tree
Hide file tree
Showing 15 changed files with 264 additions and 4 deletions.
97 changes: 97 additions & 0 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -778,6 +778,103 @@
}
}
}
},
"08-routing-recap": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"inlineTemplate": true,
"inlineStyle": true,
"skipTests": true
},
"@schematics/angular:class": {
"skipTests": true
},
"@schematics/angular:directive": {
"skipTests": true
},
"@schematics/angular:guard": {
"skipTests": true
},
"@schematics/angular:interceptor": {
"skipTests": true
},
"@schematics/angular:pipe": {
"skipTests": true
},
"@schematics/angular:resolver": {
"skipTests": true
},
"@schematics/angular:service": {
"skipTests": true
}
},
"root": "projects/08-routing-recap",
"sourceRoot": "projects/08-routing-recap/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/08-routing-recap",
"index": "projects/08-routing-recap/src/index.html",
"browser": "projects/08-routing-recap/src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "projects/08-routing-recap/tsconfig.app.json",
"assets": [
"projects/08-routing-recap/src/favicon.ico",
"projects/08-routing-recap/src/assets"
],
"styles": [
"projects/08-routing-recap/src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "08-routing-recap:build:production"
},
"development": {
"buildTarget": "08-routing-recap:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "08-routing-recap:build"
}
}
}
}
},
"cli": {
Expand Down
2 changes: 0 additions & 2 deletions projects/05-control-flow-for/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule],
template: `
<section class="container">
<!-- This article element represents and entire listing -->
Expand Down
2 changes: 0 additions & 2 deletions projects/06-input-output/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Car } from './car ';

@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule],
template: `
<h1>Saved Cars {{ savedCarList.length }}</h1>
<section class="container">
Expand Down
54 changes: 54 additions & 0 deletions projects/08-routing-recap/README.md
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.
14 changes: 14 additions & 0 deletions projects/08-routing-recap/src/app/app.component.ts
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'];
}
8 changes: 8 additions & 0 deletions projects/08-routing-recap/src/app/app.config.ts
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)]
};
3 changes: 3 additions & 0 deletions projects/08-routing-recap/src/app/app.routes.ts
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 projects/08-routing-recap/src/app/details/details.component.ts
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',
},
];
}
17 changes: 17 additions & 0 deletions projects/08-routing-recap/src/app/home/home.component.ts
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 added projects/08-routing-recap/src/favicon.ico
Binary file not shown.
13 changes: 13 additions & 0 deletions projects/08-routing-recap/src/index.html
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>
6 changes: 6 additions & 0 deletions projects/08-routing-recap/src/main.ts
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));
1 change: 1 addition & 0 deletions projects/08-routing-recap/src/styles.css
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 */
14 changes: 14 additions & 0 deletions projects/08-routing-recap/tsconfig.app.json
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"
]
}

0 comments on commit 5a3e113

Please sign in to comment.