You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
2.4 KiB
105 lines
2.4 KiB
# URL Params
|
|
|
|
## Lesson Objectives
|
|
|
|
1. Define what URL params are
|
|
1. Create an external data file
|
|
1. Use the data file to generate links
|
|
|
|
## Define what URL params are
|
|
|
|
URL params allow us to pass data into the application from the URL
|
|
|
|
## Create an external data file
|
|
|
|
Now we're going to have how app be a little more data driven. Create `src/app/resume/jobs.ts`:
|
|
|
|
```javascript
|
|
export const JOBS = [
|
|
{
|
|
id:3,
|
|
title: 'Crushed It',
|
|
dates: '2010-2011, 2013-Present',
|
|
description: 'There was a medical situation preventing me from crushing it to my usual standards. So I had to take some time off until I was able to crush it at 100%, at which point I resumed crushing it full-time.'
|
|
},
|
|
{
|
|
id:2,
|
|
title: 'Chief Code Jockey',
|
|
location: 'jockey.com',
|
|
dates: '2008-2010',
|
|
description: 'Taming the wild code beast. A story for all ages. A friendship for all time. Share the adventure.'
|
|
},
|
|
{
|
|
id:1,
|
|
title: 'Software Engineer',
|
|
location: 'Initech',
|
|
dates: '2003-2008',
|
|
description: 'I HAVE PEOPLE SKILLS!!'
|
|
}
|
|
]
|
|
```
|
|
|
|
## Use the data file to generate links
|
|
|
|
In `src/app/app.component.ts` import the data file:
|
|
|
|
```javascript
|
|
import { Component } from '@angular/core';
|
|
import { JOBS } from './resume/jobs';
|
|
```
|
|
|
|
and now add it as a property of `AppComponent` (remove title if it still exists):
|
|
|
|
```javascript
|
|
export class AppComponent {
|
|
jobs = JOBS;
|
|
}
|
|
```
|
|
|
|
In `src/app.app.component.html` loop through the jobs to create links:
|
|
|
|
```html
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<a routerLink="/">Home</a>
|
|
</li>
|
|
<li>
|
|
<a routerLink="/about">About</a>
|
|
</li>
|
|
<li>
|
|
<a routerLink="/links">Links</a>
|
|
</li>
|
|
<li>
|
|
Resume
|
|
<ul>
|
|
<li *ngFor="let job of jobs">
|
|
<a routerLink="/resume/{{job.id}}">{{job.title}}</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
```
|
|
|
|
## Alter the resume route to accept params
|
|
|
|
Our resume route in `src/app/app-routing.module.ts` no longer works. Update it to accept params:
|
|
|
|
```javascript
|
|
const routes: Routes = [
|
|
{
|
|
path: 'about',
|
|
component: AboutComponent
|
|
},
|
|
{
|
|
path: 'resume/:id',
|
|
component: ResumeComponent
|
|
},
|
|
{
|
|
path: 'links',
|
|
component: LinksComponent
|
|
}
|
|
];
|
|
```
|