Angular 2 | Tutorial 19 | Services | TutorialsPoint [w/ subs]



00:00:00 – so what is going on everybody my name is
00:00:03 – Mabel and welcome to your 1990 loaf
00:00:06 – tutorial in which we're going to discuss
00:00:08 – about what services are in angular and
00:00:11 – how pretty much we made use of one
00:00:13 – service in the last login tutorial we
00:00:16 – did so services you can think of
00:00:19 – essentially are required whenever you
00:00:22 – want to share the data among a lot of
00:00:25 – components and basically directives and
00:00:28 – all the parts of money of your
00:00:30 – particular module right so let's say if
00:00:33 – you're creating any e-commerce website
00:00:35 – so what you would want is that the gut
00:00:38 – of the user is always the same on all
00:00:41 – the pages and it's always updated right
00:00:44 – so for that what we can do is we can
00:00:47 – actually create a card service now what
00:00:49 – the service would be is that it would be
00:00:52 – available to all of your declarations
00:00:55 – which is your modules and components
00:00:58 – plus it would always be a single
00:01:02 – instance at least that's what we prefer
00:01:05 – so that whenever you make change to a
00:01:08 – service in one component or make change
00:01:12 – to a variable or any method or any
00:01:15 – property in service that change is
00:01:18 – immediately reflected globally to that
00:01:21 – service and any other component
00:01:22 – accessing that thing would reflect the
00:01:25 – same change right so to create a service
00:01:28 – what we need is the go to your angular
00:01:32 – command line and this wait a second I
00:01:35 – guess I have that right here so we have
00:01:41 – our second terminal running now and if
00:01:44 – we take a look then what you can do to
00:01:47 – create a service is pretty much say ng
00:01:49 – can great service and then your service
00:01:52 – name right would which in our case was
00:01:56 – the user right so you just have to write
00:01:59 – user here and create a user service now
00:02:02 – what we did in the user service is that
00:02:05 – we pretty much generated created these
00:02:08 – two methods which we just set user
00:02:10 – logged in and get user logged in
00:02:12 – and this is a very basic service example
00:02:14 – with the pretty much just one variable
00:02:17 – in working because we are not making use
00:02:21 – of this private user name right so what
00:02:24 – we are doing is just setting a brilliant
00:02:27 – value to a service which is accessible
00:02:31 – in all the components right so that we
00:02:34 – can know that if the user is logged in
00:02:36 – or not so now let's say if I want to
00:02:39 – find out if the user is logged in right
00:02:42 – so what I'm going to do is go to my
00:02:45 – header component and right here I want
00:02:48 – to make use of this service the first
00:02:51 – thing you want to do to make your
00:02:54 – service usable in component is you want
00:02:56 – to go to the main module which hosts the
00:02:59 – component which in our case is just add
00:03:01 – modules and you have to add the service
00:03:04 – inside providers right just like we have
00:03:07 – user service right here once you do ng
00:03:09 – change radio service and your service
00:03:12 – name here and hit enter it create a new
00:03:14 – service but it would not add it to the
00:03:16 – providers so you have to do that
00:03:18 – manually and this user service is the
00:03:20 – same name which is this class thing
00:03:22 – right
00:03:23 – so we go to our add modules and once you
00:03:26 – have done that this tells angular that
00:03:29 – this service is now accessible to all
00:03:31 – the components and this module so once
00:03:34 – you have done that you can just go to
00:03:36 – your module file and again you will need
00:03:38 – to import this service you're going to
00:03:41 – say import use this service from user
00:03:46 – dot service right so now you have access
00:03:49 – to this particular service and should be
00:03:53 – actually just a directory back not this
00:03:56 – one there we go
00:03:58 – so now you have access to this user
00:03:59 – service but in order to make use of that
00:04:02 – in your methods or wherever you want
00:04:05 – what you have to do is actually include
00:04:08 – this using dependency injection now what
00:04:11 – that is is pretty much that instant
00:04:13 – constructor what we do is we say private
00:04:17 – anything like my service or my awesome
00:04:21 – service
00:04:22 – and we declared this as a user service
00:04:26 – and what happens with this this is
00:04:28 – typescript stuff going on so what this
00:04:31 – does is that it tells angular that we
00:04:35 – are expecting a user service inside
00:04:39 – constructor with the name my awesome
00:04:41 – service so you do not need to do a lot
00:04:44 – of things in here you can even leave the
00:04:46 – constructor blank so what this will
00:04:47 – essentially tell angular is that put
00:04:49 – this user service inside my awesome
00:04:52 – service when calling the constructor of
00:04:54 – this class so now you have access to my
00:04:58 – awesome service right here with this dot
00:05:01 – my awesome service and then right here
00:05:03 – you can pretty much get any method or
00:05:06 – any property associated with the class
00:05:10 – as long as it is public right so yeah we
00:05:15 – can very much say console dot log this
00:05:19 – dot get user logged in and we will just
00:05:24 – stay is user logged in and just like
00:05:30 – that so if we take a look now and just
00:05:36 – hit the console you see that we get its
00:05:40 – recompiling and there I don't know let's
00:05:47 – just try it one more time ok so now you
00:05:54 – can see that we get is the user logged
00:05:56 – in as false so if I log in I get it for
00:06:00 – the admin admin and hit login and I
00:06:03 – reload this page again because we are
00:06:06 – logged in and the week is the usual ok
00:06:09 – so obviously we are not storing the
00:06:11 – state of the user right now as of with
00:06:14 – the routing so we would pretty much just
00:06:16 – go to our home page only and would go
00:06:20 – like admin admin and pretty much we
00:06:24 – could just say that this thing right
00:06:28 – here inside our dashboard component as
00:06:32 – well
00:06:34 – right so again we need to make use of
00:06:40 – the same name which we have used in the
00:06:43 – dependency injection so now if you see
00:06:47 – if they use the log in this case we get
00:06:49 – false and we write admin admin and hit
00:06:51 – login you see that we get the user
00:06:53 – logged in as true right so yeah that is
00:06:57 – pretty much how services work and that's
00:07:00 – how you can create a very basic service
00:07:02 – which is just a simple login state and
00:07:05 – you could actually just share some data
00:07:08 – as well among the services about from
00:07:11 – just a boolean value so we can say set
00:07:14 – user logged in user named as the admin
00:07:18 – this study user name and we can make
00:07:22 – this public so that we do not need to
00:07:24 – have a setter for this method so we can
00:07:27 – say something like this got the name is
00:07:34 – username and then we can create a name
00:07:39 – in here right is let's just say
00:07:42 – anonymous as default so again we need to
00:07:47 – make use of life of some service and I
00:07:51 – guess we are in the wrong file because
00:07:54 – we would like to do that inside our
00:07:59 – dashboard file right so we can say name
00:08:04 – as an ally and then we can set this that
00:08:09 – name to this dot user dot user name
00:08:13 – right so now what we can do is inside
00:08:17 – our dashboard files hello and what we
00:08:22 – have name right so yep and now if we go
00:08:27 – like admin admin has its login you would
00:08:30 – see that we get hello admin so we have
00:08:33 – successfully shared some data from the
00:08:37 – service to our component right
00:08:40 – and again this name would be accessible
00:08:42 – inside our header component or any other
00:08:45 – component for any other
00:08:47 – a page or part of web page right so yeah
00:08:50 – that is pretty much how services work in
00:08:53 – angular and that's all you pretty much
00:08:55 – need to know right now and we have so
00:08:58 – that is all for this one and if you
00:08:59 – liked it then please don't forget to
00:09:00 – subscribe and thank you for watching
00:09:02 – I'll see you then
00:09:03 – in the next one


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

Comments

comments