Django and Angular full CRUD part2

welcome again this is second part of the croute with angular and Chango API in the previous section we've done few things we have set up our jungle API and we have that up and running here and we have our API with movies and at the moment we have two movies in our database that has been set up and we also created front-end with angular and we have our one view and that will list our movies and that's with connection with our API as you can see here you have response and that's our movies coming from our API so we have done this so far so next we will cover and we will finish our crews will get also post put and delete methods using the same API so let's get started but before we'll move to another method I can show you another trick that can be done with Django so basically we have a list of movies and here we this is our request that we sent a list of movies and we list everything but in here we only use our title so there is no need for us to print it here here or a description we don't need that only thing we will need is the title and ID so let's fix it quickly if we will come here we have our serializer so what I can do is actually I can duplicate that 0r either control V or command D and I will create another one movies your Arizer and I will name it movie miniseries er it will be modeled movie but in this zero Iser we will need only ID and title so if i will save it and i will go to the views what i can do here is well still want to use the movies realizer the full one as a default value but we can do for our list to use miniaturizer so i can do death list enter and tighter wound will autocomplete that for me what we can do here is we can do movies movie Oh checks all the same way after we selected in the query set here and we can do zero visor and we can do movie so that's the one we have used and we need to pass movies into it and also many equal to true and we also need to import that 0 riser so we have our zero serialize are here and we need to return respond response so realizer that data and we also need to import that response so from rest rest framework response import response and we have that so basically what we do we have a review set here we've created definition a method list and that's a built-in method in Django so basically we override it we're training we don't want to use the jungwan we would like to use our own so if i would have that we'll use moving initially serializer for that list if I will come back here and I will refresh it remember that we had a description title here and ID here if i do this now i can see movies here and we have our ID and our title only we don't need to have the full serializer here it will be faster more efficient and whatever we will need to and to get full information we can still use our full serializer and we will do that next so if i would click on this item then we will load this based on this ID will load the whole movie so let's go to our Visual Studio code here and at the moment we have get all movies and we use our serializer so going to component what I can do here is I can select on h2 whatever we click on this we can trigger our function movie clicked and then what we can do we can pass which movie we actually clicked with a movie which is this movie here so movie click we need to also create that inside our insert our component so we'll go here and then I will do is 1 we can use arrow function like that and then we here we pass movie so for now I can do console.log movie ID let's say if that will work we'll see that in output so we have her council if I will click on Titanic I have ID 1 if I click on a water I have ID to going to Visual Studio code again now what we can do is basically we can copy that good one movie we don't have that method but we will need to pass movie ID inside and I will do something with later on so let's create that method first we have our API server a service I will duplicate it here I'm going to copy and paste it so our method was get one movie and we in this case we pass ID so our our URL will be get base URL movies and you also need to concatenate our our ID into it so and then remember forward slash at the end of it so basically here we can pass that ID so we have movie movies slash ID that will be passed to that method and then slash at the end and we'll use that cat and so get one movie that's it so if I will go back to my component what I can do actually is let me try to output to console what is the data that has been rebuilt okay if I click Titanic you can see Titanic nice drama here so the full serializer is used and I have full information about it so if I go back to movies here you can see preview I have on the IDN title if I click about er I will load this one and I have full information about it so if you have bigger prod bigger models that's the way to do it so if you click something you need to have detailed information about it you can do it like this okay that's been done so next what we can do is we can create a and put methods so let's go back to our visual studio code here and we'll each needs to do it inside our app component HTML let's try to do something like this so HR horizontal line and then we can do title and we can do input type text and also we can do ng model like that and then we can use a model title like that I can copy that twice actually I can do one break here so break and also break I will do description and here oh three that's text and description here and here and we will need to create that variables title description in here you know our component so let's do tile two and it will be like that all right we don't need to pass any any value to it yet so title description and also here let's say we'll have it like that I made a mistake Oh like that so that's our variables here and we'll actually use it in our input so what we can do we have when whenever we click on this movie we have our movie data so we can actually assign values from that movie to our to our inputs we using like that so if I will go title is equal to data title description is equal to data description and data here actually you can do it as a part of one I need to do this as a part of one object you don't need to create three very variables but I found it's just easier and faster for this to explain it so we have two three different three different variables and we can assign that value from our API to this variable separately like that so if I will go back to our application now and I will refresh it probably we have some errors and remodel census is a known property of input we need to add a forms into our angular so we need to go back to our visual studio code and we have our a module module here and inside here we also need to add forms so we can do import from hot angular 4 forms so that's what we need to import and then another module import here so if I would save it again I can go back here and you can see here we have our inputs now how do i refresh it now and we don't we have problem with our movies now the movies are fine so console it is fine for some reason it's not working properly I'll just double check what's going on here so there is a few things we need to fix so title that's description and that's your what's happening here we have okay I made a mistake because I put it in a wrong the wrong method this is get all movies what we wanted to have is we wanted to have like this when you select one specific movie but in here what we want to try is movies and that's data so that was our method get all movies or whatever we get all the movies we assign to our movies and the data whatever is coming from the API so we made a mistake here I made a mistake and we have her Titanic and Avatar whatever I click here you can see title description and the year is here Titanic it is here so we have already that in the input what I can do is I can now create a button that I will update this value on our API so we go back here then we have HTML what I can do here is I can do button as I put on I can do put that will be my put method here and I can do click I can do click here and whatever I click let's say I will route or update movie I'm late movie I could name it update it but actually put it will tell you straight away and what what is the method that we are using but for you great user interface you should name it something more user-friendly but I will leave it like this so we have our update movie and then we can use this one so I'll copy that I will go to component and I need to also create that method so update movie we have a new method here and we will update it from here but one more thing I need to do is I will need to also store the ID like that so basically what I can do at this point is maybe it will be easier to store it in one single object so I can do selected movie and I will remove those I will have selected movie and whatever I will click on the movie selected movie will be the one coming from our API is I can remove those and we have our selected movie and we'll save whatever it's coming from the API including ID I will put it in selected movie and inside here and the model I can do select movie title selected movie description and selected move here so let's try it again if that's it's still working and we it is not to reach property title of undefined because we need to also take care of the one thing so if I have that this is null so at the moment it is whenever we try to load HTML there is nothing for selected movie so what we can do is we can do select movie whatever we have our constructor so selected movie we can say title is empty string description same thing and also we can do here is 0 and we can also do ID here minus 1 I will for my dad's and also to select that movie so we set up object with some empty values here so if I will go here you can see this is empty this is empty this is zero and whatever I click on here it will populate it so that's that's where how we have it there and then whatever I click put we'll have our function to put it so let's go back to a plate movie now and we have our selected moving and we know which one is selected so what we can do is I will copy that again and we will go a blade movie update moving this one this time we would like to send this selected movie remember that selected movie will have everything what we've changed in the input so we can forward that to new method update movie and we'll need to create it now so we go like that and we go update movie and in here we will have our movie what we need to do this one will be a different because it will be put metal so what we need to do is we need to include our body so our body will be like this so we can do constant body I will basically recreate similar object as we've done here so we'll just copy that and I can put it here so ID will be movie moving ready actually we don't need to pass that ID here because we're not gonna overwrite it so we will pass here a movie ID that will be part of the URL title will be our title description will be description and the year year so whatever is coming from our inputs it will be passed to update movie when we click it we will form this JSON here and we will also need to include it here so body will include it in the body like that so if I will save it now go back here we have our Titanic let's say Titanic - and take a look at our network tab if that will work so appliquè put and not actually work it so put so we haven't I think saved it save this file yeah so we have saved now we'll do Titanic Titanic to put it and that's our that's our put method here and it's 200 so it is successful and then this is what we we have in response so we have a Titanic - if I will refresh it now you can see this one here coming from our API and also if I will go movies here that's our Django admin section if I'll go here you can see that has been updated with our front-end so we have this so the another think what we can do if we have component here and wherever we update this movie so the selected movie and whatever we are updated we also could update the one that in our movies if you want to have like like this and if you do avatar let's say five and you put you send it you could update this in the list but I am NOT going to do it but that will be something that you would like probably to do okay next thing what we can do is we can create method post post will be very similar to what we have already inside our section so I will just copy this and I will do post and I will do create movie here create movie so save this and also update movie i will copy because it will be very similar and i will paste it here so create movie the same here and our service create movie and we can pass our selected movie because that will still use our data we've created so wherever we catch this response from from the server what we can do is we can do this movies push data and we've created new movie and then we push it to our list of movies on our main screen basically what we need to do is we need to create a new service for that mobile cell service we had update and then we'll create create movie will also pass the movie from our input we also create that title description and here we don't need to have this ID because we don't have ID we are trying to create a new one and this method will be post so let's save it now everything looks okay we have a new method years let me try to Rasik Park and description very good whatever under a thick park as always I don't remember so post and Jurassic Park has been added here so I can see here movies that was method post and we sent that information from here and the response was this movie here and we added to the list er if I were refresh it now you can see I have that already here and if I will go to the movies on our jungle API you can see now I have three objects so clicking here I have whatever I sent from my front ends just a second ago so we have get two ways of get a list of all movies that she using initializer we also have I get for detail we get we have put and post now what we can do is we can create a last one which is delete so let's do that now we go to the HTML and I will create it you need move here so I will need to create that that's method inside our component wherever we created or whatever we have yes I will copy that paste it so we need to do delete movie and then we will pass selected movie basically we don't need to pass the selected movie we can pass only ID because we are not gonna pass any information to that service will only pass IDs or delete movie we need to create that service so that service is here so we also will copy that paste it here change the name to delete that's our last service and this will be idea this time so we will use URL similar similar to what we had here this time we don't need to pass body and also we pass ID I can remove that body here so we have only ID here that I'm passing here as a part of the URL and this will be delete so it's very similar to what we already had it so we have delete movie passing ID to the URL and that would be delete method here and whatever we have it here we had this push for post-metal but we don't you want to use both what we can do instead is if I will reuse that function here get movies I can actually update it with my function to get always the latest values for the movies and I can do the same word update movie like that so whatever it is something has been changed I will load new list of from my from my API so let's try it now I have Titanic and I can put it and that have been updated already here so let's say remove avatar five I have a whenever I click here I have ID and select that it's not visible here but it's part of the selected movie and I can click delete and you can see this is gone already and my method was that was this one so we have Delhi a delete and then 200 and the response is nothing there because it was removed so we have data again Jurassic follow refresh it it's still here and then if I will go movies we have two objects here because we just remove it well let this is not fully functional application here because if I'll click delete now Naughton is selected so I'll have some errors because minus one is the ID of selected this so probably you would like to hide it to delete and the put if there is no selected action actually we can do it quickly so if I will go HTML I can do ng if like that if selected movie ID is not if it's not equal to minus 1 then you display this put and then you also do it like here and this one we can do is equal to minus one so the post will be available only when you have not in selected the put and delete will be the update will be available when you have something selected so in our setup here you can see not in selected so I can post new a new movie butter again tar again description something here let's say was 2,000 which wasn't and then post and then we can select avatar and then we can have put and delete and I can have that avatar and I can remove it here or I can do fix my spelling mistake so that will die tannic here and I can put it here and we have new version here so that's it we have a full quote we have five medals all together and that's method that are listed here in their IEP a service we have get all movies that will use the Minear eyes or if graded we have get one movie that will select based on the ID full information for for one selected movie and we pass ID into it and we have update create and delete method as well so that's fully functional application as you can see here it was quite fast to set it up we have our front-end application with angular and we have a back-end and application fully working locally with Django so that's that's it I hope you enjoyed this lesson if you did please do subscribe on my channel because I will try to put more videos like this related to anger and joy and Django and whatever I will have something new we will be notified also it will be really nice for me to reach thousand surprises because I can cover enter my youtube channel to paid one and I will be able to create more also I would like to invite you to my full course I have on udemy and you can fight link below this video and in that udemy course I have 15 hours long explanation and more in details how we can achieve all that also we can prepare both projects and explained more in details there so if you are interested more in knowing more about this topic I invite you to the course and in the description you will have the maximum of value in in the kokum okay so that's it I hope you enjoy it and I see you next time

Channel: Krystian Czekalski

Views: 26,800

Rating: 4.9699998 out of 5

Keywords: Django, Angular, CRUD, API, Rest, resfull

Id: kXxmhFk6STc

Length: 32min 0sec (1920 seconds)

Published: Thu Oct 25 2018