From 78d24383c6afcc954aa0ed0ab7bcc208ac9f4160 Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Tue, 20 Jun 2017 00:24:21 -0400 Subject: [PATCH] starting url params lecture --- README.md | 2 +- router/src/app/resume/jobs.ts | 22 ++++++++++++++++++ url_params.md | 42 +++++++++++++++++++++++++++++++++++ 3 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 router/src/app/resume/jobs.ts create mode 100644 url_params.md diff --git a/README.md b/README.md index 147774a..0ca149d 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ 1. [:10] Lecture/Demo: [What is Push State?](what_is_push_state.md) 1. [:15] Lesson: [What is routing?](what_is_routing.md) 1. [:15] Lesson/Code-along: [Routing in Angular](routing.md) -1. [:15] Lesson/Code-along: URL Params +1. [:15] Lesson/Code-along: [URL Params](url_params.md) 1. [:15] Lesson/Code-along: Nesting 1. [:10] Lesson: Summary 1. [:15] Lesson/Demo: APIs diff --git a/router/src/app/resume/jobs.ts b/router/src/app/resume/jobs.ts new file mode 100644 index 0000000..0753303 --- /dev/null +++ b/router/src/app/resume/jobs.ts @@ -0,0 +1,22 @@ +export const JOBS = [ + { + id:1, + title: 'Software Engineer', + location: 'Initech', + dates: '2003-2008', + description: 'I HAVE PEOPLE SKILLS!!' + }, + { + 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: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.' + } +] diff --git a/url_params.md b/url_params.md new file mode 100644 index 0000000..c6746b2 --- /dev/null +++ b/url_params.md @@ -0,0 +1,42 @@ +# 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:1, + title: 'Software Engineer', + location: 'Initech', + dates: '2003-2008', + description: 'I HAVE PEOPLE SKILLS!!' + }, + { + 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: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.' + } +] +``` + +## Use the data file to generate links