Angular 2 | Tutorial 18 | Login App | Part 2 | TutorialsPoint [w/ subs]



00:00:00 – so what is going on YouTube my name is
00:00:02 – May hold on welcome to your 18 angular
00:00:05 – tutorial in which we are going to finish
00:00:07 – off with our login application a very
00:00:09 – basic one implemented using angular and
00:00:12 – angular routing and would be
00:00:15 – implementing angular service right so
00:00:18 – what I'm going to do is hop over to my
00:00:21 – command line and I'm going to say kimchi
00:00:23 – generate service let's just name it user
00:00:27 – and hit enter so you can see that it
00:00:31 – generates a service but it wants me that
00:00:33 – the service is generated but it must be
00:00:35 – provided to be used right so that is
00:00:37 – okay
00:00:38 – so we can go to this user service now
00:00:40 – and pretty much see that it has Gaul got
00:00:43 – a constructor for now and what we can do
00:00:46 – is we can go ahead and say that this is
00:00:49 – private is user login if you click false
00:00:54 – or we can say fry wait
00:00:57 – or let's just initialize these values in
00:01:01 – constructor let's just say user name for
00:01:04 – now so we're going to say is user is the
00:01:10 – user logged and rather this studies user
00:01:15 – logged in is equal to false right so we
00:01:18 – can say this has a set user logged in
00:01:24 – and returned this dot or rather just set
00:01:31 – this studies user login to true and we
00:01:34 – can against that get user logged in and
00:01:38 – just return this dot is user logged in
00:01:42 – property right so we have got the
00:01:45 – service now what we want to do is go to
00:01:49 – our app modules and inside air inside
00:01:54 – providers I want to fast then this
00:01:58 – service user user or we have user
00:02:04 – service right
00:02:06 – so we can passing user service in here
00:02:11 – and we can import the service as well
00:02:13 – input user service from user service
00:02:22 – right and now if you take a look then we
00:02:28 – have our user service available with us
00:02:30 – inside our whole application so now we
00:02:33 – can do is go to our login component and
00:02:40 – we can say then I'll insert constructor
00:02:44 – we get another dependency which is
00:02:47 – private private the user and we pass
00:02:52 – this other user service so that angular
00:02:54 – knows and again we can just import user
00:02:58 – service from user dot service just like
00:03:03 – that and it's actually right there right
00:03:09 – okay so now we have our user service
00:03:13 – with us so what I'm going to do is
00:03:15 – pretty much say instead login user if
00:03:20 – user name is to send this I'm going to
00:03:24 – call user dot set user logged in which
00:03:30 – is probably I think this study user
00:03:34 – right was the property name so if we can
00:03:38 – just close all of this right so or you
00:03:45 – can just open the service set user
00:03:47 – logged in is the name okay alright so I
00:03:50 – went over and created a service but
00:03:53 – don't worry about that we'll be learning
00:03:55 – about service in more detail later on
00:03:57 – but we just need a very simple service
00:04:00 – right now and what the service basically
00:04:02 – would do is pretty much it would
00:04:05 – maintain a state for a user so that we
00:04:07 – our application could know that the user
00:04:10 – is actually logged in and the service
00:04:12 – would be same inside all the components
00:04:14 – if we want to include so now we can just
00:04:18 – go ahead
00:04:18 – and included in our dashboard component
00:04:22 – again so I'm just going to go with this
00:04:25 – one and say hi red users and this is
00:04:29 – just a dependency injection to let
00:04:32 – angular know that you have to insert
00:04:37 – this dependency right here right so we
00:04:40 – use a risk correct name and we can just
00:04:42 – import user service from user Dalek
00:04:47 – service like that and then what we can
00:04:51 – say now what I'm going to do next is
00:04:54 – actually create a god so a god add the
00:04:58 – name suggest actually gods your route
00:05:00 – again you know unauthorized access in
00:05:03 – our case so what this god would pretty
00:05:06 – much do is that it would create it would
00:05:10 – actually create a check before the route
00:05:13 – actually takes place right so if you
00:05:15 – have done angular one somewhere then you
00:05:20 – really must know that you used to have
00:05:21 – results there you still with them do
00:05:24 – have results here but they are very much
00:05:27 – gold as gods right now so to generate a
00:05:31 – god what we're going to do is again go
00:05:34 – back to our terminal and inside here I'm
00:05:36 – going to run it ng generate God
00:05:39 – and let's just say auth card we name it
00:05:43 – right so again I'm not going to go a lot
00:05:47 – into details into gods right now we're
00:05:49 – going to cover that as a separate topic
00:05:51 – but since we need it for our login
00:05:54 – applications so I'm just going to
00:05:56 – quickly go through over it so if we take
00:05:59 – a look at what angle it has generated
00:06:01 – for us is this odd card file right so it
00:06:07 – automatically implements this can
00:06:08 – activate method which is actually fired
00:06:14 – before our route transition takes place
00:06:17 – right so if can activate returns false
00:06:20 – or our route then the route would be
00:06:22 – stopped so that's pretty much what's
00:06:25 – left for us to implement and before
00:06:28 – implementing that what I want to do is
00:06:31 – actually finally
00:06:32 – go to our routes which is in our app
00:06:35 – module and right with the dashboard I
00:06:38 – want to say can activate is another
00:06:42 – property and I want to facet with the
00:06:46 – odds Scott is that what we have Oh God
00:06:51 – God okay so I added this god but anyways
00:06:56 – let's the school with that only now so
00:06:58 – this is odd God God and I can just input
00:07:02 – the same thing from Oh God God like that
00:07:10 – and we can just put a comment there so
00:07:13 – now we are ready to rock and roll into
00:07:16 – our or that and inside its definition
00:07:19 – what I'm gonna say is that to actually
00:07:26 – implement a lot of stuff so that we can
00:07:30 – implement one more thing and that would
00:07:32 – be a private user which is user session
00:07:36 – one last time or is that what we named
00:07:40 – it use a service rate so we can now just
00:07:45 – input user service from user dot service
00:07:52 – I guess that's what it was right so now
00:07:56 – what we can say or rather not this one
00:08:00 – not like that we have to do that inside
00:08:03 – our constructor constructor like that
00:08:08 – and now we can pretty much access return
00:08:12 – this dot user dot inside a user service
00:08:17 – we can say get user logged in right okay
00:08:22 – so now if you see our app we can very
00:08:27 – much try to go to dashboard and you
00:08:30 – would see that we get an error so we
00:08:35 – have to add this rider into provider as
00:08:39 – well and there we go so if we now try to
00:08:43 – go into – Bo
00:08:45 – would you would see very much that we
00:08:48 – got nothing and instead we are not shown
00:08:51 – anything because our route is actually
00:08:56 – canceled right from the port guard so
00:09:00 – when it returns false
00:09:01 – it pretty much gasses our roads so if I
00:09:03 – try to reload the app and I do like
00:09:06 – admin admin and hit login you can see
00:09:09 – that we get your authenticated go back
00:09:11 – and we try to pretty much reload this
00:09:17 – app and again go to dashboard you would
00:09:20 – see that it does not work it throws us
00:09:23 – back to the previous page because of
00:09:25 – this god implemented so that is how
00:09:28 – pretty much we can create a very basic
00:09:30 – application login application with
00:09:33 – angular and yes so that's all for this
00:09:37 – one and you would find all the code in
00:09:39 – the description and we're going to
00:09:40 – implement or we're going to discuss
00:09:42 – about services and gods later on in
00:09:45 – depth in this angular series so don't
00:09:50 – worry about that if you do not even you
00:09:54 – know if you have if you are like
00:09:56 – confused that what God is used for what
00:09:59 – services are used for then don't worry
00:10:01 – about that we're going to again take a
00:10:04 – deeper look into that later on in the
00:10:06 – service so that's all for this one and
00:10:08 – if you liked it then please don't forget
00:10:09 – subscribe and thank you for watching
00:10:11 – I'll see you then in the next one


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

Comments

comments