Angular 2 Fundamentals 46 [w/ subs]



00:00:01 – just like we use can activate to prevent
00:00:04 – the user from navigating to a page we
00:00:06 – can use can deactivate to prevent a user
00:00:09 – from leaving a page this is often
00:00:11 – helpful if for example you want to warn
00:00:13 – your user if they try to navigate away
00:00:15 – from a page before saving their data so
00:00:18 – let's add a route guard to the create
00:00:20 – event page that one is the user if they
00:00:23 – try to cancel before saving their event
00:00:25 – so we'll start by adding a can
00:00:28 – deactivate property to our create event
00:00:31 – route and remember we said that there
00:00:34 – are two ways to add route guards you can
00:00:36 – either use a function or a service in
00:00:38 – our can activate example we use the
00:00:41 – service but we don't need something that
00:00:43 – involved for our can deactivate so let's
00:00:46 – just use a function so to use a function
00:00:48 – you just add the function name here so
00:00:51 – we'll create a new function called can
00:00:53 – deactivate create event so the question
00:00:56 – is where do you define this function
00:00:57 – well we just need to register this as a
00:01:00 – provider in our module let's go over to
00:01:02 – our module and then down here in our
00:01:05 – providers we've been defining providers
00:01:08 – using this shorthand approach if we take
00:01:11 – a look at this event service provider
00:01:13 – another way we could provide this is
00:01:15 – using the long hand approach like this
00:01:19 – so this is the long hand forum that says
00:01:22 – when this is requested use this to
00:01:25 – fulfill it and it just makes a lot more
00:01:27 – sense to use the shorthand form in the
00:01:29 – cases where we're using services but in
00:01:31 – this case we're going to be requesting a
00:01:34 – string can deactivate create event and
00:01:36 – for that we want to provide a function
00:01:38 – so we'll put that here and then for use
00:01:42 – value we'll create a function called
00:01:44 – check 30 state ok let's just put these
00:01:47 – on there online okay so now we need to
00:01:49 – define that function we could define
00:01:52 – that over in another file for ease of
00:01:54 – use let's just define it right here all
00:01:57 – right just to demonstrate this let's
00:01:59 – just have this return false right now ok
00:02:01 – let's go check this out if i refresh our
00:02:03 – create event page here and try to hit
00:02:06 – cancel you can see it no longer works
00:02:09 – the cancel button remember is wired up
00:02:11 – to send us back to the all events page
00:02:14 – it's being prevented by our route guard
00:02:16 – and not only is it being prevented here
00:02:18 – but also if I click on anything that
00:02:20 – would take me away from this page it
00:02:22 – prevents me from doing that so that's
00:02:24 – pretty awesome how easy that is to just
00:02:26 – disable all navigation in your
00:02:28 – application using a route card okay so
00:02:31 – let's make this a little more
00:02:32 – interesting what we really want to do is
00:02:34 – prevent them from leaving this page only
00:02:36 – if they haven't saved their event so the
00:02:39 – question is how will this check dirty
00:02:41 – state function know the state of that
00:02:43 – component we have to have a way to know
00:02:45 – if they've saved the event or not well
00:02:47 – that's actually really easy
00:02:48 – the very first parameter that is passed
00:02:51 – into your can deactivate function is to
00:02:53 – compile them itself so let's go take a
00:02:55 – look at our create event component if we
00:02:58 – were to define a property on this
00:02:59 – component that represented the component
00:03:01 – state we could access that property in
00:03:03 – our candy activate function for now
00:03:06 – let's just add an is dirty property on
00:03:08 – the component like this okay so we've
00:03:11 – created this is dirty property and its
00:03:13 – default it's true and this is
00:03:15 – essentially a public property so over in
00:03:18 – our check dirty State function if we
00:03:20 – grab that component that's being passed
00:03:21 – in then we can check that is dirty
00:03:24 – property like this alright and if the
00:03:26 – component is dirty let's call the HTML
00:03:29 – confirm dialog and return the result
00:03:32 – like this and then if the component is
00:03:36 – not dirty we can just return true okay
00:03:39 – cool let's go check that out so let's
00:03:41 – refresh this page now if I hit cancel
00:03:44 – okay cool and I'm getting this
00:03:46 – confirmation dialogue it says you have
00:03:48 – not saved this event do you really want
00:03:50 – to cancel
00:03:50 – and if I say cancel it will not and if I
00:03:54 – say ok it will and then just to show
00:03:56 – that this is really based on the state
00:03:58 – of that component let's go make that
00:04:00 – component return true a return false so
00:04:04 – now it's not considered dirty so now if
00:04:07 – I hit cancel it will just work of course
00:04:09 – we'll want this to do something more
00:04:11 – than just return true or false and we'll
00:04:13 – come back to this when we wire up our
00:04:15 – create event form and make this return
00:04:17 – something reasonable alright cool that's
00:04:19 – all there is to adding a candy activate
00:04:22 – route guard and there's a practice
00:04:24 – exercise for this clip so go check that
00:04:26 – out


Video Url:
http://youtu.be/zfIyZWygZhk

Comments

comments