Angular 2 Tutorial – 37 – Redirects and pathMatch [w/ subs]



00:00:00 – welcome back everyone tutorial number 37
00:00:02 – and in this video we are going to learn
00:00:04 – how to redirect pads using angular
00:00:07 – Slugger now in the last video we
00:00:10 – configured the empty pad so when we
00:00:13 – navigate to just localhost colon 3000
00:00:17 – the Department list component is going
00:00:19 – to be displayed but a better way to do
00:00:22 – this and avoid duplication of roads is
00:00:26 – to just redirect this road to
00:00:28 – departments so when there is an incoming
00:00:31 – request for an empty pad we will just
00:00:33 – redirected to this departments pad and
00:00:37 – this pad is going to display the
00:00:39 – Department list compliment which is
00:00:41 – exactly what we needed in the first
00:00:43 – place so to redirect we are going to use
00:00:47 – a property called redirect to so instead
00:00:51 – of specifying compliment
00:00:52 – we're going to specify the pad to which
00:00:55 – we need to redirect to and that is
00:00:57 – department and also need to add a front
00:01:00 – / but now if we save our application and
00:01:05 – head over to the browser and that it
00:01:06 – reload you see that we get another and
00:01:09 – our application does not work and the
00:01:13 – error is basically telling us please
00:01:15 – provide Pat match now whenever we
00:01:19 – redirect we need to include an
00:01:22 – additional property called Pat match so
00:01:25 – let's go ahead and specify that in our
00:01:27 – code so to this redirect pad we are
00:01:31 – going to have a pad match property now
00:01:34 – this part match is going to accept two
00:01:37 – values or either one of the two values
00:01:39 – the first one is prefix and the second
00:01:43 – one is full now to demonstrate how the
00:01:48 – two values are going to affect our
00:01:50 – application let me use one value at a
00:01:53 – time
00:01:53 – now the first value is prefix and where
00:01:59 – the value is prefix it means that apply
00:02:02 – this route or apply the redirect if the
00:02:05 – prefix to the URL is the path specified
00:02:09 – or in simpler terms if the URL
00:02:13 – begins with this empty string then
00:02:16 – redirected now the problem with this is
00:02:20 – that empty string is a prefix to every
00:02:24 – single URL so any URL that you enter it
00:02:28 – gets redirected to Department list
00:02:31 – component so let's have a look in our
00:02:34 – application i'm going to save this and
00:02:36 – when the application reloads so there
00:02:41 – you go
00:02:41 – it was initially i'm going to provide
00:02:43 – blank on an empty string and it
00:02:46 – redirects when i click on employees it
00:02:49 – doesn't navigate to employ list it still
00:02:51 – redirect when i click on angular it's
00:02:54 – still redirect that is because every
00:02:56 – single URL / employees or / department /
00:03:00 – ID for every URL the prefix is empty
00:03:04 – string so that is why it is going to
00:03:07 – redirected every single time
00:03:09 – now the second value is the full value
00:03:16 – so anytime you use redirect make sure
00:03:23 – that you use a pad match value of full
00:03:27 – so this basically means only when the
00:03:31 – entire URL for the full URL is blank
00:03:35 – then redirect to department so let's
00:03:39 – save this and go ahead and have a look
00:03:41 – I'm gonna just enter low close 3000 then
00:03:46 – it navigates to slash department or
00:03:48 – redirects to Department and the
00:03:50 – Department list is displayed and if i go
00:03:52 – to employees employee list is displayed
00:03:54 – and if i click on angular angular
00:03:56 – Department detail gets displayed now the
00:04:01 – application we have is pretty small and
00:04:03 – that is why i have explained redirecting
00:04:06 – with an empty pad but in a full-fledged
00:04:09 – application make sure that any time you
00:04:11 – redirect it has a patch of full unless
00:04:15 – of course using part much of prefix is
00:04:18 – your intention so anyway that's about
00:04:21 – redirecting and the path much property
00:04:23 – thank you guys for watching I'll see you
00:04:25 – guys in the next one


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

(Visited 3 times, 3 visits today)

Comments

comments