- 00:00:01 welcome to this video why is my angular
- 00:00:05 app losing its state if I reload the
- 00:00:08 page or if I switch to different pages
- 00:00:10 inside my app now this is a question we
- 00:00:13 get sometimes from you and in this video
- 00:00:15 we'll have a look at the reason why this
- 00:00:17 is actually happening
- 00:00:21 for that I prepared a little example app
- 00:00:24 the app is pretty simple I must say
- 00:00:26 because we simply have these two
- 00:00:29 navigation bars so this one right here
- 00:00:31 and this one right there as you can see
- 00:00:33 for this navigation bar we will use a
- 00:00:36 hyper reference so a default HTML
- 00:00:39 functionality and for the second
- 00:00:41 navigation bar we will use router links
- 00:00:43 so we will use the angular router in the
- 00:00:45 end we have three different pages in our
- 00:00:49 apps or home products and about the same
- 00:00:51 for both of these and we have the page
- 00:00:53 content down here the page content of
- 00:00:56 course should change depending on what
- 00:00:58 we select right here so now we have home
- 00:00:59 if we select products they should be
- 00:01:01 products and so on down there we have an
- 00:01:04 input field where we can enter some data
- 00:01:06 and the data is also displayed right
- 00:01:08 here below our input field now at the
- 00:01:11 moment none of these links is working
- 00:01:12 because I didn't implement any of these
- 00:01:14 linking or routing functions so far so
- 00:01:17 let's go to the code and start with the
- 00:01:19 hyper reference here before we do that a
- 00:01:22 quick look at the code also as you can
- 00:01:24 see we will work in the app component
- 00:01:26 HTML file here we can see the code
- 00:01:29 nothing special
- 00:01:30 important I already added the router
- 00:01:32 outlet down here and as you can imagine
- 00:01:34 in our app module I also implemented our
- 00:01:38 imports for the routes and the router
- 00:01:40 module up here
- 00:01:41 I had a D constant we need for our
- 00:01:43 different paths and down here I also got
- 00:01:46 your router module import and up here
- 00:01:48 you can see our components we have so
- 00:01:51 the about component for example looks
- 00:01:52 like this
- 00:01:53 nothing fancy same thing is true for
- 00:01:55 home and products and we also got the
- 00:01:57 input component for our input field but
- 00:02:00 let's focus onto our losing state issue
- 00:02:04 that we have because we can now say that
- 00:02:07 we simply use a hyper reference right
- 00:02:09 here this means we just add the hyper
- 00:02:12 reference here and say this should
- 00:02:14 direct us to slash because basically
- 00:02:17 this will lead us back to our current
- 00:02:19 our starting our home page then we could
- 00:02:22 add right here a hyper reference
- 00:02:24 directing us to slash products so our
- 00:02:27 products page and then we could have a
- 00:02:30 hyper reference which could direct us to
- 00:02:33 slash about
- 00:02:35 like that maybe I should also add the
- 00:02:38 slash right here so with that if I go
- 00:02:40 back to the app and as we can see it
- 00:02:42 reloads already the entire app if I now
- 00:02:45 click on two products you can see that
- 00:02:47 the page content now says we are on the
- 00:02:50 products page so this component
- 00:02:52 basically was loaded and we can also go
- 00:02:55 to about right here like that and here
- 00:02:58 we are at the on the about page and if
- 00:03:00 we go back to home we are back on the
- 00:03:02 home page you can also see this up here
- 00:03:03 in the URL we have the logos 4200 page
- 00:03:06 right here if I go to products we have
- 00:03:08 slash products so this is working
- 00:03:11 basically but there are some problems
- 00:03:13 with this approach the first problem
- 00:03:16 becomes evident if you look at this
- 00:03:17 angular symbol up here because if I now
- 00:03:20 select about for example can you see it
- 00:03:23 the page is reloading because whenever
- 00:03:26 we use and hyper reference then
- 00:03:29 navigating the different page means that
- 00:03:31 our entire app is reloaded so the app
- 00:03:34 basically loses its entire state this
- 00:03:37 becomes even more evident if I go down
- 00:03:39 right here into our input field and add
- 00:03:41 something like Hello and if I now go
- 00:03:43 back to the home page for example well
- 00:03:46 what can you see
- 00:03:47 we can see that the page again reloaded
- 00:03:50 and it lost its state because the input
- 00:03:53 we added to our input field right here
- 00:03:54 is gone the page basically looks the
- 00:03:57 same way it would look if we would visit
- 00:03:59 the website for the first time and
- 00:04:01 that's of course what you normally don't
- 00:04:02 want in your angular app because the
- 00:04:05 angular app should be a single page
- 00:04:06 application with this mobile like
- 00:04:08 feeling so if I switch to products right
- 00:04:11 here I don't let me have this reload
- 00:04:12 symbol down there up there I don't want
- 00:04:14 the page to reload and of course I also
- 00:04:17 don't want my state to be lost all the
- 00:04:18 time now for this reason we do not use
- 00:04:22 the hyper reference in our angular apps
- 00:04:24 but we use the router link here because
- 00:04:28 with router link we can prevent this
- 00:04:30 default behavior of the page being
- 00:04:32 reloaded and we can simply navigate
- 00:04:34 smoothly between the different pages
- 00:04:36 that we have without that's important
- 00:04:38 without losing the state of our app now
- 00:04:41 let's implement the router link now and
- 00:04:43 let's then see what the difference look
- 00:04:45 like for that we just go back and
- 00:04:48 I'll go down here to our second lift
- 00:04:50 this one right here which contains the
- 00:04:52 using a router link paragraph so let's
- 00:04:55 add router link right here and the links
- 00:05:00 are exactly the same so nothing to
- 00:05:01 change about here so we can add this
- 00:05:03 link right here then let me quickly copy
- 00:05:07 that maybe here and right there so this
- 00:05:12 one should go to slash products oops and
- 00:05:14 this one should go to slash about like
- 00:05:19 that saving this and going back to the
- 00:05:21 app will now allow us to use both so
- 00:05:24 still the hyper reference is working
- 00:05:26 it's a bit slow right here by the way in
- 00:05:28 my case because it's really hot here in
- 00:05:31 Munich and my macbook also feels kind of
- 00:05:33 a bit too hot so sorry for that but as
- 00:05:36 you can see the hyper reference is still
- 00:05:38 working if I click on two products we
- 00:05:40 can still navigate with that again with
- 00:05:42 our beautiful loading spinner up here
- 00:05:44 but if I now click on to you about right
- 00:05:46 here in our using router link section
- 00:05:48 like that then you can see that the page
- 00:05:51 content instantly changes products home
- 00:05:54 can you see it we don't have any kind of
- 00:05:57 loading spinner we can quickly navigate
- 00:05:59 between the different pages on our
- 00:06:01 website without any reloading and
- 00:06:03 without losing the state I can prove
- 00:06:07 this to you if I enter hello once again
- 00:06:09 right here and if I now click on to you
- 00:06:12 products can you see it the page content
- 00:06:15 changes but our state down here doesn't
- 00:06:19 get lost and that's a really cool
- 00:06:21 feature of this router linker of the
- 00:06:24 angular router in the end and now you
- 00:06:26 might ask yourself how is this actually
- 00:06:28 working well we can have a closer look
- 00:06:30 at that if we first prevent the default
- 00:06:33 behavior of our hyper reference appear
- 00:06:35 for that we can simply go back to the
- 00:06:37 code and here we can now add our click
- 00:06:41 listener which we name let's say on
- 00:06:45 click don't forget to add the dollar
- 00:06:49 sign right here like this and now we can
- 00:06:53 copy this two times for our products and
- 00:06:57 for our
- 00:07:00 about Paige and in the app component we
- 00:07:04 can also quickly add it right here so
- 00:07:07 it's on click that and now we can
- 00:07:14 prevent the default behavior like that
- 00:07:18 so if we now go back to our page we can
- 00:07:21 see that if I click on two products or
- 00:07:23 about right here nothing is happening
- 00:07:26 because we prevent that default behavior
- 00:07:28 and actually that's exactly what our
- 00:07:31 router link or the angular router is
- 00:07:33 doing right here because if we quickly
- 00:07:35 inspect one of the links right here it's
- 00:07:38 kind of slow again because as I said the
- 00:07:41 MacBook is close to its limit apparently
- 00:07:44 when it's a little bit hotter outside or
- 00:07:46 inside this room but nevertheless let's
- 00:07:48 inspect products right here and maybe
- 00:07:50 select the elements tab out there so as
- 00:07:54 you can see we are now here in our
- 00:07:55 products link and in this link we also
- 00:07:58 have a hyper reference so basically the
- 00:08:01 behavior or the general link idea would
- 00:08:04 be the same as for the hyper reference
- 00:08:06 but angular prevents this default
- 00:08:08 behavior and applies its own logic to it
- 00:08:11 now what is the own logic well as we
- 00:08:13 defined right here for our router link
- 00:08:15 down here that it should navigate to
- 00:08:17 slash products then in our app module
- 00:08:20 right here we can see that angular or
- 00:08:24 the angular router will then simply say
- 00:08:26 ok I want to navigate you products
- 00:08:29 therefore I should load the products
- 00:08:31 component right here same thing would be
- 00:08:33 true for about or for the actual home
- 00:08:35 page and in our HTML file with the
- 00:08:39 router outlet down here we simply tell
- 00:08:42 our website or we tell angular where
- 00:08:45 this new component should be loaded and
- 00:08:48 this is it actually so the next time you
- 00:08:51 work on your angular app and your state
- 00:08:53 gets lost if you reload the page or if
- 00:08:55 you navigate to different pages inside
- 00:08:58 your app then think about the angular
- 00:09:00 router and how you can use router link
- 00:09:03 to make sure such a loss is not
- 00:09:05 happening to you so thanks a lot for
- 00:09:07 watching and I hope to see you in the
- 00:09:09 next videos bye
