Angular 2 | Tutorial 20 | Advanced Routing | TutorialsPoint [w/ subs]



00:00:00 – what's going on YouTube my name is May
00:00:03 – ho and welcome to your 21st tutorials
00:00:06 – for angular and in this tutorial I'm
00:00:09 – going to go a bit deeper into routes in
00:00:12 – angular and how pretty much we can
00:00:15 – create some complex routing patterns and
00:00:17 – match them with angular so we have seen
00:00:22 – how we can create some basic routes like
00:00:24 – just a normal route and then going to
00:00:27 – the dashboard which very much allows us
00:00:29 – to go to something like during dashboard
00:00:31 – right but right now it doesn't work
00:00:34 – because of the guard in place but anyway
00:00:36 – so we can just get rid of this if you
00:00:38 – want but I'm just keep that in place
00:00:42 – right so now what we can do is we can
00:00:46 – create a new route which again would be
00:00:48 – like the safe distance users right so
00:00:52 – let's say you are creating an
00:00:55 – application for your internal network or
00:00:58 – whatever it is where you have associated
00:01:01 – every user in your company with an ID so
00:01:04 – what you want is that people should be
00:01:06 – able to access something like users and
00:01:09 – then the ID of that user or maybe
00:01:12 – something like the user name something
00:01:14 – like this right so it pretty much looks
00:01:17 – like you want a pattern something like
00:01:19 – this in regular expression right users
00:01:22 – and then match anything after that
00:01:24 – and pretty much angular would take care
00:01:26 – of that what is being passed by the URL
00:01:31 – right so in angular what we do is that
00:01:35 – we create a token out of it so you can
00:01:38 – really must say is like users and then
00:01:40 – an ID or a name or whatever you want to
00:01:44 – call this right so with this you have
00:01:46 – created a token inside the URL so now
00:01:49 – angular knows that user would be passing
00:01:52 – some sort of dynamic data it could be
00:01:54 – anything but we actually need to
00:01:56 – retrieve that later on so we're going to
00:01:59 – show that right again we can create a
00:02:02 – component for this and we can just say
00:02:04 – this is user component and we can create
00:02:09 – this component by ng hundred compose
00:02:12 – and you're saying user so it would
00:02:15 – create a user component for us and I
00:02:19 – guess we would lose these changes so I'm
00:02:22 – not going to reload this I'm going to
00:02:23 – just import it manually you're going to
00:02:25 – stay in fold user component from user
00:02:33 – and then what we have a user component
00:02:38 – right and now we can just include this
00:02:41 – inside our declarations or we can just
00:02:46 – bring them down if you want like that so
00:02:52 – now we have this user component in
00:02:54 – action okay so now how do we actually
00:02:56 – make use of this token which the user
00:02:59 – would pass inside the URL inside our
00:03:02 – component so we go to our user component
00:03:05 – dot type script file okay so now to
00:03:09 – actually get the data we are getting
00:03:12 – from the route what we need to do is and
00:03:16 – by the way this ng on in it is nothing
00:03:18 – but a lifecycle call function of angular
00:03:21 – which is fires when your component is
00:03:24 – ready right so you don't need to worry a
00:03:26 – lot about this you can just make use of
00:03:28 – all of your code inside you can just
00:03:31 – write your code which you want to fire
00:03:33 – after the component is loaded inside
00:03:35 – here so what we need is we need an
00:03:39 – activated router which again we saw in
00:03:42 – our god I guess it was right but this
00:03:48 – was our snapshot anyways so what we can
00:03:52 – do is pretty much right here state
00:03:54 – private route and I can say the
00:03:58 – activated route and we can import import
00:04:08 – activated route from angular router
00:04:14 – right and then what we can do and
00:04:17 – actually this should go inside
00:04:18 – constructor because this is
00:04:23 – our dependency and right here I can stay
00:04:26 – this dot frog so as you see what we get
00:04:30 – inside our activated robots right now if
00:04:34 – I see we have our users and then our
00:04:38 – name so I'm going to go something like
00:04:40 – this and when I just fire up the console
00:04:44 – as well and hit enter
00:04:46 – ok so we see user works that is the
00:04:49 – default template but for activated round
00:04:52 – you see that we get the subject now
00:04:54 – let's just examine what this is it
00:04:56 – contains a lot of properties right and
00:04:58 – we are mainly interested in the
00:05:01 – parameter which is methyl impeded so if
00:05:04 – we take a look inside the snapshot and
00:05:07 – right here inside the subject you see
00:05:10 – that we get this name as maple MPT which
00:05:13 – is exactly what we wrote here that is
00:05:16 – the name the name is the name of the
00:05:19 – object or body and the value is what we
00:05:22 – passed in here so what we can do is very
00:05:25 – much right here we can say name is equal
00:05:31 – to nothing right and right here inside
00:05:35 – ng unnerve we can take this stuff name
00:05:37 – is this clutter out dot what we have is
00:05:41 – the snapshot as the property name and
00:05:43 – then we can get our parameter which is
00:05:46 – that's me and simply and I guess this is
00:05:53 – snapshot parameters not name right so
00:05:58 – now you can see that we can just get it
00:06:01 – like this but if you have pretty much
00:06:04 – yeah that would work right so now if we
00:06:06 – can do it inside our user component we
00:06:10 – can say hello and then name right here
00:06:14 – and it sees you can see that we get
00:06:17 – hello may whole MBD we can write
00:06:19 – anything like hello one two three here
00:06:21 – and this would just work fine I guess
00:06:24 – angular by default has some sort of
00:06:29 – protection for cross-site scripting yep
00:06:32 – you can see that you cannot pretty much
00:06:36 – do cross-site scripting a tagging just
00:06:38 – removes the script because it includes
00:06:40 – the tags so we can really must try a lot
00:06:44 – quit do with honestest yeah angular just
00:06:48 – products sanitizers your data
00:06:50 – automatically you do not need to do that
00:06:51 – so it's safe to work with right so with
00:06:56 – this you can create dynamic routes and
00:06:59 – something like I don't know if you write
00:07:02 – do if you have a service where you
00:07:04 – create an email address something like
00:07:08 – this what you can do is create an md5
00:07:11 – hash of this email address right here
00:07:14 – and display it in an image and get it
00:07:17 – from browser right so that you can
00:07:18 – actually display the image of the user
00:07:21 – associated with that crafter account
00:07:23 – which is pretty much you can do at least
00:07:29 – with angular for now right so again to
00:07:34 – sum up you can get your parameters with
00:07:37 – this dot robot snapshot and again you
00:07:40 – can create something like name and then
00:07:44 – ID as well if you want to and then if we
00:07:48 – take a look we get some errors it says
00:07:53 – that it cannot match any routes so what
00:07:58 – we can do is keep the original route in
00:08:02 – place right and one more thing about
00:08:03 – routes is that it starts matching from
00:08:07 – the top to bottom right so if there are
00:08:09 – two possible matches for a single URL
00:08:12 – then the match which comes first would
00:08:15 – be the route which would be preferred by
00:08:18 – angular I'm just going to show you an
00:08:20 – example real quick
00:08:22 – for that and for now we can do something
00:08:25 – like users pinhole amputee and 5 and hit
00:08:28 – enter see we just get phenomenal amputee
00:08:31 – because you're not making use of that ID
00:08:33 – so again we can just console.log this
00:08:38 – this cloud.com start the stock route dot
00:08:42 – what we have snapshot snapshot for terms
00:08:46 – right here
00:08:48 – and you can see that we get Marilyn
00:08:50 – Beattie and ideas life right so you can
00:08:52 – just make use of that as well
00:08:53 – okay so now before ending what I want to
00:08:57 – do is create a wild card route so right
00:09:00 – now you can see that if you was it
00:09:02 – something light which is not defined you
00:09:04 – see that we get an error in the console
00:09:07 – which says that cannot match any route
00:09:09 – which is quite useless because you would
00:09:12 – like to show a 404 not found at least to
00:09:16 – the user because you cannot implement a
00:09:18 – header for 404 because angular is
00:09:21 – running on the front end so at least you
00:09:23 – can just show the message that your page
00:09:25 – is not found so to do that what you can
00:09:28 – do is the inside your router you can
00:09:31 – make use of a wild card which is pack
00:09:34 – and then do a strips right here which
00:09:37 – pretty much saves that match everything
00:09:40 – and obviously you want it to be the last
00:09:42 – route in your route configuration
00:09:45 – because if you place it anywhere above
00:09:48 – then any route below that would not
00:09:51 – would not be ever executed by angular
00:09:54 – because as I said route should be
00:09:56 – executed in the order they are placed
00:09:58 – inside the staff house ray right so we
00:10:02 – can say like component is a not found
00:10:08 – component and again we can just quickly
00:10:11 – create this one we can say ng generate
00:10:14 – component not sound like that and it
00:10:22 – would be okay so we can do fast and
00:10:27 – component not found component like that
00:10:32 – and inside are not found component we
00:10:36 – can say for for not found right so now
00:10:41 – please take a look in our application
00:10:42 – and I visit any random page you can see
00:10:47 – that we get for for not found instead of
00:10:49 – you know just angular throwing a bunch
00:10:51 – of error messages and making us sad so
00:10:55 – again if you make this a little higher
00:10:59 – in the queue
00:11:00 – you would see that we would lose access
00:11:07 – to we will have access to a home road
00:11:11 – because it's the first one but if you
00:11:14 – try to with the users now or maybe even
00:11:17 – make a Liberty for which we have the
00:11:19 – route define you see that we do not get
00:11:22 – to the scout ever because angular starts
00:11:24 – matching from the top to bottom and it
00:11:26 – sees oh yeah we have got a white card
00:11:27 – and this matches this route so I'm just
00:11:30 – going to go with that so again you want
00:11:32 – this route or whatever role you want to
00:11:35 – have for a 404 to the last route in your
00:11:39 – script so that angular always considers
00:11:43 – this as the route when none of the above
00:11:46 – Road matches so yeah that's pretty much
00:11:49 – how you would make a basic routing with
00:11:53 – the angular and it's this is kind of
00:11:55 – like token based routing where you can
00:11:58 – split up your or make your URLs a little
00:12:02 – bit more dynamic and in the next
00:12:04 – tutorial we're going to go into a little
00:12:06 – bit more into routing and we can just
00:12:09 – pretty much ignore or basically improve
00:12:12 – this kind of structure which is made by
00:12:16 – making use of the children property
00:12:19 – inside these routes so yeah that's all
00:12:21 – for this one and if you liked it then
00:12:22 – please don't forget to subscribe and
00:12:24 – thank you for watching I'll see you then
00:12:26 – in the next one


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

Comments

comments