Django and Angular full CRUD part1

welcome again in this video I will show you how we can use Django REST API and angular and we can do full crude crude stands for create update treat and delete and that's four methods most popular methods that are used with our REST API and that's using metal to get post put and delete and we'll do that with using Django and angular and I can show you how we can connect with both framework front end and back end I have two other videos on YouTube where I use Django and angular to register user and login user so go to my account check that out if you need it in this video we'll focus on a crude so what we'll need to do is we need to set up a quickly project here I'm not gonna go into much details here because we need to hurry up we have a lot of a things to cover so what you can do is I have a full course about the Django and angular on udemy and I can give you a coupon code under this video so if you're interested in more details what I what we doing here you can use that coupon and the for course is 15 hours long so you will know that much in details okay so let's get starting we need to act facts because there's a lot of things to cover so first we will need to create two application one will be to Chango and another one biz here another one will be angular as you can see here and we'll use that to QuickStart to to do it we are opening our terminal I'll go to desktop and we can create new order Django and then going to that folder we're inside so we need to create virtual environment we need to activate it and now we have our vr-2 man virtual and we might aggravated I can install Django and that will install in a second date we need to download a Django and install as you said I'm not gonna go into details what all that means but if you're interested you can check this out on my full course and now we need to install Django rest frame work and this is exactly how it is in this tutorial is so I will provide a link to this tutorial so you can follow the steps as I'm doing so next thing we need to do is create our project so we are inside here so we will create a project we're not going to name it tutorial I will do Django crude and remember that for and that dot at the end so we need to go into that folder and then we need to start about our application create application so we do changuk root and then inside we go we need to do this and our application we will be named API and we have all that so what we need to do is we need to do migrate and then create super user but to do that we can do that inside IDE already so we'll open Python this is community version which is free Django and opening here in here I have terminal the virtual environment is automatically activated so we need to go inside Django seedy Django and inside that Django crude actually I don't need to if I do well s I have already managed by so I can write Iran all my comments from from this point so I can do and as it was in this tutorial you have my my grades so I can go migrate and you apply the migrations now we also need to create a super user like that Kristin is fine in address we don't need to pass it I will do a password Christian again and we have our super users so what we can do now is we can run server and if I click on this you can see our application is already up and running so we have our application I don't so what we can do next is we will copy a few bits and pieces from here so we need to create a new file serializer so we'll go to junk root that's our API here inside I will create new file Reiser's VI and I will paste it here and we'll change it for something our own but the easiest and fastest way will be just to copy whatever they have here and that change it for our own it so inside views we can paste it here we need to change this we don't have a tutorial we have Django crude and Django crude and our application is API group 0 i so we don't need so for now it's like that another thing what we need to do he is URLs I will copy entire thing and inside our URLs I will copy for now that here and we'll just take the part that we need so this is our API and sorry this is our Chango crude API this is where we have our reviews and then we have our routers we don't need to have group and then we include that inside so I don't need to actually I can reuse the admin this is something that was there when we installed this triangle so we have our admin here and then I can remove that and we have everything actually that comments we don't need so I took a new thing from the restful framework from this page I copy everything and I just left admin that was there when we installed a Django so we'll have that basically it will include our view set into a URL so we can use it but this admin part if I go to our server running here if I do slash admin I can use the Christian and Christian password to login and this is my this is my administration section so I can create new records here so first what we need to do is we need to create our own model so let's go here we don't have any models and we can do class movie and that will be models model and then we can create some fields for that model title models char field and then you can do max length we have to do for child char field 32 and I can duplicate it and I can do the scription for example and that will be 2 5 56 and I can do here morals in the juror feel and we can leave it like this so we have our model here what we'll need to do also we need to have cereal cereal Iser and views it so we have our model we don't use use we don't need user here so I'll do movie utilizar I can do like that and that will be movie so we have our movie here and we'll need to also import that so from models from models import movie and we have our movie and we have to title description here also I will include ID which is built in filled in all models and we have our in a view set set up then we need to use a civilizer as well so we go to serialize so this is our serializer we also need to do what you said so we'll change this to movie and that's from silly serializers and then that's her movie theorize ER so basically we just took whatever was there in there tutorial and we change it for our movie or movie model and so our representation for a user we've changed for a movie and then i need to also do models movie so all that is done then we need to also change the URL and URL movies and then you have movie you set so we also need to add this into settings inside install tops I don't have our server running now so we have our model and we've create for that model three fields we also have a usage that view set we'll use our model to select all the models from our database and we can use our movie serializer for this and our C riser is basically the way we want to format our movie data so we'll use our movie model and we'll use these fields inside so basically that's all setup and in the URLs we also have that include URLs this part and it will include my movie view set inside so if I will go now into my application here and I can do movies and actually there is no table because we haven't run migrations yet so I can do terminal here we'll close this I can do make migrations so we are created migrations and in that migration all our information about the movie has been created so we need to do migrate and that migrations will be applied on our database now the task that has been applied so now our database includes our movie model so if we repeat it here come back we need to run server now servers running so we can reload and that means and there is no template for further movies that we can go back here into admin and it's still not here so we need to add it to admin page as well so I go here and then we have we need to go to admin and then we can do admin side Treister and then we register a movie we also need to import from models import movie so if I will save it now I will refresh it I have my movie here and we don't have any record so quickly if we can create Titanic nice drama and then I don't remember the year let's say it was 1990 and then I will add another one avatar and I also doesn't don't remember this year so we have two records here and now we have something that we can work with so that's our django application running we will try to do something here so now now we can start doing our front end and I will show you how we can connect it both of those so this is already done so what I can do is I can go back to my desktop and I'm on the desktop at the moment and we will use this angular CLI a method so we'll create a new application and we'll serve it so let's go back to terminal I will do ng new and then we can create our application our application will be let's say crude an angle which will be downloaded and it it will create a new project for me now angular has been installed so we can actually open that in Visual Studio code so this is also free a text editor as you can see here we have this project already created so we have everything set up for us so we can go thoris application and we have our component here and if I will do see the crude and reserved it will start our application and then copying this URL we can start our application here so it's been compiled successfully and you can see application here so we have our welcome to cruet application so what we can do now we have this front-end so we go to HTML remove this and I can have the list item term because we will reuse it and then I can have a list of movies and here we can print our list of movies so we do and re4 let in a movies and then we can have movie title let's see if that will work so we'll go to our component yes and we can add this movies here so movies it will be arrived with some objects so I will do title and the first one will be tonic at the moment we'll use we'll use static array and then later on we'll change with our dynamic from our database and do half adder avatar and that's it so let's see if that working we go here refresh it we can inspect elements and probably have some errors we need to change this of movies and we have our movies here so a list of movies and that's our Titanic and Avatar at the moment this is not coming from our jungle this is a static list that I have created I have created in my component here so that my array what we need to do now is we need to replace it with something that will communicate with our API and get this list a dynamic so I'll revert it to just one record and let's say that will be something else not to make a mistake that it's coming from the API before we refresh it back this is test okay and good to go what we can do is we need to communicate with our API for this we'll need to create a new service so what I can do is I can shut this down actually we can close this terminal and I can open new terminal in if I do view I can do terminal and my terminal is here I'm already inside that project so I can do ng generate generate service and we can call this service API a new service has been added so we have service here and here this is spec files are for the testing we are not going to cover any tests so we'll go straight to the service and this is our service here what we need to do is we need to we need to enable HTTP model and we'll make more space so we can import this HTTP model in code side constructor private HTTP HTTP client if when we were looking for and it is been automatically imported actually this is not the claim we want to have it so we will we want to have this from angular angular HCP this one angular common and then HTTP and this one so we have our HTTP client that we can use and we can create our first method here so get all movies it will return all sir observable any and inside here we can do writer on HTTP GET and we'll have our get here so URL first thing first we can create base URL here and basically our URL for now is this that's how our URL here so we have that and we can copy that inside here and we can reuse it as a base URL so what we need to pass it here so we'll do this base URL and then we can do + movies we need to do slash movies you also need to do some headers so we do HTTP there's new HTTP headers like this and then inside I can do headers we want to use we can do content type content up application JSON and we'll use that headers here remove it to another line so basically we have our headers here which is content type application JSON that supposed to be capital letter contact our application JSON and then we have our method here that will a return observable and we have we return our get call to our API which is this URL here and then slash movies and we use that hhp headers which is a telling application that would be a type of application a JSON so we have form our method here what we need to do is we need to reuse that so if we go here we need to first thing first we need to import that so I will do constructor and then we going to prior overt and then I can do API and then it will be API service that has been imported we also need to do it in providers providers then I can use API service like that and we have that inside our constructor now we can inside also here we can do get movies movies we'll need to create that method so we can create here using es6 syntax arrow functions so inside our constructor oh and our application will start there our components will start inside constructor we'll try to get the movies and we have our function here that's all a matter that we will use and inside here we need to get a list of the movies from our API so what we do is this API which is this service and then we have get all movies method here and it will get all movies for us then we need to subscribe them the we need to subscribe on this observable and then we can say data will do something in case of error we can do something so control log error and then it will have two data so we can say this movies data so we have our you know inside hours inside our service we return this call and we return observable so we subscribe to that observable here and whatever is coming from that observable if we'll have the data we'll assign it to movies and movies it's our a variable that we previously use it as a fixed one line test and we'll replace whatever it's on the server so let's right now we need to ng serve here that have been built let's go back to our application here and we have connection refused so localhost a socket has been refused let me know actually that was the last one so we have no provider for HTTP client we also need to import that inside our modules so we go models and we need to import HTTP client here we have httpclient and we need to also import it here so our model know that we inside that application we will use inside that up inside that model we will use our HTTP client so come back here we should refresh it's supposed to be HTTP client model this one will have different on a model if I refreshed again and we have a list of our static 8s so at the moment we have problem control knob close our origin so the reason for this is basically we need to enable course in our API because at the moment it's hitting course we need to enable that the best way to do it is to install the jungle course Heather's a plug-in so to do that we need to copy that and we go into our Django and then I can close the server control C now paste pip install Django course we have our ventura virtual virtual endearment activated so we install this that's done next thing we need to add course headers in site or settings so go settings install tops we put course headers all save it next thing what we need to do is we need to copy those also put it inside our settings inside middle where I will save it and the last thing what we need to do is whether we do cross origin hello all or we can do like this so basically if you use this option you will actually allow certain certain hosts to to have access to your API and what we can do is actually we run it on this localhost 4200 and we can use this only so will allow only from this host we don't need that or that and I will save it now we need to start the server server is running let's try again our application and you can see here list of the movies is coming from our API we misspelled Titanic so you can see here if I will click here that's misspelled here and we also have it here so now the communication in between application a has been done and you can see here if I will refresh it in their application you can see this is the this is the request we sending to our server I'll make it bigger and we have response here we can do preview and this is what I'm getting from the server and we can see all the information there and we display that on in here in the next section I will show you how we can do other methods at the moment we have get so what's missing is a put post delete and also I will show you another trick how we can optimize this in this method for a list view and also for specific view so that will be in the next video

Channel: Krystian Czekalski

Views: 90,981

Rating: 4.8631015 out of 5

Keywords: django, angular, crud, rest, restfull

Id: z_H-oxQVsPw

Length: 32min 42sec (1962 seconds)

Published: Mon Oct 22 2018