Coding

Angular 2 Tutorial (2016) – Inserting Data with Services + More Routing

  • 00:00:02 hey back I am in the last vision we left
  • 00:00:06 with our possibility of seeing our list
  • 00:00:09 here editing our list items here and
  • 00:00:11 navigating to our new contact page but
  • 00:00:14 we're not able to insert a new contact
  • 00:00:16 as if no we're going to change this in
  • 00:00:18 this video a good place to start is by
  • 00:00:21 setting up our form here I will
  • 00:00:24 therefore copy all of the code here
  • 00:00:29 because this is how we edit our contact
  • 00:00:32 and creating new one is pretty similar
  • 00:00:37 copying this here and I won't need tag
  • 00:00:43 inputs here I also won't need the
  • 00:00:46 two-way binding because we're creating a
  • 00:00:48 new contact we're not binding to an
  • 00:00:50 existing one and that's the basic form
  • 00:00:54 but we'll also need a button cue
  • 00:00:57 submitted create contact and if I now
  • 00:01:01 reload we see this form but obviously
  • 00:01:03 nothing is happening when I click this
  • 00:01:04 button because it doesn't wire it up to
  • 00:01:07 anything now when I click this button I
  • 00:01:11 obviously want this contact to be
  • 00:01:13 inserted and I also want to be navigated
  • 00:01:16 back to this contacts list so that we
  • 00:01:18 can instantly see that it was inserted
  • 00:01:20 now let's take care about the insertion
  • 00:01:23 first we will use our service again at
  • 00:01:27 the moment we've got a method to get our
  • 00:01:28 contacts now we'll add a new one to
  • 00:01:30 insert a contact now obviously this will
  • 00:01:33 take an argument of type contact so we
  • 00:01:36 will pass a complete compact
  • 00:01:38 contact there into this function and I
  • 00:01:41 will use again my promise to resolve my
  • 00:01:45 data source in this case the contacts
  • 00:01:49 variable we set up here now as I
  • 00:01:52 mentioned in the video when we talked
  • 00:01:54 about services first obviously in a real
  • 00:01:57 app you would probably somehow query a
  • 00:01:59 server create a connection to a server
  • 00:02:02 but in this case well our contacts
  • 00:02:05 variable is the data source and we will
  • 00:02:07 come to setting up a data connection to
  • 00:02:10 a server using a restful server as a
  • 00:02:13 data source in a later video
  • 00:02:17 now here we're resolving our contacts
  • 00:02:20 variable and once it is resolved we can
  • 00:02:22 access it with that then function and
  • 00:02:25 here we will our have our fat arrow
  • 00:02:28 function which will pass an argument of
  • 00:02:32 the contacts area we just got and then
  • 00:02:36 we will use this contacts area and push
  • 00:02:40 our contact on it so we will add our new
  • 00:02:44 contact to the area that's that now
  • 00:02:48 won't work still because it isn't viral
  • 00:02:50 up at all back in our new contact I will
  • 00:02:54 set up a click event on this button here
  • 00:02:57 where I will execute it on add contact
  • 00:03:01 method and I won't pass any arguments as
  • 00:03:04 of now now set up this method down here
  • 00:03:07 on add contact and here I want you
  • 00:03:11 access my service and insert a new
  • 00:03:14 contact now remember if we want to
  • 00:03:17 access our service we have to inject it
  • 00:03:19 in this component now to do this I'll
  • 00:03:22 set up my constructor here and I will
  • 00:03:27 pass my contact service which I will
  • 00:03:31 then automatically bind to a private
  • 00:03:33 property so private contact service of
  • 00:03:37 type contact service again automatically
  • 00:03:41 imported for me here and then I can here
  • 00:03:44 access this contact service and insert a
  • 00:03:47 contact which I still have to create for
  • 00:03:52 testing purposes I'll create a dummy
  • 00:03:54 contact here which is basically just a
  • 00:03:59 contact object which has a first name of
  • 00:04:01 dummy a last name of contact and I won't
  • 00:04:09 pass a phone number or email as of now
  • 00:04:14 so pass the STEMI contact here and now
  • 00:04:21 this won't work because if I click this
  • 00:04:26 mmm the app is somehow broken
  • 00:04:29 why could it be broken because we're
  • 00:04:31 injecting the contact service here in
  • 00:04:33 our constructor but our component
  • 00:04:36 doesn't know anything about this service
  • 00:04:38 so we have to set up our providers
  • 00:04:41 metadata data here and array and here we
  • 00:04:46 specify that we want to use the contact
  • 00:04:48 service saved us reload and if we now
  • 00:04:50 click create contact go back to our
  • 00:04:52 contact list we can see our dummy
  • 00:04:54 contact here now obviously we don't want
  • 00:04:56 to inject them in contact we want to be
  • 00:04:58 able to create a contact ourselves
  • 00:05:00 because at the moment if we enter
  • 00:05:02 anything here and create it it always
  • 00:05:04 chance create systemic contact obviously
  • 00:05:06 because this is the only thing we're
  • 00:05:08 passing here now get let me get rid of
  • 00:05:10 this dummy contact here and instead I'll
  • 00:05:13 create a real contact last contact of
  • 00:05:19 type contact and this will then be
  • 00:05:26 obviously an object where I have a first
  • 00:05:31 name of anything a last name anything
  • 00:05:36 phone and email and then I can pass this
  • 00:05:42 here now this data should be passed to
  • 00:05:46 this method here so I have my first name
  • 00:05:49 my last name my phone and by email and
  • 00:05:52 then I can replace this quotation marks
  • 00:05:56 here with the respective arguments or
  • 00:05:59 parameters we're getting in this
  • 00:06:01 function phone and email now to add or
  • 00:06:09 to pass these arguments I'll have to do
  • 00:06:12 something here in my template because at
  • 00:06:14 the moment I don't know in which input
  • 00:06:17 element which argument is passed or
  • 00:06:21 embedded so to do this I'll give each of
  • 00:06:25 these input views here a local variable
  • 00:06:28 recall that we do this by adding a
  • 00:06:31 hashtag in front of the very variable
  • 00:06:33 name the first name last name e phone
  • 00:06:39 and email
  • 00:06:41 and then I can pass the data to my
  • 00:06:45 method now if a word you pay pass the
  • 00:06:47 full variable like first name then this
  • 00:06:51 would not work because first name is not
  • 00:06:54 only what we enter inside this input
  • 00:06:57 element but it is the whole input
  • 00:06:59 element so everything all configuration
  • 00:07:02 or styling attached to this element so
  • 00:07:03 in order to just pass the value I will
  • 00:07:07 access the value property so first name
  • 00:07:08 value last name value phone value and
  • 00:07:13 email value now this method
  • 00:07:20 hopefully looks a bit complicated to you
  • 00:07:22 because well we have to pass all these
  • 00:07:26 variables here and we have to have a
  • 00:07:29 method which takes all these variables
  • 00:07:30 here and here is a comma missing I see
  • 00:07:32 and if we add a new input field we would
  • 00:07:36 have to add it here and we would have to
  • 00:07:38 change our method here and every change
  • 00:07:41 would be very very complicated and if we
  • 00:07:44 add validation it would be difficult and
  • 00:07:45 who not really the kind of thing that
  • 00:07:48 makes a lot of fun angular to has a
  • 00:07:53 powerful form package so to say built-in
  • 00:07:57 where we have a lot of methods and
  • 00:07:59 functionalities to use in conjunction
  • 00:08:02 with forms so this is the most difficult
  • 00:08:05 way we could do it but as this is this
  • 00:08:09 video focuses on how we can create a new
  • 00:08:12 contact with the service and how we can
  • 00:08:14 route back to our contact list I will
  • 00:08:16 have an extensive forms videos coming up
  • 00:08:20 obviously as this course will cover all
  • 00:08:23 the basics of angular 2 I will talk
  • 00:08:25 about forms in future videos but as of
  • 00:08:28 now let's do it this way and then we
  • 00:08:30 will find unit in future elections so
  • 00:08:34 now that I pass this I save this and now
  • 00:08:37 let's let's edit let's add a test
  • 00:08:39 contact here let's call her Monica
  • 00:08:43 Monica Arafah I give her a some random
  • 00:08:50 phone number and Monica at gmail.com
  • 00:08:55 create this contact and well that looks
  • 00:08:58 pretty good to me let's create another
  • 00:09:00 one like June Ober number number here
  • 00:09:11 and June add yeah create her ok well
  • 00:09:20 that seems to work great now the last
  • 00:09:23 fingers I don't want to have to click up
  • 00:09:25 here I want to be taken back
  • 00:09:27 automatically when I click create
  • 00:09:28 contact so to do this I will somehow
  • 00:09:33 need a possibility to trigger this
  • 00:09:36 routing out of this on add contact
  • 00:09:39 function here and I can do this by
  • 00:09:42 injecting the router into this new
  • 00:09:45 contact component and then I can call a
  • 00:09:47 method on the router object which is
  • 00:09:50 called navigate which allows me to to
  • 00:09:52 trigger a routing action so to say which
  • 00:09:55 allows me to redirect the user to
  • 00:09:58 another page even though he didn't click
  • 00:10:00 any link to do this island check the
  • 00:10:03 router here into my constructor private
  • 00:10:06 router automatically bind it to the
  • 00:10:08 router property here router again very
  • 00:10:14 important make sure that you got this
  • 00:10:16 import here and now I can call this
  • 00:10:21 router navigate and now this navigate
  • 00:10:25 method takes an array as an argument and
  • 00:10:28 this area can contain different
  • 00:10:32 configurations or some Artem ya
  • 00:10:35 configuration to this routing action so
  • 00:10:37 to say in this case we only need to name
  • 00:10:40 of the route we want to navigate you
  • 00:10:42 which if you can look it up here in our
  • 00:10:45 app component has name contacts that's
  • 00:10:48 the contact list so I will just enter a
  • 00:10:51 string here contacts save this and let's
  • 00:10:56 try it again add Monica here or buries
  • 00:11:02 Monica at gmail.com again I got no
  • 00:11:07 validation going
  • 00:11:08 on here remember that we'll fix this in
  • 00:11:11 a future with you create contact and
  • 00:11:13 we're taking back now if you're a
  • 00:11:16 careful watch sure there might be
  • 00:11:19 something you feel a little bit strange
  • 00:11:21 everybody why does this work I inject
  • 00:11:25 the router here but I'm not setting it
  • 00:11:29 up here the contact service wouldn't
  • 00:11:32 work if I were to delete this why does
  • 00:11:35 the router work the router works the
  • 00:11:40 router can be injected because we're
  • 00:11:43 setting it up here in our boot strap
  • 00:11:46 method in our booty ass file we're
  • 00:11:51 providing the information about our
  • 00:11:53 router providers which are then injected
  • 00:11:56 here the first time or used the first
  • 00:12:01 time in our app component so the router
  • 00:12:04 is something where inject more we're
  • 00:12:08 setting up here on the top level in our
  • 00:12:10 app component if we would not have this
  • 00:12:13 here besides the fact that our whole app
  • 00:12:16 wouldn't work we could not use it here
  • 00:12:19 or two because angular 2 has a
  • 00:12:22 dependency injection hierarchy which
  • 00:12:26 basically means if a top component knows
  • 00:12:30 how to inject something a component
  • 00:12:33 nests inside it so a child component is
  • 00:12:36 also available to use this injection
  • 00:12:39 that's very important that you are aware
  • 00:12:43 of this injection hierarchy so the
  • 00:12:47 contact service has to be provided here
  • 00:12:50 and in our contact list because these
  • 00:12:54 two components are siblings they are not
  • 00:12:57 in a child parent relation and that is a
  • 00:13:00 very important thing to know that we get
  • 00:13:02 this injection hierarchy thing going on
  • 00:13:05 and angular at you and that's why this
  • 00:13:07 doesn't work with the router here even
  • 00:13:09 though we're not setting it up here in
  • 00:13:11 our providers metadata so that's
  • 00:13:14 everything I want to cover in this video
  • 00:13:16 and next with you we'll have again a
  • 00:13:18 look at routing and we will have a look
  • 00:13:21 at
  • 00:13:22 passing an argument with around so for
  • 00:13:24 example if you were to have IDs on our
  • 00:13:26 contacts and we would want to look up a
  • 00:13:29 specific contact with a specific ID then
  • 00:13:32 we could use a route where we pass this
  • 00:13:36 ID and we'll create some kind of thing
  • 00:13:39 like this in the next video see you
  • 00:13:41 there bye