MEAN Stack CRUD | Angular 12 /13 NodeJS EXPressJs MONGODB Insert Update Delete | Angular 13 Tutorial

hi friends welcome to tutorial edition in this video you are going to learn how to create product operation or insert update delete using uh node express and mongodb in the backend and in the front end we are going to use angular so in angular we will be using uh this framework in the front-end section and in the back end we will create rest api using node.js express json mobile db as a database i have already created here uh node rest api and this note is in mongodb rest api i have already created this video so you just just follow this video first and then you will be able to understand this properly also your half of the task will be done so before we start this project i recommend you to check this video first and also here in description uh you can download this code in case you don't have time to check the complete video but i will strongly recommend you to check how to create uh node expression mongodb rest api because this is very important once you complete this video then you come back and let's start this angular front operation with uh this node mongod express so this complete series will be called the main stack okay so now let's create one project so right click and then run it administrator then d drive ng new uh main stack then it's asking router yes press enter and in the meantime let's open here visual studio code [Music] so now let's go to file and open folder so angular class and here what's its name meanstrack this is our folder name right okay before you proceed let's install here or just take here bootstrap cdn let's take from here just copy it and src app not factory inductor html so now let's paste here so we have just included this bootstrap cdn because it's easier now let's go to app and yes now we need to create few components here right so cd mean stack then ng g c that means we are going to create few components like and what we should name it first name last name email and first name last name email and password there are four fields so we can name it as student okay add student okay and then it will be edit student and listen it and then list student we have created three components here and then now npm for ng server so here you can see these three folders now let's go to its routing folder here it is starting a party yeah there is a plotting module so here we need to write let's create one more folder uh one more uh okay let's leave it so we will right here add so we need to write here path and then if this is home page so blank and then component here list component this student component so automatically got called here and then here add student and in this case we will have component and now here and student and path will be actually it will be path not add student path and then add student this will be removed from here add a student and here will be component add student component this one and similarly we will have one more that is edit student path will be edit student so here also edit student so currently we have all the three components uh registered in our route component now if we go to browser and open here localhost what is 200 and yes one more thing we need to do inside the same component let's delete everything and here we will write router outlet now let's check here okay so this component works so as you can see we have defined here in the rough module that if there is a blank that means if it's home page then first component that which we will load is list component and when we write this path at student in that case add student component will note and when we edit and of course here will be here will be id because we will pass the id as well here in this case student id all right so if you right here add student in that case as you can see it add student work and if we write here edit edit student slash one in that case this edit student works that means all our three components are not loading perfectly let's do one thing going into that component let's write here good step so we will write here gib india and then here class container okay so that it will come in the middle of the screen so it's coming here class container and at the top here let's write div and div and here class container blue container float and here we will write a navigation so let's find here push tab nav okay the lot of navigation so we may check any one of these so let's take better this one just i'm taking this one copy so this is the navigation section yes so here tutorial is this will be form there will be add student here will be list student and we don't require this so let's simply delete this right all right so now we have our primary level thing ready okay so the first thing that we need to create is add student here so we need to create here form right let's go to add student and then here html here div then close class md 12 and then h1 all right let's keep it these two add student and then let's take in the div and class row div okay here we will create the form right so first thing that will create form form close and here we need to create form group form group equals to add form add form add student whatever add student and then no validate in class form that's it and we need to create this ad form here inside its so here add phone for the timing any [Music] also let's go to module.ts here and import import forms module from forms and we need to import this as well here apart from that we will also import here import reactive forms reactive forms module because we are going to use corrective forms that is why and here as well we need to import this now you can see the error is gone and here let's create div and class row tlb class call md md4 or md4 first name and here input input type equals to input type equals to text name equals to form control name not namely form control name home control name equals to first name first name please don't in this video i'm not going to use form validation because i have already video related to form validation so to save the time so save the time i'm not going to use here phone validation but just simply a form here we can do one thing div plus call md so total will be 12 now let's check how does it look like okay so this is text texture center okay so it's now center this is first name and then this is text you can provide your class as well right so this is our first name so let's just copy from here first name last name email password and submit button [Music] last name last name entry here email email type will be email here will be password password type will be password password and then first name first oh a mistake so it's first name okay so let's do one thing just copy paste it below okay let's remove this we will have only one two to four and this will be eight and here we will have submit button button and then button type submit submit and here click on click will be on submit that means we will create this from this function here now the error is gone and also add student you can put here class name plus btn ptm success so let's see now how do i click that yes first name last name email password so these are the field we are going to use one more thing let's open here the command prompt and let's start the server so which server we have where we have indeed type node express api so this is our server so here d drive cd then node server.js so this is our back end okay so it's successfully connected if you want to open this then local host and port number is 8080 right 8080 okay and our point endpoint is if you like to check here endpoint in server.js that what's our endpoint so our end point is stupid rounds this is actually endpoint right so right here endpoint all right so you can see already there is one record added here in this okay so whatever we will be adding so what what are the fields first name last name email password these are there are four fields okay so we will be adding here first name last name email password let's go to style.css in here row dot row margin top 5 ps so that there will be some spacing here right [Music] now let's go to let's close it now for the timing now we need to come here and then here we will write the code for so inside the constructor we will call form screw let's write here private private phone builder form or fb you can write here fb form builder this one automatically it's code called the top and also apart from form builder we will call here routes so it will router module router it also got called from the top and forms group we will call here also okay and service file that we need to create so let's create one file let's do one thing this is your server file and let's go here close it and then ng g that means ng generate service students so we are going to create one service file as you know the service file is the connector between angular components and rest api okay so if you check here now once again let's start this and user and here service file where it is generated this is the service file which is generated now so in the service file we will create here one function called add student debt and then here we need to call http then h this tt http client http client need to import here at the top http client and this is the one of the steps so here will be return http dot this http http dot http dot post and then here actually this would have been this dot http this the http and here and here will be student and then any here will be the path which part this one that so end point is student this one so let's copy it and paste here here and then comma and then this student what did you say [Music] what's wrong with this maybe clearly okay private okay now let's get back here once again so we will call that service so student private private student service so student service this service automatically got called on the top so now we have our background ready so now we will write here the function this dot one more thing in the constructor inside this we will create here form group we will write here this dot r student equals to equals to fb dot group and then here we will create the form group curly braces in here will be first name then square bracket here initial value will be blank and then validators dot required that means this will be required validate the sort of link port called on the top first name last name email password last name email and password once again i'm repeating here i am not putting here validations is very simple validation actually i have already video related to that if you check my channel select your race and playlist if you go to my yes similar then you can see form validation how to do form validation is there okay you can check here [Music] 80 forms okay so you can check from here all right now so we were doing this at student work now let's first check here console.log.log so what is the result but before that we have written here first name last name email so same name we need to change here as well in form control so we'll write first underscore name last underscore name email refined and this is the password so will be password rest of the things are fine right so add a student add student what happened add to there is something wrong let's check what the problem it says okay null pointer http so we need to call here if you get this error http null pointer http client then you need to call here one module so you need to import http client module this one okay and just import this here as well all right so now it should work add student okay the form is not perfectly loading so let's write something here rogers one two three four five six whatever add student okay so data is passing perfectly as you can see so we will pass the same data to our rest api okay so now let's close it it's not part and this one is also done so we need to work here what we will write here this dot student service dot add student in here we will write add student dot value this value we will pass here this is remember the parameter this one error student this dot is 10. this the in here will be data and here data any and here console.log we will check what is the result so this data actually we will send it back to router to uh list page okay for the terminal let's keep it edit it now let's go here and close it let's check here inside network so once again charges okay so end point it says there is four zero four that means there is some problem here okay endpoint and there should be some data as well so let's check here in our no express api was the end point it should be inside routes maybe okay so for adding [Music] add student okay this one so let's go here and insert service let's write this and student so this is the end point for showing the adding the student all right now once again let's check here gmail.com one two three four five and then network okay so it looks like the data is added if you want to check if really it quantitative yes guys the data successfully got added here right so what we want is here once this is added it's just redirect to list page okay so what we will do inside this page let's write here this dot router dot navigate gate then where list steve dent right and this router now [Music] navigate let's do one thing let's [Music] okay private we have not written here private private routes okay the error is gone so now let's add another one i'm adding here [Music] student there is no student cannot match any rocks in this student let's go to routes and see what is there not service yeah okay we don't have any list of student okay that's why just copy it and paste here and list is a list student and here as well least student component this one okay so so yes so after ready it is coming here perfectly this student works okay so in the next section we will check how to list the students okay so in this section this data we will fetch and display here in list student section okay we will display this data here right all right so now let's start working on this uh list student section right let's go to the ts file uh this html html first let's delete this okay this is our html file so here h2 list students list student then students list this is heading and text center here as well div then class row and div small one tib so let's do one thing quickly let's create here table okay table and then class table class table and then the head close and th so here will be first name and then last name email we don't require password of course and here will be edit and delete right and then t body and then tr and here td td yes there is closing here so this will be closing here actually okay first name last name email and the data will be displayed here right so here will be first name last name email edit delete first name last name email edit delete right and here first name also so this tr and this tt will be coming from ng4 we will apply here right now let's work on [Music] yeah this ts file before that let's go back to service file this service file let's create one service called list student list student here list student and here rather than as a student it will be list let's check if this is same or not so let's go to here and list students okay so this is not required actually simply let's open here end point and point and let's remove this and let's remove here this as well because we don't need any parameter so and data will be here gate rather than post because the data will be fetched right so this is uh list student now let's get back here let's close this so we will come here this student and then in a constructor we will call student private student service then student student then service right and here as well [Music] private clouds router long turn so for the timing we will be calling these two and here let's create one function say load student and then inside this this dot student service dot ladies to listen student dot subscribe dot subscribe this is a function actually okay subscribe and then data any in here console dot log let's check if the data is coming or not from this data first we need to check this and then finally this law the student will go inside here this dot normal student okay that means this function we are calling here now let's check uh here release student control shift i inspected that means yes the data is coming here as you can see right so now [Music] let's write here this dot students equals to uh data and of course we need to declare this here student city and here let's call let's close this very least student html here star ng for then let student of students students [Music] students you dance this needs to be deleted in here as well so now it's working and at this point of time [Music] we need to write here the td so insecurity will be student dot id directory first name student dot first name so let's check if the first name is coming or not yes the first name is coming here so similarly let's copy this first name last name email password is not required so there will be a written delete here as well so edit and delete so first name is already here last name and then email okay guys so as you can see the data is displaying from uh mud stack like uh you know react sorry uh express.js node.js and mobidb the data so i have already created this rest api in another video so as you know that we are fetching this data from node to node and expressions and the databases so now the next task is to create these two delete and edit right okay now let's do one thing go here and this student let's create one function called delete and we will call this okay enter here delete let's create one button and click then delete and we will pass here the parameter so what we need to power we will simply pass this student okay student id so actually underscore id this is id so simply just delete and then student nothing else so actually the function that will be del and then data any okay and we need to create one function in service here as well so it will be [Music] daily student and this time we need to pass here id number okay it's not number actually string it's let's put it any in here we will be passing here id so delete student and this one and here will be delete method will be delete so delete student let's call here this dot student service dot delete student and then there's a function so data dot underscore id or ids dot underscore id why underscore id because if you check here like this you can see underscore id that's why we are writing here underscore id dot subscribe then data console.log data that means result whatever will be returned okay so let's try now if the delete function is working or not so this is the one we will create delete this nissan okay now let's do one thing let's check the network section then we will start if it's working or not okay so it says 404 okay why because student service [Music] id we will pass okay so for deleting student id this for getting and delete delete delete here is that this had a student deleted so this is actually end point so our end point will be this delete student and then id this is our endpoint okay now let's check if this delete functionality is working or not once again because we have changed still it's saying 404 that means so localhost endpoint then okay id is not going they're right because of some region id is not going here going through select state y id is not going so what i will do here okay so rather than this comma we'll just put it plus sign okay now if you check then one is already deleted i checked it so now let's delete another one say kareem okay all right this is deleted yes our deletion is working so what we will do once delete work is done it should data should reference so here we will write this dot students equals to students dot filter and then here inside this u and then any oh not like that actually you any here then [Music] u not not equal equal to this tube equal equal to this data so let's name it as uh datas okay because we have there data this one is students these dot students dot in here as well so what it will do it will take the data whatever watch previous one okay this might be confusing but it's not confusing at all suppose it has five records okay so this will also have five reports and it will check that which one is deleted so one is deleted then it will return four reports and these four records will be assigned to this and finally this will display in html so it will filter deleted one will be filtered and assigned the remaining one okay so that is the thing so now if you check here yes as you can see instantly it is getting deleted now let's add one more add student so [Music] edit again so two records are added so so far we have done view and then delete the remaining one is edit and update so this will do we will do in the next section and in this section now we will work on edit part okay so let's do one thing let's open here list list this one and uh i read section we will write here rocker link a at this point a router link then a close in this edit will be inside this so it'll be edit then id okay this id we will have to pass here let's pass here slash no square directly needed here let's delete and here edit now double slash curly braces then student student dot underscore id this id will be passed here and rather than how to link let's keep here href okay so now let's check into the browser open here and click on this so what is happening here edit and then this id is passing here so it looks like if you place mouse here then you can see here so this is edit and then id right so let's open here router once again router [Music] yes there seems to be some mistake okay simply let's keep it here so this is added student right now here also we need to put here edit student and then let's go here and then now as you can see the edit student works in this page we are redirected to so what we need to do is that and here let's put here last class ptn ptn success and here class btn btn danger right now so when we click on the edit section so in edit path what will happen just let's copy everything from the app section from this html just copy it and let's paste into because edit and add will be almost similar so here let's change it to edit student and here as well edit student okay and then add students here also in this ts file let's go to add student ts here so we need to copy everything just like this and [Music] edit student this is we'll just copy from this one just copy from here to here and then let's go to edit student this ts file this and from here to here so now this form builder here we need to import and router this is well this service as well need to import in the top validators also so these are not imported okay so add student student service and this student let's close it so we have here inside student service we need to create one more so single student here you write single student and then end point here and it then plus id plus id every id id right and here will be put let's check here so what's the for edit edit edit this one student slash id all right so here we need to pass here this student slash id what's wrong here this id id okay it says it requires two argument and here what i've done single student get single single student then this dot http get and then id will be passed based on the id the data will be fetched and finally in edit student we need to write here this dot this dot student service dot single student dot and yes we need to pass your id of course so this will be the id we need to take from here snapshot we we need to take this id this dot so id equals to this dot id and here we need to call one more private uh url active route snapshot or active route so now this parameters and then there is hyphen id node side evenly so errors snapshot dot id so let's check if the id is coming or not so console.log if you know php in that case you might be knowing get so this is like get so let's go here and if you click here then let's check in the console if the id is coming or not yes this id is coming so what is this id actually this id this one right so we we have written this code this dot id this dot url slaps out errors then id right and for that we need to call this activated route okay and here as well so these are not required it's delete only activated route is sufficient yes that's it so now once that we are getting this id we need to pass this id from here and then subscribe subscribe and then our data and here we will cross here this dot and here here we will have to patch now we need to write here this dot add student dot patch value value and then this data data which one this data so what it will do first the data will be fetched from this function and then this data will be passed here and it will be mapping all the fields there and then if you check here then yes you can see the data is filled with coming filled with this for example let's check another student so let's uh first list student right so we have to if you click on edit then the data of this classroom was done and all that will be coming here so now here we will write update part so rather its name will be not eight update student update student and now here we have this submit one so rather than in this add student we will have to pass here two things um let's name it as update student okay and we will have to write this function here in service file update student and then student any and here we have to pass this return put the first one will be we need to pass here two things right on id and second one will be student so student dot id student dot dot id and then student so we need to pass id as well as the data so its name is update student and here in edit section we have written update student then add value subscribe everything same will be there after updating it should get back to here so now let's check what's the result now let's click on network and try to call send shutdown update okay so there is some undefined defined let's check here okay the id is undefined right so that can be the region so let's check here if the id is coming or not not here actually [Music] in service section here let's check i believe it will be underscore id right because it's naming underscore id the field image so now let's try once again okay still is saying undefined all right so now let's check here if data is going there or not so console.log dot no let's check what is coming here okay what it what's coming here because we have not passed here id we are not passing here id right so there will be one more field yes let's do one thing in updated studio because we need two things so this if you check here in the console in console there is no id let's check here let me show you one thing here in console if we click on edit then you can see everything is there except id that means the id is not there that is why we are getting this error so what we will have to do this is fine and we will pass your id as well so how we can pass this id we have there right this dot id or we can write inside this also here as well so this dot id yes it's not required so here in service [Music] first one will be id right and any and the student any so this one will be only id that's it in this student so all the data will go there and id will go there so where we will get this id we will get this id from here so let's do one thing let's change the sequence and yes so first will be id and then the student so now let's try what's the result so if you try to update now so what happens here crosstalk still there is already passing but there is some problem student 404 not from one this then student so let's check here so this is our endpoint okay the endpoint is update the endpoint is update that is why he's saying that it's not formed now let's go here click change here cursing update yes so it's updating perfectly you can see it goes in insult update once again for sim done update updating here perfectly so guys you can see how easy it is to create that means add update and delete in this mean step so hope you like this video and i will also provide the source code remember one thing is very very important that you know normally what happens when we have search for normally we download and just try to play around remember you won't be able to learn properly so that is why normally i don't provide code okay but you know there is a trend nowadays okay so you know other youtubers i see that okay download source code so normally you know the visitors go into that video that's why possibly i have to put that but as a teacher i'm a teacher as a teacher i'm a trainer as a trainer i understand that if you type the code line by line yourself then you will understand better as compared to downloading the source code and just using that you won't be able to understand that properly so i recommend that you learn it will take some time but you will learn this in solid way so hope guys you like this video and don't forget to subscribe to my channel still you have not subscribed so see you in the next video thanks for watching bye

Channel: Tutorial Rays

Views: 15,039

Keywords: mean stack crud operations, mean stack beginners tutorial, crud operations in mean stack, mongodb express nodejs and angular, insert update delete and view in mean stack app, mean stack crud github, mean stack angular 5, building server side app with nodejs, mean app from scratch, tutorial rays, MEAN Stack CRUD, Angular 12 /13 NodeJS EXPressJs MONGODB

Id: o2HxDnPz7xY

Length: 73min 18sec (4398 seconds)

Published: Mon Apr 11 2022