From c26ffdd4db2d9faa32dfa141872d68456727f7ca Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Mon, 19 Jun 2017 18:54:06 -0400 Subject: [PATCH] what_is_push_state.md --- README.md | 2 +- what_is_push_state.md | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 what_is_push_state.md diff --git a/README.md b/README.md index 91d636c..b10f718 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ 1. [:05] Video: [Quick intro to SPAs and Push state](video_intro_to_spa.md) 1. [:10] Lecture/Demo: [What is a SPA?](what_is_a_spa.md) -1. [:10] Lecture/Demo: What is Push State? +1. [:10] Lecture/Demo: [What is Push State?](what_is_push_state.md) 1. [:15] Lesson: What is routing? 1. [:15] Lesson/Code-along: Routing in Angular 1. [:15] Lesson/Code-along: URL Params diff --git a/what_is_push_state.md b/what_is_push_state.md new file mode 100644 index 0000000..f6b6cf9 --- /dev/null +++ b/what_is_push_state.md @@ -0,0 +1,34 @@ +# What is Push State? + +# Lesson Objectives + +1. Describe PushState +1. Demonstrate a SPA that uses Push State + +## Describe PushState + +- PushState allows JavaScript to alter the browser's history as if a user is clicking on links and loading brand new pages +- This gives the appearance of the user actually visiting new pages +- If the application is set up correctly, it allows deep linking so that users can bookmark and share links to specific aspects of an application as if it were a page itself +- The user can use the back/forward buttons of the browser to move back/forward through their history of the various states they've used of the application. + - Now it behaves just as if they were viewing multiple pages of a traditional site + +## Demonstrate a SPA that uses Push State + +1. Go to [Google Maps](https://www.google.com/maps/) + 1. Pan/zoom around + 1. Observe how the URL changes + 1. Copy the URL after it's changed + 1. Note what the map currently looks like + 1. Close the window + 1. Open a new window and paste the copied URL into the URL bar. Hit enter (duh) + 1. Note that the page has opened to show the map exactly as it was when we copied the URL +1. Go to a public [Trello](https://trello.com/) + 1. Note the current URL + 1. Open a card by clicking on it + 1. Note how the URL has changed + 1. Copy the URL after it's changed + 1. Note which card has been opened + 1. Close the window + 1. Open a new window and paste the copied URL into the URL bar. Hit enter (duh) + 1. Note that the page has opened to show the card that was opened when we copied the URL