Coding

SERVICES & DEPENDENCY INJECTION – Angular 2.0 Final – Getting Started

  • 00:00:01 so until now we already built a lot our
  • 00:00:05 application now looks like this which of
  • 00:00:07 course is not how it looks in the
  • 00:00:10 beginning or what we want to reach at
  • 00:00:11 the end and also we can't really add
  • 00:00:15 something to the collection all we get
  • 00:00:17 is this alert and this red button
  • 00:00:18 doesn't do anything we also don't have
  • 00:00:20 routing it might look like a lot is
  • 00:00:23 missing but actually we're on the final
  • 00:00:26 steps to finish this application now I
  • 00:00:29 want to focus on being able to actually
  • 00:00:31 add something to the collection for this
  • 00:00:34 I'll add a new concept which we haven't
  • 00:00:37 seen yet as service a service is
  • 00:00:40 basically a class which can be used by
  • 00:00:42 multiple components we can use a service
  • 00:00:44 for multiple purposes for example to
  • 00:00:46 outsource some code which you want to
  • 00:00:48 use in multiple components or as you
  • 00:00:50 will do here to manage our data in one
  • 00:00:54 global place where then multiple pieces
  • 00:00:57 or spots in our application have access
  • 00:01:00 to you so this is how we can use such a
  • 00:01:03 service and I will create a new shared
  • 00:01:05 folder since it will be shared by both
  • 00:01:08 my collection component and the market
  • 00:01:11 component so whereas normally you try to
  • 00:01:14 structure your application by feature
  • 00:01:17 sometimes you have to put something in a
  • 00:01:19 shared folder because it really is
  • 00:01:21 shared so how do you create a new
  • 00:01:24 service we could use two CI for this but
  • 00:01:27 as creating a service is really really
  • 00:01:29 really easy I will create the file on my
  • 00:01:32 own any shared folder
  • 00:01:33 I'll give the file a name of collectible
  • 00:01:37 dot service dot TS to follow this naming
  • 00:01:41 convention that we have the name of the
  • 00:01:45 thing we have in the file first then a
  • 00:01:48 description of what we have here a
  • 00:01:50 service and then of course the file
  • 00:01:52 extension so this will create a new type
  • 00:01:55 script file for me and in this service I
  • 00:01:58 will export a typescript class to make
  • 00:02:01 it available outside of this file –
  • 00:02:03 named collectable service so this
  • 00:02:10 already is a service a normal typescript
  • 00:02:12 class it doesn't need any deck
  • 00:02:14 by default this is what we can use as a
  • 00:02:17 service I will show you how to use it
  • 00:02:19 soon as already said I want to use this
  • 00:02:23 service as my global data repository
  • 00:02:25 therefore I will take my collectibles I
  • 00:02:29 have here in the market component and I
  • 00:02:32 will now store them in this service so
  • 00:02:35 here I'll treat a new private property
  • 00:02:38 collectibles which will be well this
  • 00:02:41 array has just copied out of my market
  • 00:02:43 component of course I'll soon create a
  • 00:02:46 way to now get these collectibles from
  • 00:02:49 the service into my market component but
  • 00:02:52 before doing this let's consider
  • 00:02:55 improving our application here a little
  • 00:02:57 bit this would work it worked before but
  • 00:03:02 since each collectible here has the same
  • 00:03:04 structure a description and a type it
  • 00:03:07 would make sense to kind of create a
  • 00:03:10 blueprint for this kind of our own type
  • 00:03:13 which we can use and type script here to
  • 00:03:15 make sure that whenever we use such a
  • 00:03:17 collectible we know that we have these
  • 00:03:20 two fields available that we get an
  • 00:03:22 error if we try to introduce a third
  • 00:03:24 field or forget one of these fields for
  • 00:03:28 that I am going to create a model and
  • 00:03:31 that is something you'll see a lot in
  • 00:03:33 applications here I'll name it
  • 00:03:36 collectible model dot TS and in here I
  • 00:03:43 will basically define how such a
  • 00:03:45 collectible should look like so here I
  • 00:03:48 will export this class collectible
  • 00:03:52 uppercase beginning with the uppercase C
  • 00:03:55 at least and in here I simply want to
  • 00:03:58 define how it should look like I do this
  • 00:04:00 by adding two public properties the
  • 00:04:03 first one is named description and
  • 00:04:05 should be of type string the second one
  • 00:04:07 is named type and should also be of type
  • 00:04:11 string and then I'll add a constructor
  • 00:04:13 where I am able to initialize them so
  • 00:04:16 here I'll get my description as as a
  • 00:04:20 parameter which is of type string and my
  • 00:04:22 type which is of type string and here in
  • 00:04:25 the constructor body I assembly a hook
  • 00:04:28 my properties up with these parameters
  • 00:04:31 like this so what it did here is
  • 00:04:33 basically create a typescript class with
  • 00:04:36 two properties and a constructor where I
  • 00:04:38 initialize these properties if that is
  • 00:04:40 all new to you I recommend having a look
  • 00:04:42 at some basic types of resources this is
  • 00:04:45 as you also use classes with a lot of
  • 00:04:47 other languages though so if this
  • 00:04:50 collectable class created I can now be
  • 00:04:53 more explicit about this private
  • 00:04:55 collectibles property here I can assign
  • 00:04:58 a type to it and I can say that this
  • 00:05:00 should be of type collectable array now
  • 00:05:03 for ders you need to add the import to
  • 00:05:05 your collectable model here from
  • 00:05:07 collectable model but with this I now
  • 00:05:10 make sure that I know for sure that this
  • 00:05:14 array will always hold an array of
  • 00:05:16 collectibles
  • 00:05:17 I can't mix in any other object this
  • 00:05:21 will give me this will give me better
  • 00:05:23 IDE support regarding order completion
  • 00:05:25 and it will also prevent me from
  • 00:05:27 introducing some nasty bugs so with this
  • 00:05:31 setup it's now time to also work on a
  • 00:05:34 way to get the data in this service back
  • 00:05:38 into the market component right now I
  • 00:05:40 have my collectables array here but
  • 00:05:42 let's remove it now well now all of a
  • 00:05:45 sudden if we save this our application
  • 00:05:48 will work but once this reloads we'll
  • 00:05:51 see that our market is empty certainly
  • 00:05:53 not what we want instead we want to get
  • 00:05:57 this data from the service and to be
  • 00:06:01 able to do so I'll add a method I'll
  • 00:06:03 name this method get collectibles and
  • 00:06:06 all this method should do is return my
  • 00:06:10 collectibles array here now with this
  • 00:06:14 setup I can go to my market component
  • 00:06:17 and now I'm going to use the ng on init
  • 00:06:19 method here this method is executed when
  • 00:06:22 angler Q creates this component it is
  • 00:06:25 executed once all properties are
  • 00:06:27 initialized so here it is safe to assign
  • 00:06:30 values to my properties therefore I'm
  • 00:06:34 choosing this place to use my service to
  • 00:06:36 get the data but in order to use my
  • 00:06:39 service I also need to have a
  • 00:06:41 stupid now getting access does not work
  • 00:06:45 by instantiating here you could think
  • 00:06:48 that I would simply run new collectable
  • 00:06:52 service this is how you instantiate
  • 00:06:55 classes interpret in the end well we
  • 00:06:58 could do this but Anglet who has its own
  • 00:07:01 dependency injector now this is kind of
  • 00:07:05 a framework in the framework for
  • 00:07:08 handling the creation of instances of
  • 00:07:12 classes we need in our application we
  • 00:07:14 already use it since we are using
  • 00:07:17 components which are automatically
  • 00:07:18 created by angular 2 but we can also
  • 00:07:21 tell Anglet you hey when you create this
  • 00:07:24 component here I also need to get access
  • 00:07:27 to this service and here we kind of use
  • 00:07:32 the Engla to magic we can do this by
  • 00:07:34 simply adding a property in the
  • 00:07:36 constructor here so I will write private
  • 00:07:42 collectable service and this is just a
  • 00:07:45 shortcut to automatically create a
  • 00:07:47 property and initialize it with that
  • 00:07:49 value here so if I add private it will
  • 00:07:52 do this for me create this property
  • 00:07:55 automatically and assigned a value so
  • 00:07:57 here this and now the important part
  • 00:07:59 comes I set the type to collectable
  • 00:08:03 service which I also need to import at
  • 00:08:05 the top of this file therefore with this
  • 00:08:09 setup angular 2 will recognize that once
  • 00:08:13 it creates this component hey the
  • 00:08:15 constructor needs an additional argument
  • 00:08:17 it has a look at this argument and it
  • 00:08:20 sees collectable service so now it tries
  • 00:08:24 to create an instance for us and give us
  • 00:08:27 this instance which is a good practice
  • 00:08:30 to do in this way as it keeps your code
  • 00:08:33 cleaner and easier to understand
  • 00:08:36 it also offers our advantages I'll come
  • 00:08:38 back to this so it tries to create this
  • 00:08:42 collectable service but it of course
  • 00:08:45 encounters an issue as before with the
  • 00:08:48 selectors of components for ejection
  • 00:08:51 it also doesn't scan all files in our
  • 00:08:54 project
  • 00:08:55 that would again be a real bad
  • 00:08:57 performance hit therefore we have to
  • 00:09:00 tell about you which parts of our
  • 00:09:03 application should you be able to create
  • 00:09:06 when we want them in the constructor
  • 00:09:09 like this we do telling that you either
  • 00:09:13 directly here in the component by adding
  • 00:09:16 the providers array and adding
  • 00:09:18 collectable service here or in this case
  • 00:09:22 we would get an instance exclusive for
  • 00:09:25 this component and all its nested
  • 00:09:27 components or we go to app module and
  • 00:09:31 added here collectable service this will
  • 00:09:36 also result in english' being able to
  • 00:09:38 create this service for us but now it
  • 00:09:41 will use what at the same instance for
  • 00:09:43 our whole application whereas before if
  • 00:09:47 I added it here we won't only have an
  • 00:09:50 instance for this component and its
  • 00:09:52 child components this is another
  • 00:09:54 advantage of the injector we can choose
  • 00:09:56 if you want one instance for the whole
  • 00:09:58 application or only well the instance
  • 00:10:03 for this component and child components
  • 00:10:05 what's the advantage especially here
  • 00:10:08 where we manage our collectables and
  • 00:10:11 later on our collection in one service
  • 00:10:14 we definitely want to have to save
  • 00:10:16 instance all over the application
  • 00:10:18 otherwise if we would have two instances
  • 00:10:21 we would have two different collection
  • 00:10:23 objects and our application would not
  • 00:10:25 work as intended
  • 00:10:26 so a lot of talking but this is
  • 00:10:29 important to understand
  • 00:10:30 dependency injection really is important
  • 00:10:33 and I got our videos on this channel if
  • 00:10:35 you want to learn more about it with
  • 00:10:38 that setup we can now finally go to ng
  • 00:10:41 on in it and here we can set this
  • 00:10:45 collectibles so this property in this
  • 00:10:47 component equal to this collectable
  • 00:10:50 service get collectibles now with this
  • 00:10:53 in place if I save this and let this
  • 00:10:56 application recompile one's reloads you
  • 00:10:59 see the components already collectibles
  • 00:11:03 are back
  • 00:11:04 I can still click on the buttons but now
  • 00:11:06 we're managing managing the data in a
  • 00:11:08 sir
  • 00:11:09 which is a common pattern you will see
  • 00:11:11 and which we will need when we as a next
  • 00:11:14 step also add a way to pass them to our
  • 00:11:17 collection and create a collection
  • 00:11:20 finally