[ Free ] MEAN Stack Tutorial for Beginners | Mean Stack Full Course 2023 | Scholarhat

mistake is the most popular stack for building the applications the developers are using across the world this course is all about how to set up a mini stack application and perform the crude operations in this course you will learn about how to set up a mini stack application from scratch so first I will tell you about the minister Gap structure which we are going to follow in this training program then we talk about here how we can Define the model using the Mongoose so Mongoose is a odm tool which will help us to query the mongodb in object oriented fashion now we will set up here the database so how we can set up the database connection string so that we can easily make the connection with the mongodb database with Alpha mongoose then we will build the rest API using the express JS further we will test the rest API using the postman and finally we will configure our front end with Alpha mangular and with Alpha mangular we will perform the crude operations so these are the various topics you are going to learn in this training program to get started with this training program make sure you are familiar with angular and express Chase if you are not familiar with angular Express I suggest you please refer to the dotnetics angular courses and node.js angular courses and for the tools make sure you have installed the node.js angular CLI vs code mongodb compass and Postman so these are the various tools we are going to use in this training program for testing debugging and writing a code I hope you will join me in this journey angular and express with crude operations using bdstack on.netics see you in the class if you are coming to the Channel first time I request you do please do subscribe to our YouTube channel and click the Bell icon so that the information about such valuable code says you will get notified so let's get start with the course mini stack app structure now let's understand how we will Design our mini stack app so here we will get the backend using the express.js so here we will Define the controllers for writing our logic so that we can query the data from the database so here we will use the orm as a mongoose so Mongoose is a odm it's your object data model which is used with the node.js to query the mongodb routing we will Define here models we will have so that what are the models we have defined here those we can map to the uh the document in the mongodb so here with Alpha Mongoose we will query our mongodb database and whatever the requests are received by the backend here so that data we will send to the front end so front end here we will build using the angular so in angular we will use components will be loose Services we will Define our routing and various other things we will use in the angular here I have not mentioned all the things over here the mainly things I have mentioned here for the UI we will use here board step 4 so therefore bootstrap we will Design or application UI so from the front end we will have the request and that request is going to be possible at the back end are in the backend what are the data we will retrieve from the database we will send back to the front end and this everything will run within a node.js server so what I will do here I will set up all these front-ended backending with the alpha node.js server so all the things we will run together so that finally we can deploy them as a node.j server so this is the architecture we are going to follow in this training program setting up project now let's set up our mini stack application project so that we can perform the crude operation here so what I have done here I have installed already node.js I have installed the vs code as an ID I will use I have installed the mongodb also if you have not installed please install all these necessary software then I created here a mean stack folder so this folder is right now empty so let me open this folder in my vs code IDE so I just open the same folder there is option a file open folder and there is a mini stack and open it so this folder is right now empty so let me initialize this folder for a node.js application so I can use here and PM in it to initialize it for node.js application Now define the application name so it is asking for the package name so by default it is suggesting what the folder name we are having so it is here let's say mini stack it's fine version number 1.0 description let's say mean stack crude is description here entry point you can mention here so I will use the entry point as app.js then enter it or you can mention it as command also if you're willing to Define any test cases so I'm leaving it empty because I'm not willing to write any test case a git repository if you're willing to deploy the code on the GitHub so I'm not using any git repository so let's make it empty key what you can mention here let's say mean stack as the keyword note and let's say Express so any keyword you can mention and this keywords also will help you when you build uh deploy the code on the git so when you build support your account on the git there these keywords are going to be helpers so just mention here author I can mention is at the rate .netx.com license IC it's fine so it's added here a package.json file for us here I'm here everything I'm setting up from scratch I'm not using very predefined any folder structure so now let's add here a file for app.js where I will write the code to create my node.js server so to create here the server we will use express.js so make sure we have installed x square J so let me install the expert Json and PMI the next press and just make the express as a production dependency so I just mentioned here flag that this C should we download a package for express.js now let me import the Express package here constant Express and using type choir I can import the explicit so this is why I imported the express now create the express application here constant app equal to it would be here express application I'm creating and here I'm creating the here I'm following the es6 syntax so constant we use in the ESX so that syntax I'm falling here also now to start the server we need to define the report number let's say constant Port equal to it would be here let's say process dot environment and then port number then let's say 3000 so if port number is not available let me mention here let's say 5000 I'm mentioning it the news here app Dot listen and do listening for the port number here so using the arrow function I'm defining the message like server is running so let me use here console log and mention the message here let's say server is running at the new convention here State TP and it would be here a local host then do mention the port number here where actually our server will run so I can mention the port number here like this way so this is the way how the server will start and by default will run on the port number is 5000 if there is no environment specific setting so this is how we set up a simple Express server to serve the things right now we have not defined any folder where we write our logic so let's do one thing let's add a folder for server in the server folder I will write my Express JS code with that for mongod Al for Mongoose to query or mongodb so in the server folder we will Define our structure for defining the various things here so let me Define the folder structure in the server folder here so we will Define here controllers so let me Define here controllers and the controller if we write the logic to query a database so let's say I'm adding here a controller named as user Dot controller dot Js so here I did a controller user controller so in the user controller let's write the code so that we can serve the request from here so here also we will use the express Js so let me create let me import the express here so it would be here Express and then require the expression now we are using the express router class we will Define the roots for this controller so let me Define here constant router let me Define the express router class instance here so it would be here Express router this one now let's Define the root here router it would be you get and now Define the root here let's I'm using here schless and then here I will pass the request comma response then Define the things here so I'm defining it a default route under the default rule let me let me pass here a message response dot send hello it is only for testing purpose later on I will change the code and finally export this router here so there is a module dot export so we are willing to access it outside this file that's why this router I'm exporting from this JS file if I be not export it I cannot import somewhere else to access these methods now let me Define here a folder for the roots so in the server folder itself I will add a one more folder with the name let's say roots in The Roots folder let's add the root for our apis because user control is a apir submitting here is JS file API Dot Roots dot Js and here just like how we Define the roads in the user controller similar way I will Define here also constant Express equal to import the express here I import it now using the express router class Define the things so constant router equal to it would be here Express then use router class to create the instance Now using the router I can do it here so here I'm just using here router Dot Define the use because I am using it for user so defined here the API prefix how you are willing to call it here so user controller API I'm willing to call it here the user as a prefix now let me import the things so I'm just going to import here using require then controllers slash user controller so this way we imported it here now let's export this router to access it in another file so I'm just exporting it here like this line so whatever the various apis we will create here so further we will create other thus controller also let's see product controller category controller solve the controller we will Import in this APA Roots so it's a common file for the routing now we are having in our application now this APA Roots file we need to import in this app.js so that we can Define the routing for all the apis in our application so let me import here the APA Roots file so I'm importing here at the top level it's saying constant API it would be here roots equal to it would be here require then it would be yes server slash Roots then AP roots so this way I imported it here now before defining the server now let me add the root for the API so with Alpha we use method I can Define it here Now define the prefix so as a prefix I'm using your API because we will Define here the root for my angular application also like my Forefront application also so that's why I'm just going to distinguish between the APA roots and the front end loot so I'm just using here APA Roots as a API like this way now let's start the server to check it how it is responding so far we have not defined any mongodb it's a simple API we are creating with the hello one so let me start the server here node server just to mention the file name file name is here node app oh that's showing here the reason is the port number 5000 is already in use so let me try with different port number three thousand leads I'm using here so you can see port number 3000 is available 5000 is not available let me check it here how it is running so use a local host 3000 then API and then API name user so you can see I'm getting here hello so this hello is written by this user controller here from here it is returning now let's say if you are willing to verify it let me do change here hello it's like so I have done the change so I need to restart the server again so instead of restarting the server again and again we can configure here the node mod let me show you here the way how we can configure the node mod so that we don't need to restart the server again and again to digest the changes so make sure you have installed the node mode globally so this is the package you need to run here and pmi-g not 1. some note mode I have already installed globally I'm just showing you here how you can install on your machine so you can see here it is added the node mon globally now what I can do here with the alpha node mode I can start my server here so node mode is a great tool when you are building the node.js application so now instead of running here node and the file name now you have to use node mon and file name file name here app now it has started the server here at the port number 3000 now let's do one more change hello main stack I'm just showing you how the node mode will work here save it let's restart the server again as I did the change here now reload the browser and you can see I'm getting the output here so we have configured the node mode also at the Machine level so I always start the application now node mode then app and it automatically watch for the changes wherever we are doing in our application and it automatically restart the server and show us the latest result so in this way we have done the setup of our backend front end I'm not going to set up right now front end we will set up later on let's first build the API with the alphab Express and the mongodb then later on we will set up the front idea a defining model using mongoose so here we are going to use mongodb as a database so for mongodb we are having the odm object data model as mongoose so let's see how we can define a model using the Mongoose here so for using the Mongoose first of all we need to download a package from the npm so let me open your new terminal here there is a icon plus so just click on this plus icon and let me install it a package mongoose some Mongols then save it so here I have installed the Mongoose at the project label you can find out we are having two packages here's Express and share now let's define the model so for defining the model I'm adding here a folder models in the server submitting here a models folder in the models folder let me add a model file I'm adding here user dot model dot JS file and now he let me import the Mongoose here I'm importing the mongoose so it's required then import here mongoose and here we need to define the schema with the alpha mongoose so Mongoose having the scheme also so let's say separator by comma I can define a scheme also so let me Define here a Mongol scheme also so it should it is available from the so let me Define her constant schema schema equal to it is your Mongoose and then schema Now using the schema I can Define the schema for my model so let me Define the user schema equal to it would be new schema then Define the field so here I will Define the field for my model so let's em Define eager underscore ID because in mongodb underscore ID will act as a primary key as we have in our dbms so I'm defining the underscore ID Now define the underscore ID data type with the alpha here Mongoose schema so I'm just using here schema directly a schema Dot it would be here types then type object ID and here I'm willing to generate it automatically so there is option here Auto generate so we generate the mongoose it will generate the underscore ID automatically I don't need to pass any value for underscore ID let me Define the other field of defining here name Now define the name type as a string if you're willing to make it it required just usually let's say required it is a required colon row similarly I can Define the other fields also also let me copy it and Define here for contact number contact it is also required and Define here for address also it is for address and address I'm making here optional so let me remove on the required rule so this way I have specified it and here when you will Define the schema through the Mongoose so it will add a version key also so here I'm not willing to create the version key so I can Define that I can disable the version key as false I just make the version key as false so it will not create the extra column for maintaining the version now let me use a constant user and with Alpha Mongoose I can create the model here Mongoose model then Define the model name so I'm willing to create the collection with the name users so in the mongodb database it will create my collection name as user then pass the schema which is schemat will follow so it's here comma so it will follow here use a schema and finally export this model here it would be here the user I just exported this model so this is the way you can Define the model here with the alpha Mongoose similar we can Define at this model also if you are willing to Define here database configuration now let's specify the configuration for our mongodb database so that we can start using in our express application so what I'm doing here I'm just adding here a one more folder with the name config and this config folder I will Define all the configuration data setting so this time defining the configuration for the database so let me add a file with the name DP Dot config I'll let me Define here the file name as DB dot JS find name here and now let me Define here the mongoose so let me import it here require and then it is here Mongols now we need the mongodb URL so that we can connect with our mongodb so let me use a constant DB underscore URL so using the process I can find out the mongodb URL from the environment so let me use here dbr so I have now specified the mongodb URLs so far at the environment level I will specify it let me make a connection to Mongoose so Mongoose dot connect is the method they need to pass the URI so I'm just passing here mongodb URL and you can Define other options as well if you're willing to Define but it's optional it's up to you however you are willing to define or not then here you can show the message as well whether connection is made or not so we am having a message here let's say mongoose connection then do listen for the connection here if connection will establish then it will show us connected so let me specify a real message so this is the even name I'm listening here so connected is the event for that I am listening here so let me Define here a arrow function where I can specify my passage so I'm just defining a message let's say connected similarly I can do the listening for error also so let me Define here error so if there is any error so that error we can see where let's say other and that array will log whatever we will received so this is the way how we specified on the configuration for the mongodb database here but so far we have not specified the environment specific thing so for the environment in node.js vintage stole here one more not this packet the packages here Dot EnV so let me install here one more package to set up the environment specific things so I'm just using here and Dot e and B package I'm installing here like this way so now I can add here a environment environment file so let me add here environment file and the root label I'm adding the environment file so it would be here dot e and V so this environment main file I added now here I can Define the environment specific settings so here I can Define the mongodb URL here I can Define the port number to run my application so let me Define here the mongodb URL process the environment so environmental specific setting I'm just going to refine it so here I'm using my local mongodb so for local mongodb there is a specific setting you can Define here like mongodb and then Define localhost look close then Define the running port number it is here running port number then whatever the database you are willing to create it you can Define it so let's say I'm willing to create my database name as main stack so right now I'm not having any database with the name ministag so this is the my local connection if you are using uh the mongodb atlas if you are using the some other Cloud connection don't mention that connection here and here I can mention the port number also they are I'm willing to run my application so I mentioned the port number here 3000 now this environment setting I can specify in my app.js file so open the app.js file and now here let's configure it so it should be configured before the express application so here I'm configuring it before the express let me put here a comment also like setup environment settings so make sure you put your putting putting it before this Express app installation so I'm just going to use here require the report in the package that is dot EnV the news here config to configure it here so this way it automatically pick up the environment file having the extension.e and B so I'm using here by default only one environment file but if you are going to define the environment file for the development environment separately test the environment separately you can Define here by using by having the accession.e and B and you can configure here depending upon the environment so I'm not defining the environment file here for different different environment I am using only a common environment file that I mentioned so now I don't need to mention this 3000 because now this will pick up from my environment file 3000. similarly we will pick up the mongodb also from this environment file and here behind the scene my application is constantly running by the node mode so you can see here it is showing bit is running here at Port number 3000 is already running and here so far I have not imported the database connection the database configuration file so at the top label let me import the database setting also so let me import here the database setting also require and then require here server then it would be a config then DB I imported this one also now save it so you can see here it's not able to connect here because it is saying here the URI parameter to get undefined so the thing is here make sure what the URL we have defined the name is matching exactly otherwise it will not able to access it here and it is here constant mongodb era so here if you will look at I'm getting the error the reason is here I just try to set up the database before the environment setting so this comes should after this environment setup then it will work now can see it is connected here perfectly there is no error so make sure if you are using the environment specific setting it should be before that if you will try to do it before this setting then you will get there as I received in case of mongodb connection so now it is perfectly connected and there is server is running on the 3000 if you want to check it here you can check it by 3000 it's returning me the same output so this is the way we successfully set up all the configuration related to the database and related to the environment also a building rest API using expressjs so now let's see how we can build the rest API so if you look at already all the things we have set up here now are you already having the user controller so in the user controller we need to write the code so here let's write the code with the alpha here Mongoose model so let me import here the Mongoose model and after that I will write the code here so I'm just going to import it a constant user equal to then require and import the Mongoose model so these are models user model I imported it here now here I'm just willing to fetch all the documents in the users collection so use your user and the Mongoose provide us various method so I'm just using here find method so these methods are exactly same as we have in mongodb same Methods at the Mongoose is providing to us so user find and here I'm just willing to fetch all the document so use here then Define what the documents you are getting so it will return to us all the documents this way so finally send this document by calling the response send method if there is any error while fetching the data it will Returns the error so error I can return here using the status code so let me use here this pawns and then status now it's up to you what the status code you are willing to return here so let's say I'm returning a status code AS 500 for the internal server error then send error so this way I send error here so there is no document in the database it will send us if there is any error while retrieving the data from the database it will return as 500 as a status code in the given error so let me check it here how it is working it's already working fine let me try to retrieve the data now so I'm getting here empty array if you want to check in the database so open the mongodb compass so this is the mongodb compass make sure you have installed in my case it is already installed I open it here and now let me check what the various database we are having so so far I don't have any database with the name mean stack ah because we have not added it here so far so here database and the collection would be created on the fly one first time I will access it so just do one thing let me write the code for adding a new document also so why making the post request I can add a new document so let me copy the same code here and let me add here for post I added here the post one also so here I did here I'm doing the the method chaining here so this is the method chaining you can Define the separate method also like this way uh router dot post or you can do method chaining also it's up to you take the separate style even I can do the method chaining this is the method chaining now here from the request I will retrieve the data so here I will keep the data from the request body so use here request body for getting the data I need to add so here from the request body I am retrieving the object now here by calling the method for adding a new record I can create the new document here so now for adding a new document let me call here the create method so there is a great method available in mongodb for adding a new document let me pass the object and here it will return me and the dock so here I can return here the information about whether the new document has been added or not so we return always the status from the API so we return the status like this way and as a status code just to mention two zero one because it has been done successfully then obj I just mentioned here but here instead of doing the hard code value for the status code battery is here let's use a npm packet so that is a not package here which can I download to have all the status code value so this is node packet aspected p s status code so this node package I'm installing here it is status codes and now let's import this pack at the top level and wherever I need the status code I will use this one so I will use the HTTP status and then import it here it would be here http status codes and we don't need to Define again let's see user comma and Define it and here also I can lose like this way here so now using the HTTP status I can mention everything so just Define your HTTP status code so here I can mention the status code it would be here internal server and here also I can mention here status quote let's say created and it also it would be your internal server error so the hard code I just replace I'm just using a HTTP status code created internet server like this way so make sure my application is running fine it's running fine let me test it here okay so code we have written now we need to test the API using the postman in the next video I will show you here how we can use Postman for testing this code testing rest API using the postman now let's see how we can use Postman for testing our rest TP methods so I have to install the postman so the postman can be downloaded from the postman.com so there is a postman.com from here you can download the postman so just download the postman here so there is a desktop app foreign so now whatever the a URL I'm having this is the URL I'm having I can use in my Postman for making the get request it's coming now for making the post request I can use here post method okay then I can pass the data as a Json format here unlike as a form URL encoded but make sure when you are sending the data either in Json format either is inform URL encoded so you have bedded the body parser also if there is no body parser then it will not work for us so here I for the Json I need to add here the Json setup let me did the setup to read the data as a Json format I'm just using here Express and then Json so this is the Json parsing I'm adding here if I will not add this Json parsing then it will not pass the data from the request body if you are sending it in Json format so this is for Json parsing I did the setup it's working fine now through the postman I can make the request for adding the new document so make sure you're passing the thing as per this user model like name contact and address so let me pass here as a Json data so I'm using here raw and then use here Json and here I'm passing the name as if name and passy let's say Mohan and now let me pass here second data I'd say let's say contact so contact let's say it is here contact I'm passing in it is also string type then pass address let's say I'm using another so this is my Json document I am passing from here and make sure you are making the post request and the URL is here exactly same now click on the send button so you can see here I'm getting here internal server error so something is not correct in this configuration that's why I'm getting the internal server error here so here if you will look at why I am getting the error if you look at it's not showing any error in the console so there are is here there is a typing error it should be here status let me save it because in the database if you will look at the Mohan user has been added this is a mean stack database there is a user's collection and there is a mohan so data has been added correctly but at the time of returning it's through the error because the spelling was mistake here so let me try again with the new user to check it how it's over there it's adding the news or not so let me add here this time Rama I'm just heading here let's say contact number I just change L little bit it's let's say Delhi now let me make the post request again this time it's added for Rama it said 201 as a status quote perfectly if you look at now in the mongodb let me click on the find button refreshed so you can see I'm getting here Ram also here perfectly so both the users are the part of this user's collection so in this case my API is responding correctly it's able to return the list of user also if you want to check on the list of user just user get then make the get request and you can see I'm getting here both the users now let's say here you are willing to return the newly created document properly so here when you will call the create method here it will return the newly created document here so here in place of returning the obituar so that you get to know what the new document has been created and what the new ID is there so let me create here a one more document again and this time just change the document name let's say I'm adding here shallender and a contact number mentioning a like this way and now let's say it is here I know it I'm mentioning enough so it's it should be here the post request so make sure it is post request so body and then Json let me change the document here and now click on the send button this time if you will see here it is attending the newly created document with ID also perfectly last time it was no returning so this is a status code here 201 now this is the newly created document so now it is working perfectly you can verify in the database also find and Let me refresh so you can see newly created the user is here so this way the API a retrieve operation are working fine here even the post operation is also working fine here the similar way I can write the code here to fetch the user based upon the user ID so what I can do here let me chain one more method for fetching the user ID for fetching the user based upon the user ID so let me pass your ID as a root parameter and let me Define let's say let ID equal to it would be a request dot params then ID then in the find I can mention here the filter condition or either I can use here find by ID so there is a method here find by ID so this method I can also use then I can pass the ID here and what are the document I will get here it will return to us so I'm returning here the document your nothing is available like something is not correct it will return the internal server error here this way so now let me check the user head based upon the user ID so here we have this user which we created right now let me try to fetch it here based upon the user ID here then send it's available now so perfectly it is attending a single user and here I just passed the ID so this way these three methods are working fine so this method is here for returning all the users this method is here for returning a user based upon the user ID and this method is here for creating a new user so here retrieve and delete methods are working fine here update and delete operations now let's see how we can write the code for performing update and delete operation so let's add two more methods so first write the code for update operation so in case of update we can use the put method so here what I'm doing here I'm just going to use the put method this time so just do the method chaining again I'm using here put method and put method usually we pass the data in the request body as well as the document which we are willing to update we pass and the URL also so these are root parameter I'm passing here and from the body I will get the things here so which document you are willing to update I will get in the root parameter so let's say request dot patterns it would be here ID now let me write the code to update the things here it would be here find my ID and update so this is the method I'm just mentioning here then pass the ID which we are going to find then mention the field which you're willing to update so let's say here I'm willing to update the name fields that would be here obj dot name I'm willing to update that it's an email so it would be your obj Dot email so what are the model you are having let's say name address and contact okay let's say name contact and address so all the fields which we are receiving from there I'm willing to update the Third Field is here at this I'm mentioning now so this way I mentioned here I'm willing to update name contact number and address and finally when it will be done here update so here we will receive the okay so we'll return here okay as a status quo like it has been updated successfully so let me test the update operation whether it's working fine or not so open the postman again and if you look at here this is my user shailendra so this user I'm willing to update here so to update it let's make the put request and here is a Json document we need to pass the things so let me pass here the things so this is the ID I will pass in the URL put and here I'm not willing to pass the ID in the body it's up to you if you can pass you can pass it here then you can skip it let me pass my name as shailendra Chohan let's say the no that is so this way I'm just using a put request these values are just changed now make the put request here just click on the send button if everything is fine it should return so you can see it is here 200 as a status quote and now let me check in the database whether it's updated or not I refresh it s updated now with Shelly and Chohan and that this is here get annoyed so perfectly it is working fine it's written as the updated document perfectly here I'm not able to get the updated value of the document because I am not following the proper signature of the find by ID and update if you're willing to follow the proper signature of Fine By ID and update so just do one thing just Define here like this way let's say it would be here error and then dock like this way here we will get the things so here I can check let's say if error then return the error status code else show like document has been updated so here I can mention here internal server error then mention the error this way so this is the proper signature for the find by ID and update let's see how it's showing the updated document so this time let's I'm changing here the name shallender Kumar and at this let's say I'm making a Noida the same request I'm using I'm just updated the value clicking on the send button and now can see it is showing us the last value which was before so before the updation this was the value here if you will look at now and the database it is updated but the last will it is showing to me that's Kumar here but here it's showing the last value like the what the document view updated so this was the last value and this is the new value here so this is old value this is the new value here so update is working fine now let me write the code for delete also so as we have written the code forget similarly I can write the code for delete also I need to just change the verb from get to delete so let me use here delete verb and there is a method you'll find by ID and delete so this one I'm using here find by ID and delete if everything is fine we can return here and here if I know returning any status code so by default status code would be here 200. so you don't need to pass here the status code explicitly by default it would be 200. if you're willing to pass here the status code explicitly you can pass like this way it is the explicit the status quote I am passing but it is not required because by default it is 200. so now let me check it here how the delete is working so the same record let's say I'm willing to delete by making the delete request so just use a delete request another thing we are passing in the body so body is nothing here so it say delete user ID and click on the send if everything is fine it should return here the user has been deleted it's 200 is okay but this is the user is deleted for us let me verify in the database refresh it it has been deleted now so we don't have any user with the name shallender now it has been deleted completely so in this case my rest APA is working fine for the crude operation we successfully tested it using the postman so now this rest API is ready to consume in the front end so front end here you can build using angular you can build here front end using the would be same it doesn't mean whether you are using angular and react any front end you can use here setting a front end using angular now let's see how we can set up our front-end project with Alpha Bangalore and there we will consume this rest API so here what I'm doing here I'm just going to close all the open files here and let me kill the terminal also and now let's create a new terminal here from scratch and make sure you have installed the angular CLI so if you have not installed the angular CL I can install it here and pmi-g and there is a command here angular uh Slash CLI so it will download the latest version of angular from the npm js.com install it here so if you look at here is downloaded angular CLI for me and the latest version of angular CLI is here 8.3.25 so it using a regular 8.x so now in the same project what I'm going to do here I'm just going to create a angular project using the angular CLI so let me create here angular's project using the angular CLI so I'm G new then Define here project name so here the project name is exit client so here we will have two folder server for backend code and client for front-end code same thing I'm doing here so I'm creating here a folder named client for the front end so let me enter it here it will ask for the routing let's configure the routing also I'm using a CSS perfect let's created the client folder now and in the client folder it is downloading all the necessary packages so that the angular application we can start here so now there are two folders here one for the front end and one for the back end so let's wait so it installed my angular all the dependency now let's go into the client folder CT client and from the client folder I will start my angular application by using NG serve command Dash o it will open me the default browser let me verify angular application is running fine I stopped all the server side code first let's test the front end later on we will Club the front end back end together so you can see here this is my default template now in the angular so it's working fine the default template for angular it's running fine so it's a default markup just showing to me perfect now let me do here the necessary changes so that I can consume the API here so let me install here the bootstrap first of all so that we can design the UI so let me add a new terminal again and make sure you are the part of the client folder remember it whenever you are using the any node package in the client let's in the front end make sure the part of the client folder so let me install here bootstrap latest version and then save it Json file I need to mention the path for the style sheet so let me mention here the path for the style sheet it would be here node underscore modules then the package name it is your board step then distribution then CSS then finally so this way we configure the bootstrap globally so bootstrap we added here globally now you can use the bootstrap component to design the UI now next step is here let me remove the unnecessary generated code here if you will look at in the SRC we are having Here app component.html which is containing here the default markup like the default design which is actually not required by us so let me remove it completely I have removed completely now let's set up it using the board strap so I'm using here class container for the bootstrap unwrap it in the mode step and if you're willing to learn about the angular in detail and Border step in detail so do refer the dotnetics angular courses and the dotnetics bootstrap courses I'm not willing to tell you about the routing and all the things in detail I'm just going to set up it quickly now let me Define here the board itself for menu so for bootstrap phone menu I have installed here a bootstrap a sneak pack using which I can generate the bootstrap menu easily so I'm just using here navbar minimal URL foreign so let me mention here the linking so I'm just mentioning here the link so first one here let's say for user list and then do mention here router link so I'm just using here router link it would be here so now Define here the link so as your home page I will use it here now and here we can Define the brand setting also so let me Define here anchor tag for the brand setting so I'm just using a glass then it would be here nav bar that's brand the bundles number this brand this is the CSS class available in board stuff for for the brand here similar with the route link I can Define here and here I'm we are creating here a mean stack project so it says mail stack app so this is the brand name I have specified the similar way I can Define here the link for create also right now I am not specified any routing but I will Define the routing for create also this way now let's see how the UI is looking here so reload the things so you can see here it node showing the proper UI here but it's showing the link the reason is here I have not restarted my angular application so whenever you will do the change in the angular load Json file so this is my angular.json file every time you need to restart the angular server same thing I need to do here let me stop it using Ctrl C and start it again NG sir so now let's reload the browser and you can see it's it's having the proper menu now user list and the grid so right now I have noticed specified the routing I will Define the routing then I will do it so this way we have successfully configured my angular application within the same project configure routing now let's configure the routing in angular project so here our application already running so let me open the new terminal and there I will create the others component also so right now I'm having only app component so here let's remove the unnecessary file which we are not using so test file I have removed I have just removed the CSS file also so now everything is looking fine so make sure from the app component you have removed with the reference of CSS file also and you have removed the reference of title also Now using the angular CLI I can add the others component also so let me create here a component mg I'm using a generate command to generate a component Now define the component name let's sampling to create a component with the name create and here I'm not willing to define the separate style sheet so I'm using here is done skip test so it will create a component with the name create so now we are having a component with the name credit and here I have to skip the style sheet and here I have skipped the test cases similarly I can Define here a component for users also for listing purpose so I'm creating here users for listing purpose so we have done here properly so now let me Define the routing for these two components so open here app routing module which is already connected here and here I will Define the routing so let me Define here routing for the user listing so here I will Define the path so path would be here empty and then Define here component so component I need to import it would be here users component similarly let's Define another path also sets path it would be here great and Define here create component like this way so we have specified the path for users we have specified the path for create also similarly I can specify the path for add it also so I'm just using here edit then user colon ID and then Define the component name here grid so I'm not willing to create a separate component I'm willing to use the same component create for create operation as well as edit operation also so that's fine we have to specify the routing now if you will open the browser so you can see I'm getting here user works as output if you will go for create I'm getting a great works so routing is perfectly working here now what we set up creating service now let's see how we can create the service in angular so that we can consume our rest API so angular Whenever there is a requirement to perform the server side operation so that code we always write in the services here so let's create a service so what I'm doing here in the angular I can create the service so just do one thing uh just add here a folder with the name services or you can create the folder using the angular CLI Also let's say I'm just creating here is service using the angular CLI command so Angie S4 service then Define the service name so I'm willing to create a service here within the folder services and my service name is let's say e-user so this is my service name and this is the location I'm willing to create and then skip test I'm not willing to create the test cases I'm using a skip test so you can see it's created here Services folder and then it's created the user service now let me write the code in user service to to call the rest API so there is your service is created here properly and now to call the rest API ability to import here the HTTP line from angular common HTTP module so let me import here using at the rate angular slash common Celeste http now here I will import the specific line as the typical line I am importing here so static line will help us to perform the crude operation here we can see it will help us to call the rustically and here let me use a single code it is only just linting error at spine again let me Define the methods so I'm defining a method get users for getting all the users from the database and here we will use the observable so for observable refer to the angular courses they will find out the information about the observable so here before creating the observable to store the data first of all we include create a model class here so let's do one thing here in the app folder let's add here a one more folder with the name models in the models I will add a file with the name user dot TS and what are the properties we are having in the user model index press similar way this model will have the properties here so let me Define here a class in the typescript so it is here export class so export class reuser Now define the field here I'm defining the filter let's say string IIT name would be here let's say string and then address would be here a string and then contact would be your string so this way we have defined the field here so first one is a semicolon so perfectly we have defined the class so this model now we will Import in this user service for returning the data so in the observable I need to Define here a array for the user which we are returning as a response so here let me use here return and then use this acidific line so this is static line instance we have not created so let me create the instance of this sdtp client here so what I can do here I can use here the dependency injections let me use a private aligned and it would be here as TTP client here using the DI I'm just going to use it here so it would be here this Dot written this Dot it would be here client so this dot client then we will get the method here get post updated delete so the methods will be available here so here actually I have not specified the method signature properly that's why it's not working fine now it's looking fine okay and then you can see I'm getting here get method in the get method we need to pass the URL to call the API so what we can do here in angular to define the environment specific setting as we specified in our express application there is a environment folder in the environment folder I can specify the environment specific setting for production environment and for the Dilemma environment so just do one thing here let's define here the API address so here my API is running my API is running at the port number 3000 so let me mention here aesthetic p and then localhost and it is here let's say 3000 we have mentioned now similarly you will have the API in the production machine also so that would be the different address but right now I'm defining the same so this one I will import so this can be imported here using the environment so this is the environment file I can import to access the API Base address so let me use here environment file which I imported at the top level and even you can import it let's say likes as pnb so I'm just using a short name environment it would be here API address then whatever the AP you are willing to call I'm willing to call here APA name as user because at the same with this we can have more than one API but here I'm calling the aps user and what are the response we will get let's convert into the user array this time so this is the way we are consuming here users by calling the get user method in the similar way we can write the code for other methods also so let me write the code here for fetching the user based upon the user ID here so I will do here ID let's say string type and this time let me concrete the ID also this way and it is here we get user and this time we are returning here only single user like this way now let's see how we can use this service in our component to show the list of user so in service we created two methods others method I will create later on first let's use these two methods for showing the result a listing users now let's see how we can show the list of user using the angular so what I'm doing here are in the user list component so there is a user's component node the user list component sorry so in the user's component I will import my user service so let me import here a user service I'm using here again dependency injection so user service the news here a user some service I import it now now here at the page load method I can retrieve the list of user from the database so let me Define here a user's array so it would be here the user array like this way now let me use let's say this dot user service call the get users method then do subscribe then I'm using SS phones and in the response let me assign the value to the user so this dot uses equal to response so this way we are calling the get users method in the user service and if we return the list of users so now this user's array we need to show on the user's HTML page for showing the list of user to us so let me Define here heading it would be here a user list now let me Define horizontal line and now use here a table so I'm just using here a bootstrap table so I can use here a board step table default let's create a table for me automatically using the Snips and now let's define here let's say serial number I'm defining I'm defining let's say name and then contact then address so these are the fields we are having now here and now let me specify the cell so here the TR I can repeat here using the for Loop in the angular so let me use here ng4 so until 4 I'm using here for users and for having the index I'm using a let equal to index so index is a predefined in the ng4 which will return as the index number 0 1 2 3 like this way so index number will start from 0 so I will add here A 1 so that it will start from 1 now let me mention here all the fills which we are going to show here so it is a let's say item Dot so let me mention here item dot name item Dot contact an item Dot address like this way so this way it will show us the list of user so what the data I'm getting here I'm repeating using the TR and showing over here perfectly so let's see how it is working here so make sure your API as well as your front and both Satani so front end is running here but API is not running if you will look at now I'm not getting anything because my AP is now running so let's open your one more terminal and here start the API using node mon now it is running now let me reload the things and go to the users list and let's have a look in the console okay if you look at here this showing me the error it is showing there because the service I have not injected globally so what the user service you are using to use it across the application make sure in the provider you have added it here so use a list so we added the user service but we have noted the HTTP client also so I have not fixed these errors so that you will also learn how to fix the things so here now it is showing the error first typical line so now open the app module there at the top level let me mention the import statement and use here at the rate angular shell as common as http this is very important and let me use here single code now here I can use here http client module that one I need to import now this HTTP client module I will import here so that I can use the HTTP client in my application if you look at now it not showing any error it's perfectly working fine but only one thing I am getting here uh this is the different error Zone label error okay so let me see what we are requesting here so we are requesting user service and get users and here AP and this we have mentioned properly so let me check in the environment label it's HTTP localhost 3000 then it should be APA also so I forget to mention API so do mention API here and API here perfectly now let me check it now so make sure the code has been rebuilt again so to verify open the angular so let's rebuilt again so now you can see it is showing this HTTP API user so I know we will face this error because my angular application is running on the port number 4200 and my AP is running at the port number 3000. so always you will get this error you will get the access control allow origin error because both are running on the different port number so what you need to do here you need to enable the course at the API site at the rest API site so let me enable the course there so that I can consume my rest API in the front end so to enable the course here through the command let me install one more package npm install course and no mentions save also I forget to mention the same okay now me let's import the course also here at the top level so I'm importing let's say course equal to it would be here require now let me import the course now of course I need to configure It app label I have dot EOS and course like this way now I configure the codes at the API level now let's check whether the server is working fine or not now let's try to make the request again and you can see I'm getting the data I'm getting the user now Mohan I'm getting the user now rava so this is running for the port number 4200 and my rest AP is running at the port number 3000 so that's why I need to enable the course over there to access my API is working fine it's also working fine so this is the way we completed here the retrieve operation successfully with the alpha angular the similar way I will write the code for grade update and delete operation also creating user now let's write the code for adding any user in the database so we already created a user service here where we have written the code for fetching the user list and for fetching a single user based upon the user ID similarly we will write the code for adding a new user so let me write the code here for adding a user here so add user where I will receive the user model so I'm just going to receive here the user model so make sure we are having here user model if you will look at we already Define here a user model so this user model will be accept here and we will pass now as a return type it would be here again observable in the observable we will return the HTTP response so it would be here HTTP response and Industrial response that I would be here any like this one now here we need to return something from here so because return type is here observable as TDP response any so using the CDP client we can make the post request here so let's use this node client then call here the method post then the user environment variable so environment then it would be a repeat address plus the API which we are willing to call so we are going to call here user API and here we are willing to pass the data so data we need to pass here as a Json stream so it is a JavaScript object so we need to convert it to the Json testing so that is here here Json and in the Json we can call the string method stringify method to convert the JavaScript object into the Json SD so this way I did it here now finally we need to return here the response so here response we need to observe the response here so observe what we are willing to observe we are willing to observe here response so don't mention here of the response and we need to pass here header also because here we are passing the data as a Json format so we need to tell the headers of the request so here I'm just going to pass the address of the request so this Dot header so far I have not specified any header I will Define the header then that headers I will pass so make sure you have defined the headers at the Constructor label so let's define here headers colon it would be your address so let me specify the headers in the Constructor label so this dot headers now in the header just tell about what the content I we are willing to pass here so we will we are willing to pass here content as Json so I'm just going to Define here HTTP address I'm just going to mention here content type content type and content I would be here application so let's Json so this is the content type we have mentioned and make sure we have defined that class for headers also so the proper class name is here HTTP headers note headers so these are 3p headers we already added and same we have mentioned here now so same as tdb headers and we are passing from here when we are making the request for adding the new user here and here I study by response we have not specified here so at the top level let me Define a state of P response also some of you will look at I'm not getting any error it's only recommendation like we should use single code in place of double quotes then mention a semicolon that's it so now we have written the code for adding a new user through the API and at the API label we already written the code for adding in user if you will look at in the server here we are having the user controller where we already written the code for adding a new user and here we already done the code for edit and delete also so in the backend we don't need to do any change we need to do the change only in the front and side that's perfect so now this user service we will access in our create component for adding a new component so here at the Constructor label let me inject it so private a user service colon user service so now here we need to create a HTML form so that we can create a new user so here we can use either angular template is one form either we can use angular model run form so here I'm just going to use the angular template driven form that is a simple to use so let me Define here the instance of the user model class so I I added here the reference of user class here if you will look at its user let me initialize it it would be here this dot a user equal to a new user this one so I added it here now let me Define the design for the form here so we already added the bootstrap so using the board we can create the HTML form so let me specify here heading let's say create a user would be the heading here then horizontal line and here let me Define here the HTML form we can Define the HTML form so use here form tag and defined here on the class here so let me Define here first of all the div so that we can Define the things over here so let me Define here div it would be here class I would be here formed as a bootstrap CSS class to group the label and to group the text box so let me Define here the label for label I'm using here name and let me Define here text box so text box we are defining your phone name so it would be here input type text and then Define the text box name so it would be here name for the text box and here I'm going to use here two by data binding so for two by data winding we use here NG model so let me Define here NG model for October data mining in a new model let's define here the user instance property for which we are willing to create the text box so we are willing to create the text box for name property so I am engineer name then whatever the validation you are willing to mention here let's mention here required and here let's define a bootstrap class and it is here form this control so these are Buddhist web class I have specified here and for using the template driven form make sure you have added a module reference in app module so we will look at here we don't have any reference for the forms module so that's it is giving the error so let me add the reference of forms module here so I'm adding here forms and here it would be here forms module I added here this forms model we need to import in this import section and guys if you are willing to know about the angular forms so we already having your codes on dotnetics about the angular forms so please do refer that course how we can create the angular various forms for performing the validation here I'm not covering the form of things I'm just quickly writing the code so that we can complete this crude operation now here I can use the div for showing the array message so here I can use the if statement so and see if I'm using then write the condition here so to get the information about the error we need to define the reference name so let me Define the reference name using the hash and Define here NG model and the model so this reference name I'm using to find out the state of this input control so let me use here name Dot address if there is any error and then here I can Define the class for showing the error in red color so there is a class A text Danger to show all the error messages in the red color and here I can specify my error message please enter name like this way and here I am willing to show the error messages on button click so that would be the form submission so I'm just using here form so make sure you have defined the reference name for the form also so it would be here form then we use here NG form directory Now using this reference name I'm willing to find out whether the form is submitted or not this way and finally let's add a submit button so what I'm doing here I'm adding here in div there I'm refining the summit button input type I would be here submit and then Define the value so value would be here let's say save and we can Define here the bootstrap classes so it would be here BTN this primary this is a button class to make the button as blue color and if you're willing to learn about the Border stack so just refer the bootstrap courses you will get to know what are the barriers classes are available for decorating the buttons so now if you will see here everything is building successfully there is no error so let me go to the create page so you can see it is showing me a single text box with the label here and what you can do here for the designing purple you can make it small so I can wrap this one in Native like this way and I can Define the class let's say column desk as some desk let's see 5 I'm using so it would be the short now in the design you can see it's now showed in the design and the rest of the seven you can use for the right sidebar unlike for something else you can use it so if you look at here if I'm clicking here it's showing the error message please enter name similarly we will write the code for others properties also so that code I'm not going to write it again brickets would be the a wasting of the time because already we are having the similar course on the dotnetics which you can refer to learn about the angular forms so you can go to the dotnetics.com and here just refer to the front and angular here we already having a course angular forms and validation so just refer to this course and you will get to know how to use the forms and validation in angular so let me mention here the code for others properties also so I just copied and paste here directly so that we can quickly made the things so you can see we are having now name address and contact number are these things if you look at we are having in the user model now if you will look at we are having user model containing name address and contact number and now here we need to do one thing here uh make sure you are mentioning the glasses danger in place of color that I'm just replacing it so when we will submit the form so we need to receive the value on the controller and the component class so for receiving the value we need to handle the form submit event using a method save data and save data I will receive the value of the submitted form so let me Define the same data method and this great component and here the posted form so this is my posted form I'm posting here oh it's not only it should be on the form level here so this form I'm posting here so I will receive the same form here form and it would be here Ng form like this way now let's check the form validity here if form Dot wallet means all the validation has been passed now write the code for saving the data into database so now using the user service we can write the code for adding the user into database so user service then call the method ID user then pass here this dot user model instance then do subscribe for the changes and as a response I will get the response from the server so what response will get from the API if you will look at in the API so this is my API so it will return the status code AS 201 or it will return the created document also so this status code I will find out whether the user has been created or not so same condition I'm writing here like if the response note status equal to 201 admits that the user has been created so finally we need to redirect to the user listing page so for the direction we need to import here the router class so let me import here router colon it would be here router so let me use here this dot router this is the one I'm using here so make sure you are making it access modifier also if I'm willing to make the class member so this is the router and then navigate then navigate here to the usual listing page so that is here for for Slash so this is the one the code we have written for creating the user and after creating the user we will redirect to the user listing page let's see how it is working here so this is my user listing page and I'm already having user Mohan let me enter the user I'm adding here a user from but this would be here Noida then let me mention a contact number this way click on the save button and you can see it's added here successfully so this way we have completed our create operation successfully with Alpha bangle and the express JS rest API editing user so far we have written the code for adding any user now let's see how we can write the code for editing an existing user so what I'm doing here in the user listing page let me Define the link to navigate to the user edit page so here I'm already having my users component and get the user's component we will write the code sorry user components let's define here a one more column for the actions some refining here actions and here let's define here the TD containing the link for edit so I'm defining your anchor tag and it would be here on the router link and in the router link I will Define the router link for edit so let me Define here edit and then pass here primary key of the record so in our case it is here item dot underscore ID so in the model of the user model we are having underscore ID as a key and then let's mention here edit and here can we find the button class also but in class would be here BTN Dash it would be here let's say success so success would be here for green color I specified here so for adjustment to Define here the route also so open the app routing module and here let's define a root for a dip so we will look at for edit root we already specified that's good because I'm not willing to create the separate component for edit I'm willing to use it as it is so this ID I will receive at the create component page load so when the component will be loaded so there we will accept this ID parameters so let me open the grid component so this is the NG on init where we will access the parameter value so here using the active root service I can accept the parameter value so let me Define here private load and it is here activated a root service through which I can accept the value import the active root at the top level so we already imported here that's fine now let me use here this activated root service so it is here this uh this Dot it is let's say root then parents then subscribe for the parameters here so it would be here let's say parents and all these params value we can access here using this receive parameters so let me access the ID here so it would be here params without ID whatever the parameter name we are having so in our case parameter name is ID here so with the same I am accessing here now bypassing the ID I can access the user information but before that make sure ID is not undefined if we have not passed the ID it would be undefined so that I am checking here it should not be undefined now use here this node user service then call the method get user and pass the ID then do subscribe so to the response and what response via the CP let's assign it to the user class instance so the user class system we have assigned the response here successfully like this way so this is the way we specified the things here correctly so when you build now click on the edit link so it will be related to the create page and will populate the value let's see how it is working here it's edit link click over here and you can see it is showing me the value this is the ID it is showing at the URL but we need to change the label also so label should be here add it user note the create user so for label also we need to do the changes here so let me write there few condition embraced upon that we will change the label name so we are using here H2 for create let me add here one more H2 for edit now we have defined the condition so I'm just using here hidden and he's an internet would be here a user dot underscore ID if it is undefined so it would be undefined when we are creating the new user so in that case we need to show this label we need to show this heading so just mention here not equal to because hidden will hide it if it is true but we need to show it so that's why I'm using here not equal to the similar way we need to check here if ID not equal to undefined that should be not equal to undefined it should be here added user now let's see now it is changing the label as added user now but enable click for create it is create user so it's perfectly changing the label now we need to handle the save button click so for the save button click if you will look at we already having the same data method so in the safe data method we need to find out whether user is in edit mode whether the user for creating an user so the user would be in edit mode so there would be the underscore ID so primary key would be the part of this user instance so that I can check here if this Dot user dot underscore ID not equal to undefined it means it is added else it is great so this way I just mention the condition error so now here we need to define a one more method for update user so update user method we have no written so far we will write in the user service but let's complete the code here so when it will be done successfully it will return the status code AS success okay so that's why I'm comparing here 200. now let's write the code for update user in user service so as we have written the code for add user similar way I am writing the code for update user also added update user we need to make the put request because if you will look at in our Express API we are expecting the put request we can see so this is the port request where we are updating the things find by ID and update request you need to pass one parameter in the URL and the best thing would be here in the request body so same thing I'm doing here I'm making the put request here and pass here one parameter in the URL so to be a user underscore ID this parameter I'm passing here other thing would be same so this is the way we completed the code for update user here perfectly without any issue so let me check how it is working the update so let me update it here Ram Kumar then click on the save so you can see this has been updated successfully without an issue if you're willing to create a new user can create a new user Excel let's say I'm adding an user shall enter let's say in Delhi and contact number save it let's add it so perfectly working the create operation perfectly working the edit operation here operating user now let's see how we can write the code to delete a user so we already did the code for add an update so now let's write the code first of all for delete a user in the user service so as we have written the code for Getty user a similar way I can write the code here for delete user also so it is here let's say delete user and this time it will not return any user it will return here the HTTP response any so I'm just using here HTTP response ID like this way and finally make the delete request this way I'm going to pass here a parameter also so parameter we are passing here perfectly and there should not be any user it should be here aesthetic response any so it would be here restricted p response any in this way and here just like to the ad here also we need to listen for the response so just do mention here this so it would be let's say observe then do mention here for response that's why I mentioned it here and here is a best practice in add user also you should mention the HTTP response here also let me mention here HTTP response any head should be like this way so there is no Reds the error of breaking the things into new line perfectly it's working fine so I updated the HTTP response and here also understand response any here also so now this delete user I will call for deleting the user so let's go to the user listing page so now the user listing page we will Define a anchor tag there we will Define The Click event so let me Define the anchor tag and it would be here let's say href and it would be here in JavaScript and then it is here void zero so I'm using here JavaScript zero so that I can disable the anchor tag default Behavior so I'm just using here click so using the click we will capture the click given so it should be wrapped in the parenthesis so it is here parenthesis like this way now Define here a method delete the user then pass the primary key based upon that need to delete it so I'm using a right term dot underscore ID and then Define the name of the button of the link displayed and to show this anchor tag as a button let me mention a class so it would be a class BTN Dash Danger and to maintain the gap between these two button let me mention here and bsp between these two buttons now this reducer I will Define in my user's component class open here users class there I will write the code like this one so I'm defined here ID as a receiving parameter and based upon the ID you will delete the code so here what I will do here I will write the code like if just Define a confirm box to confirm the action like ru sure to delete this way this way I'm just confirming the action so one user will click on the OK button at that time we will call the user service delete method user service read user can pass in the ID then do subscribe for the changes and whatever the response you will get based upon that we will respond so when we will delete the user so it will return the status code again as 200. so that I can check it here let's save response dot status equal to 200 academics the operation has been successful same we can verify your Express AP also an Express APA and user control you will find out we what we are doing we are just doing a response sent box so by default status here is 200 if it is successful but if you want to mention it explicitly so you can mention it here explicitly also like this way so it would be here okay so this way I just changed the status code AS 200 explicitly by default is 200. and we are sending the docs which we are actually deleting it so it is here now which we are deleting it same thing I'm checking so here you are having two option either again make the request for fetching the all users to display other things and the second option is here we already having the user's array in the memory of the page so from the memory of the page if user is deleted successfully from the database by using a for loop I can delete the things so same thing I'm doing here I'm just using here a four Loop Fair and from the in-memory users list I'm just going to delete it here so this length now let me check here if ID which we requested to delete it's matching with this node users index number then underscore ID if both are matching then using the splice method I can delete that particular record same thing I'm doing here using the supplies I can delete the particularly code so in this place it accept the index number from where you are willing to delete it the number of record so I'm willing to read here only one record after deleting that one record this came out from the follow so that it will not delete any of the record here so this is the way how it is working let me check it open the things no can see perfectly I'm getting a two buttons at it and delete let me click on the delete button so you can see I'm cutting here are you sure to delete okay it's now deleted delete cancel refresh it s not deleting the user so this is the way the delete operation is working fine with the help of angular and expressed Chase starting a project on local machine so when you will download the source code of this sample so let me show you here how you can set up it on the local machine so after downloading you will get here a folder containing the client and the server folder here so here I have removed the node underscore modules because it is would be in bigger size so I have removed the node underscore module folder from the root label as well as within the client folder so what you need to do here you need to just open these folder in the vs code and at the root label need to run the command npm install for installing all the node packages here so you can see I'm already in this location and then run the command here npm install it will download all the necessary packages to set up my express.js application similarly I need to go into the client folder here CD aligned and the client folder also need to run the command and PM installed it will download all the angular dependencies and we'll set up it and every time enable start this one like server so make sure you are at the root level and you have installed the node mode also on your machine if you have not installed you can install the node mode using the command npm I Dash G not one then this command it will download the node monaster packet so that you can run the express application in the watch mode so what are the changes we will do it automatically restart the node.js server to digest those changes so this is the way it installed in the node monaster after that you can run the command node mon to start your node.j server node mod or it's here app so you can see it's starting my server here using the node monaster it's perfectly running the port number 3000 if the port number 3000 is not available and make sure you have installed the mongodb also so here I'm accessing the mongodb using the mongodb compass so make sure you have installed the mongodb come pass also on the machine so when you will open the mongodb compass so by default it will run on the default port number over there so that even the default port number for the mongodb is here 27017 by default so when you will run it you will get this screen so directly you can click on the connect button it will connect it and you can see it is showing the default port number also and it automatically generate the database for us you don't need to create it manually when you will run the express application so test the express application with delpho Postman and when you are sure everything is working fine just go into that line folder and here on the angular command NG sir to run the angular application so at the time of making this video the angular 9 has been released but in my local it is angular 8 but there is no so much difference in angular 8 and angular 9 in terms of features angular 9 only having the differences in terms of only rendering view engine so from angular 9 they are using the IV but the syntax y in the coding y there is no differences so either you can use angular 9 the code of writing nothing should be same so what are the code we have written it is perfectly valid for angular 6 angular 7 angular 8 angular 9 even it will work in angular 10 also I'm sure so this is the way I set up the project after downloading it similarly we need to set up it on the local machine when you will try December

Channel: ScholarHat

Views: 6,435

Keywords: mean stack, mean stack tutorial, mean stack app, mean stack tutorial for beginners, mean stack development, mean stack web application, mean stack application tutorial, learn mean stack, mean stack for beginners, mean stack application, mean stack full course, mean stack from scratch, Mean Stack Full Course 2023, mean stack project, mean stack tutorial microsoft, mean stack angular, mean stack full course 2023, mean tutorial, mean application, scholarhat

Id: grTpEJz62Pk

Length: 114min 54sec (6894 seconds)

Published: Thu Dec 08 2022