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



00:00:00 – hello youtube and welcome to your 17th
00:00:04 – angular tutorial in which we're going to
00:00:06 – take a look at how we can create a very
00:00:09 – basic login application with angular and
00:00:13 – what this application would pretty much
00:00:16 – need is service and some components to
00:00:20 – work with and routing obviously so that
00:00:23 – we can create different sections of the
00:00:25 – app which are accessible only by people
00:00:27 – who have authenticated we're going to
00:00:29 – implement all of this application on the
00:00:32 – client side only so there won't be any
00:00:34 – data base and all that stuff so again
00:00:37 – this application is not for you know
00:00:40 – taking your website or your any
00:00:44 – confidential details public with only
00:00:47 – this applications other means to secure
00:00:49 – them again you would need a database and
00:00:52 – you know back-end stuff involves to
00:00:55 – actually authenticate a user so anyhow
00:00:58 – let's get started and see how we can
00:01:00 – create a very basic login application
00:01:02 – with angular 4 so we're going to first
00:01:05 – of all I'm going to say ng generate
00:01:07 – component and we're going to need let's
00:01:10 – say your header right then generate
00:01:14 – component I'm going to say this is login
00:01:18 – form and then we're going to say ng can
00:01:24 – create component footer I don't know we
00:01:27 – would if we would even make use of
00:01:30 – footer component but anyways so we have
00:01:34 – the setup footer and login form so what
00:01:37 – we can do is in our app component which
00:01:40 – just say this hello world for now we can
00:01:42 – bring a save as this the full page and
00:01:46 – we can say right here this is app header
00:01:49 – and this app header by the way would be
00:01:53 – the name of our tag which would be here
00:01:57 – which is the selector which would show
00:01:59 – this header component HTML template so
00:02:03 – this is our hospital this would be our
00:02:07 – at the login form and again I'm not
00:02:11 – making use of or
00:02:13 – right now but we'll just implement that
00:02:15 – later on and you can find all of this
00:02:18 – code in the description if you want to
00:02:19 – just follow along and don't want to type
00:02:22 – all the code yourself so I'll just post
00:02:24 – that link in the description so now if
00:02:27 – you save this you can see that we get
00:02:29 – header works login form works and for
00:02:31 – the works which is nice so what I'm
00:02:34 – going to do is pretty much go to this
00:02:36 – header and they do it go down and why
00:02:43 – not let's just enclose this in header
00:02:45 – and we can go to its own specific CSS
00:02:50 – which would be applied to only this
00:02:52 – component so we can simply say header is
00:02:56 – a display or it's actually display block
00:03:02 – itself so we're going to say
00:03:03 – text-align:center we can say padding 20
00:03:10 – pixels zero font size font size is 30
00:03:17 – pixel and we would get go down like that
00:03:21 – or we can just give it a bottle bottom
00:03:24 – of two pixels solid so I'm just going to
00:03:27 – apply some more styles and more HTML to
00:03:33 – this login form and would get back to
00:03:35 – you then alright so I'm back and I have
00:03:39 – just styled this form a little just
00:03:41 – create a username and password field so
00:03:43 – if you take a look in login form you can
00:03:45 – see that it's fairly simple form with
00:03:47 – the div class input with the input type
00:03:50 – text field which is user name and then
00:03:52 – we have a password field right and in
00:03:55 – photo we have just the simple notice and
00:03:57 – then this login form has this little CSS
00:04:00 – and by the way this host what this host
00:04:03 – does is it actually targets this thing
00:04:06 – right here it is this app login form tag
00:04:08 – right so all the CSS since it is all
00:04:12 – locally scoped inside this so in order
00:04:15 – to actually target this app login from
00:04:17 – die we will need to make use of this
00:04:19 – host right so again I'm making use of a
00:04:22 – Flex container
00:04:24 – so that though we can just arrange that
00:04:26 – nicely in all sort of stops all soft
00:04:29 – layouts so now let's just get to angular
00:04:32 – work I'm going to go with login form and
00:04:36 – what I'm going to do is save form submit
00:04:39 – which creates our one-way data-binding
00:04:42 – I'm going to say a login user and for
00:04:48 – login form component we can say login
00:04:51 – form component type script we can pretty
00:04:55 – much go in here and say login user is
00:04:57 – the method which just gives the straight
00:05:00 – event and this could be anything but we
00:05:03 – need to pass in the event even fright
00:05:06 – here and what we can say is the VAR
00:05:10 – username is equal to or we can actually
00:05:13 – we could have done this with ng-model as
00:05:16 – well it's up to you how you want to do
00:05:18 – this we can say e dot elements dot or
00:05:23 – since it would be the first field dot
00:05:26 – value and war password is e dot elements
00:05:32 – 1 dot value now we can very much this
00:05:37 – console.log username and password to see
00:05:40 – if everything's working fine sip enter
00:05:43 – and login actually it's just returning
00:05:51 – us so it's actually submitting the form
00:05:57 – so let's just not make this summit but
00:06:00 – rather button and what we can do is very
00:06:03 – much but then I guess we will have some
00:06:07 – problems so let's just stick to this and
00:06:10 – say e dot free range default right here
00:06:14 – and now let's just add some text and hit
00:06:17 – login so we still see some errors which
00:06:21 – is the console dot log let's just say e
00:06:25 – right here where we get we get this as
00:06:31 – an event and there actually do is either
00:06:35 – target not just E
00:06:37 – right okay so now if we take a look and
00:06:46 – enter some text and hit login we get s
00:06:49 – DSN SDF has a username and password so
00:06:51 – now what we need to do is compare this
00:06:54 – to a particular value and then perform a
00:06:57 – redirect if the value is that particular
00:07:01 – thing so let's just say username is
00:07:03 – admin and and password is admin as well
00:07:07 – what I want to do is actually
00:07:09 – authenticate the user and more or less
00:07:13 – something like redirect him to the
00:07:15 – dashboard so before doing that what we
00:07:18 – need to do is actually implement routing
00:07:20 – for the dashboard so that we can
00:07:24 – actually make that so what I'm going to
00:07:27 – do is go again here and say ng CH and
00:07:30 – great component dashboard area or let's
00:07:36 – just make it to dashboard only so now we
00:07:39 – have the dashboard with us or what I can
00:07:42 – do is pretty much you are authenticated
00:07:48 – like that and then now finally we can go
00:07:52 – to our app modules to actually write
00:07:58 – some routers right so we can say router
00:08:04 – module and routes from angular routes
00:08:12 – router rather router module okay so now
00:08:20 – inside in both we can say router module
00:08:27 – dot for route and there goes our a
00:08:32 – browse right and then we can say cough
00:08:39 – rouse is routes which is an array
00:08:44 – of routes which consists of part as a
00:08:52 – login or do we have that no dashboard
00:08:58 – actually – food and component as what we
00:09:07 – have in here as a dashboard component
00:09:10 – right and then we can say is the part
00:09:16 – distinct component as a login form
00:09:21 – component right so now what we need to
00:09:25 – do is make use of router outlet right
00:09:30 – here inside our app component HTML so
00:09:34 – right now instead of app login form what
00:09:36 – I'm going to say is outer outlet right
00:09:39 – here so if we save this we see no change
00:09:43 – right here but if I do something like
00:09:48 – where do we have our login form type
00:09:57 – squared right so if username is admin
00:09:59 – and password is admin as well so I want
00:10:03 – to say that this dot router dot navigate
00:10:06 – to dashboard right but we need to add a
00:10:13 – dependency injection for this router
00:10:15 – inside our constructor so I'm going to
00:10:17 – say this this is pirate router router
00:10:22 – and again we're going to need that
00:10:26 – imported as well router from angular
00:10:31 – louder and if we see that it's
00:10:38 – recompiling so just wait a second
00:10:45 – okay so it saves me it has recompile and
00:10:49 – now if we take a look
00:10:51 – say admin admin and hit login you can
00:10:54 – see that we get to dashboard and we are
00:10:58 – actually authenticated as well so we can
00:11:01 – pretty much add a link right here and
00:11:04 – this should be actually routed to link
00:11:08 – which sees us to how we do not need that
00:11:11 – in square brackets it says go back and
00:11:19 – we can very much just go back to our
00:11:21 – home page but the problem with this
00:11:23 – there are a couple of problems first of
00:11:26 – all that we do not actually know which
00:11:28 – user is authenticated so that in
00:11:32 – dashboard we could show something like
00:11:34 – hello then this particular user right so
00:11:37 – we can fix that problem by introducing a
00:11:39 – service and the second thing is – that
00:11:42 – everybody pretty much can visit this
00:11:44 – dashboard like that and would see this
00:11:46 – message your authenticated go back right
00:11:49 – so that that is what pretty much the
00:11:51 – logic of a login app looks like but we
00:11:54 – need to implement these two things or
00:11:56 – rather fix them in our app to make it
00:11:59 – actually workable so we're going to do
00:12:01 – that in the next video
00:12:02 – so that is all for this one and if you
00:12:04 – liked it then please don't forget to
00:12:06 – subscribe and thank you for watching
00:12:07 – I'll see you then in the next one


Video Url:
http://youtu.be/1So4XMBetDs

Comments

comments