MEAN Stack CRUD Operations - MEAN Stack Beginners Tutorial

quick demo of this video tutorial this is a mean stack big nails tutorial in this tutorial we will develop a mean stack application from scratch to implement crud operations insert update and delete in order to insert a new employee you can do this now click on submit so here we have inserted a new employee inserted employees will be listed inside this table here in order to update your record you can click on this pencil icon here instead of UK I will update Linda now click on submit so here you can see the toss message updated successfully here we have updated in this table list also so these employer of course are inserted into this employees collection in MongoDB here if you want to delete a record you can click on this delete icon here it will ask for confirmation are you sure to believe this record or not click on OK so here we have deleted 0 code for P on ugly so from this tutorial you can learn how to develop an enterprise application in mean stack so please watch till the end of this video tutorial hopefully in the next videos we will discuss how to do user registration login and logout using GWT also authentication and role management also for some YouTube welcome to dotnet mob in this video I will show you how to implement cred operations in means tag application before start in this video tutorial I would like to ask you a favor if you found this video helpful please thumbs up this video if you are new here please please subscribe to this channel dotnet mob so here is my vs code editor I will be using this idea for the application development you can use any IDE as you wish basically it means that application we will have no jsapi in server side and as a server we will use NPM package Express for database we will use no SQL MongoDB and finally we will have the client side it will be implemented in angular 5 before starting this project we have to ensure that we have a working mean stack development environment first of all we need node.js itself for that you can go to this website no js' door o then you have to download the installation file as per your operating system in my case I have Windows operating system with 64-bit so we have to download either of these two files here we have the stable version here we have the bee devotion better download this terrible version 8.11 point one node.js installation is so simple you can convey the installation process by pressing a bunch of next buttons in the installation wizard after installation just open command prompt then type the command Nord space - V hit enter so here you can see the latest install version in my system I have already installed node.js 8.11 point one after nadia is we have MongoDB first of all go to this website MongoDB comm then click on download here then go to community server then select the installation file asked for your operating system in my case I have windows so I can download this MSI installer file installation of MongoDB is also simple you just need to go through a few next buttons after installation we need to start my body before that we need to know the installation directory where we have installed MongoDB in my case I have Windows operating system so it would be the in programs files so here is my seed drive inside that we have programs file and here we have the MongoDB folder so 3.6 bin folder here we can see the file mom Gordy dot exe in order to start the server we have to run this application from our command prompt so let's look how we can do that in order to start the MongoDB we have to navigate inside this folder for that in command prompt you have to run this CD command after running this command will be inside this for the directory here bin folder from the we have to run this d dot exe file using this command in order to run this file we have to pass this command-line argument DB part here we have a folder path to a folder - dot data we can name before now and you can keep the folder anywhere you wish basically inside this folder MongoDB will store the files video to the database that we have created ok in my case it is here - dot data so whenever we want to work with more what do we have to start the server using these two commands here in order to make the process more simple I have saved these two commands in a notepad then go to file then save as then name the file here finally you have to add the extension dot ba t then click on save in my case I have already saved this file in my desktop you just need to double click on this file so that it will start the MongoDB so here we have started the MongoDB with this batch file so here we have installed and started MongoDB server now we need a management tool in order to work with MongoDB in latest versions of MongoDB it comes with a default management tool here this MongoDB compass or you can use this software Robo ok so in my case I'll be using this one default management tool MongoDB compass community double-click on it in order to connect with MongoDB we have a connection wizard here it is already filled with default configurations since we have no change from default configuration we just need to click on this connect button here as a first step towards the application development let's create a database for that you can click on this create database button here then you have to name the database I will name this database as square DB to create a database in MongoDB combis management tool we need to have at least one collection so I will name the collection as employees ok if you are not familiar with Noyce ql database collection means tables in SQL database table rows in SQL database is treated as a record in Noyce ql database column in SQL database is treated as a field in no SQL DB so here we have the collection employees inside that we will have a number of course related to each employee now let's create the database click on create database so here we have the newly created DB for now we don't have any record inside this employees collection now back to require software's for means tag app development here we have the angular CLI for angularfire development we need to install angular CLI in order to install the package you can use this command npm install - g then angular CLI so that's it here we have a means tag app development environment now back to vs code editor first of all we will create a server-side app with node.js after that we will implement the client-side using and qualify so I am going to create a mean stack application from scratch inside this project folder so first of all we have to open this folder in my vs code editor so let me copy this folder path from here then back to the vs code then go to file open folder then paste the directory here hit enter then click on select folder now let me create a new folder for node.js application I will name this folder as node.js then go to this folder node.js we have to open command prompt inside this folder directory for that you can use the shortcut hold shift then right-click on mouse then click on this open command window here in order to create a node.js application first therefore we have to have a packaged or JSON file in order to create the packaged or JSON file you can use this command npm init hit enter then it will ask configuration details about the project package name will be no js' hit enter then version description entry point test command leave it as it is hit enter so here we have created a packaged or json file it is filled with these default configuration is this okay type yes here then hit enter so you can see the newly created packaged or JSON file here in order to work with this nodejs application we need some NPM packages we need NPM package Express to act as a server then we need Mongoose it will act as a MongoDB or arum finally we have body Passa it allows us to send JSON data - no jsapi so let's install these packages npm install first of all we have Express Mongoose after that we have body - possum now we need to save these dependencies inside package dot JSON file for that you can do this - - see hit enter so here we have successfully installed these three packages Mongoose Express body posture now let's start coding inside this application we have already created a MongoDB crud DB here now we are going to connect the database from this node.js project for that I'm going to create a new file here I will name this file as BB dot J's in order to connect MongoDB we will use NPM package Mongoose that we have already installed so first of all we need a request statement for Mongoose so here it is here we have a constant Mongoose it requires Mongoose package after that we can make the connection using the object mongoose by calling this function connect as a parameter for this function we can pass the MongoDB connection details here we have more DB protocol than localhost we have installed this package inside this default port number two seven zero one seven after that we have the database name cred DB after the mobo DB connection we can call a callback function like this it has a single parameter ARR it stores possible errors while connecting the database if there is no error we will print this message into console window more DB connection succeeded if there is any error we will print this message error in DB connection with detailed error object we have called this Jason string if I function in order to convert this object into a string within the nation of two space character most of the case we need to establish MongoDB connection outside this DB dot J's file so we need to export this constant Mongoose for them we can do this module dot exports is equal to Mongoose now let me save this file then one command prompt here in order to run this DB dot JS file we can do this no space DB dot J s hit enter sorry here we have created this DB dot J as file outside this node JS folder now let me move this file into this no J's folder then back to command prompt let me run this command again hit enter so here you can see the message MongoDB connections succeeded now if we change something inside this node J is project we have to rerun this application inside this command form using this node command I'm going to add two more dots at the end of this DB connection succeeded message in order to see these updates you have to rerun this application for that use the shortcut ctrl C twice then run the command again so here we have the updated dots now let's check how we can avoid this execution restart after application update for that we have to install this NPM package Nordmann in order to install this package globally inside your system you can use this command NPM install - G then node more now let's look how we can use Nordmann now let me quit the current execution for there you can use this shortcut ctrl C twice then run this application using Nordmann instead of node you know more then VB dot j s hit enter so here we have started this node J as spotted using node more from now onwards we don't want to we start this execution after any updates inside this nodejs project let me remove these two doors from here then let me save this so here you can see that Nordman already we started the application for new changes now let's create the root javascript file index dot J's first of all we nee request statement for express and body posture so here it is here we have a constant for express and one for body posture also in order to make a connection with MongoDB we have to execute this DB dot GS module for the we can add one more require statement for DB Georgia is filed here it is always recommended to separate local import and package import like this so here we have a constant Momus it will store the Mongoose that we have exported inside this DV dot J's file here we have used these structurals index from es6 suppose if you have an object or with these properties P and Q in order to retrieve value of these properties into a local variable P and Q you just need to use this restructuring syntax like this so that is what we have done inside this project also inside this DB dot JS file here we have exported mom whose property in order to retrieve that we have used Momus with these structure in syntax with this import we will establish a connection with MongoDB in order to work with Express package we have to call this function Express like this so here we have called the Express function result will be saved inside this app variable here now we have to configure Express middleware in order to send Jason that''s to this node J s project for that we can do this we just need to call this AB dot use function inside that we can pass the result of this function execution body posture dot jason now in order to start the Express server we can call the function AB dog listen as a first parameter we have to pass the port number but we want to start this application after starting the server this callback function will be involved inside that we have a message for console window server started at port number 3000 now let me save this index dot JS file then open command prompt here I want to run this application using North Mount North moans face index floor Jas hit enter so here we have started the Express server at port number 3000 and we have successfully connected to MongoDB now we are going to implement crud operations insert update delete and read or view using post update delete and get web methods respectively for that for so for we have to create a model using Momus package so let me create a models folder here models inside that I will create a new file employee dorje s first of all we need a request statement for Mogis so here it is here we have a constant mongoose for mongoose package now let's create the model employee for that we can call the function mongoose dot model inside that first of all we have to pass the model named employee here after that we have to specify this schema or structure of our model so inside this application we will implement quite operations using employee details like name position office and salary and here we have specified the corresponding field types all of these fields will be string except this salary field finally we have to export this employee like this modul dot exports is equal to employee now in order to insert new employer code into MongoDB we just need to create an object of employee and call the function say from the object it will insert a new record into this employee's collection that we have already created so we have not specified in order to insert the record into this employee's collection anywhere inside this model by default mongoose will insert the new record into a collection with named employees so it will use the plural version of Moral name that we have passed here you don't have to create the collection manually in management tool like we do in SQL databases mobis will automatically create the collection as per our model without using the plural version of this model name we can pass a third parameter here suppose I want to use a collection with name EMP for this employee so we can pass EMP as a third parameter here for now we will use the employee's collection now it's time to implement actual crud operations inside update delete and retrieve for that I am going to create a new folder controllers here controllers inside that we need to create a new employee controller employee controller dot J's inside this employee controller we need to implement router from Express for that first of all we can add the require statement for Express and then here we have created a local variable for Express router by calling this out of function from X plus constant inside this employee controller we may need to work with Momus model employee that we have created here so let's add a require statement for this employee model also so here we have the require statement and inside this employee where you will store the exported employee from this file now let me add a router in order to retrieve all employees from this employee's collection for that we can create a get request here so here we have the rod for this get request when you saw make this request we will call this function with these two parameters request and response inside the function we need to retrieve all the course from this employee's collection for that employees dot find function can be called it will retrieve all the employees from this employee's collection after retrieving all those records we will call this callback function with these two parameters error and dose so first of all we will check if there is any error or not if there is no error we will pretend the documents that we have received from this employee's collection back to the response for that we have called this send function from this response object by passing these documents that we have retrieved if there is any error we will print this message in console window error in retrieving employees and here we have concatenated the stringify version of the error object that we have received inside this callback function like this gab requests we have to add few more routes inside this employee controller so we have to configure these routes inside the root file indexed or js4 that we have to export the router object that we have created here modul dot exports is equal to router now back to index dot as file here first of all we have to add a request statement for the employee controller that we have added here so here we have the request statement for the controller with this employee controller variable now in order to add router from employees controller into this application we can do this we will call the middle wave function app dot use and we have the base URL for this controller employee so basically in order to execute this get request we have to make a get request like this localhost 3000 forward slash employees in order to access routers from this employees controller we have to happen these employees to the base URL localhost 3000 now let me append list into this router then in order to make this get requests we can do this employees forward slash list so here we have appended employees to the base URL and then here we have the route that we have specified here for now we don't need this list we will keep a single 4/4 retrieving all employees from the collection now let me save all of these files here sorry inside this model we have a small modification we have to export an object like this employee is equal to employee since we have same identifier on both sides we can use the es6 shorthand method we just need to pass employee here now let me save all of these files here then you don't have to restart the program inside the node mode it will automatically restart after making any update inside this nodejs project now let me try to make this request inside the browser let me copy this and let me open one more tab here hit enter so basically with this get request you will retrieve all the employees from this employees collection unfortunately we don't have any other code inside this employees collection so that is why we have an empty error here so next to insert new employee record into the DB collection for that we can define one more route with post request like this URI for this post request will be same as that of this get request here in order to make this post request you can use the same URI like we have done in get request during this post request we will call this function with these two parameters request and response first of all we have to create an object of employee model class like this so here we have created an object of employee model class as EMP inside that we have filled because of the employee from the request body basically for this post request we will send a JSON data containing details of new employee so using that this and data we have filled details of employees using request dog body object so in order to retrieve the value of name property from the send JSON data we can do this request dog body dog name in the same way we have retrieved other properties also so here we have created an object of mongoose model employee as EMP it is filled with details of new employee now in order to insert the new record into MongoDB we can call this a function from the mongoose model object after saving the record it will call this callback function with these two parameters error and document so if there is any error it will be passed through this parameter if the operation is successful MongoDB will return an object containing details of newly inserted employee with these properties using this dog parameter along with these properties you will have an extra property underscore ID MongoDB will use this underscore ID property to uniquely identify error code from a collection it's like primary key in SQL databases but it won't be in a sequence like one two three instead instead it will be twenty-four hex character string in lengths so first of all inside this callback function we will check if there is any error or not if there is no error it will return the newly inserted dog back to the response if there is any error we will print this message into console window error in employee save with the detailed error object now let me save this file Nordman will automatically restart the program here now we have to make this post request we can't make the post request from the browser like we do for get requests for that we have to use a special software's like postman so in my system I have installed postman as an extension for Google Chrome browser inside that Here I am going to make a post request you can select post from this drop-down then here we are going to make a post request into this URL so that we can copy this URL from here itself URL will be same as that of get request so let me copy this and paste in here now open body then select grow we are going to send adjacent data here so here it is here we have an employee details of Ashton Cox position will be senior dollar per office London then we have salary now click on send here so here you can see the response from the node.js application here so here we have the details of new employee that we have passed through this request and here we have the underscore ID from my body before this new record now let's take MongoDB for this new record so here we have the employees collection just click on this refresh button here so here we have the new record for Ashton course so now we have a record inside this employees collection now let me make this previous get request it should return all the employees from the employees collection so let me reload this page here so here we have the newly inserted employee details in your browser you may not see these much internation for the response in my system I have installed days and for my so that's the reason we see these much indentation here in your browser you may see this response like this now I'm going to add one more get request into this application so that it will return a specific employee with given underscore ID if we pass this ID we can retrieve this whole employee duties for that we are going to make a get request like this for slash employees then ID that we have saved here for that back to the vs code editor now let's make a get request here so here it is router door gate and here we have the URI for this stop in order to make this get request along with this URI you have to pass the ID underscore ID for the corresponding employee record when we make this get request we will call this function with these two parameters because and response like we have done for the previous routes first of all we have to make sure that the ID pass through the URI should be a valley MongoDB ID for that first of all we have to import object ID from Mongoose as we have done here first of all we will check whether the ID is valid or not in order to retrieve the value of this ID from URI you can do this request object or param then ID so here we can check whether this ID is valid or not for that we just need to call this function is valid from this object ID if it is not a valid ID we can return status code for hundred and we will send the message nor a chord with given ID if the even ID is valid we can a typical spawning employee from the DB for that we just need to do this employee door find by ID here we have used the function find and here we have used find by ID so first parameter should be the ID that we have received through this URI here as second parameter we can pass this callback function with these two parameters error and dock if there is no error we will return the documented response if there is any error we will print the error message in console window now let me save this now let's try to make this get request so here we have the ID for this new employee let me copy this replacing this ID here then hit enter so here we have the employee details of the newly inserted employee so here we have the employee details with given ID now we have to add two more routes for update and delete now let's try update operation for that we have to use put web method so here it is router dot put function can be called and here we have the route for slash ID parameter as a second parameter we will call the function with these parameters request and response inside the function first of all we will check the ID pass through the URI east valley port not like we have done inside this get request here okay if the ID is not valid they will return the message no record with given ID if the ID is valued we can continue with update operation for that first of all we will create an object like this during update operation we will send adjacent that are containing new details of employees with that Jason we have created a normal object here it's not an object of the employee model that we have done in post request instead it is a normal object emp2 update the employee will give an ID here we can do this for that we need to call the function find by ID and update as a first parameter we have to pass the ID that we have received from this URI here then we have to do this it does the MongoDB we have to update and M with this ID with these new informations inside this object as a third parameter we can pass an object with options like this I will tell you what we meant by this property here later as a last parameter we will call the callback function like we do in other Mongoose operations so here we have the callback function with error and dog parameter inside that we will check if there is any error or not if there is no error be able to train the dog back to the response if there is any error we will print another message in console window so with this new option we test the mobile DB whether we want to return all data of employee or updated data of employee back to the response so if nu is equal to true this callback parameter dog will have the value of updated employed it is otherwise it will have the old value of the corresponding employee finally we have delete operation for that we can add a new route like this routered or delete function for this route we have the URI like this so when we make a request delete request like this we can call this function with these two parameters request and response inside the function first of all we will check whether the ID pass through this URI is valid or not otherwise we will delete the record by calling this function find by ID and remove so first parameter should be the ID for that we can do this request or param stored ID after delete operation we will call this callback function inside that we can do this if there is no error we will return the deleted employee details back to the response otherwise we'll print the error message in console window so here we have completed with no J as project inside that we have implemented all crud operations using put post delete and update now let's create angular application for that we can use angular CLI commands in command prompt since we have already opened two and windows for MongoDB and nodejs application I'm going to use integrator terminal from this IDE for that you can go to view then integrator terminal here in order to create and I will have five application you can use this command ng new then application name I will name this application as angular app hit enter so here we have successfully created a client-side application as part of that here we have a folder angular app inside that we have a brand new angular 5 application now let's run this application for that first of all we have to navigate inside this folder so we can use the CD command CD angular app hit enter in order to run and I will an application you can use this command ng serve double - open hit enter so it will compel and open your application in your default browser so this is how the fresh angular application looks like by default angular applications uses this port number four thousand and two hundred in order to design this application we will be using materialized CSS for that we have to include these references stylesheet and JavaScript file in our application along with that we need few icons for that we will use material icons so back to the application here then open unless dot HTML here so first of all we have the stat sheet for material I CSS after that we have stand sheet for material icons before the body end tag we can add script file for materialized thesis now open style start CSS inside this touch we can add global CSS rules for the application for now I will copy paste required CSS rules for this application development inside this statute so here it is now let's create required components model and service clauses inside this application for that we need 1 more terminal so you can click on this plus button here then navigate in to the angular application folder angular now in order to create angular component you can use this angular CLI command ng g 4j c for component of name this component as m louis hit enter newly created component can be seen inside this app folder here now we need to add one model and service class for that inside this app folder I am going to add one more folder I will name this folder as shared now open one terminal from this folder for that right click on this folder then open in command prompt here now let's create a model class for that you can use this command ng g for generate and we need to create a class in angular CLI there is no specific command to create a model in angular application but we can create the model class by adding few tweaks inside this class generation command here we are going to create the employee model class so I will name it as employee then we have to add this command line argument time is equal to model hit enter you will e created model class can be seen here employee dot model dot TS after that we need to create a service class also for that you can use this command ng g4j r8s for service we need to create employee service class so i will just need to type employee here hit enter now we can start with employee model class so here it is employee dot model dot t-- s inside this model class we need to add properties corresponding to this mobile DB collection fields so we can add these properties here ID name position of fees and salary now open employee service class first and foremost i am going to add import statement for this service class here here we have added import statements for angular core packages and eric sticks along with that we have important employee module from this employee dot model dot TS file here now let's create two variables inside the service class so first of all we have selected employee it's of the type employee model class and here we have an array of employee as employees so inside this employees array we will save all employees from the MongoDB collection with this selected employee property we will design a form for insert and update operation that we can do in employee component HTML default design of angular application is rendered here and this view is rendered from the default component HTML which is app component HTML here so I am going to remove these default HTML quotes from here instead I will use the employee component selector so here is the component type script file I will use this selector let me copy this then back to app component dot HTML and I will add a tag with this selector here now let me save all of these modifications here then back to the browser here you see this angular application is already restarted whenever we make changes inside this angular application we don't need to use external packages like we have done in no js' with normal angular CLI watch files inside this angular application whenever we make a changes inside them it will restart the program here so here we have the paragraph employee works from employee component HTML now inside this component we are going to design a form using the property employee selected employee from employee service class so first therefore we have to inject employee service class inside this employee component type script file here we have the type script file employee dot component or TS for that first of all we have to add an import statement for employee service class so first of all let me add a line break here so that we can separate local import and built-in import so here we have the import statement import employee service from shared folder employee service dot ts5 in order to inject this service class we have to add the class inside the component providers array for that week and do this here we have the providers are inside that we have employee service after that we need to add a constructor parameter for employee service like this private employee service it's off the type employee service class now let me save this file then back to employee component dot HTML file now we can design a form using this employee service property selected employee here we will wrap the employee form inside a card component from material I CSS you can see examples for card component here now back to the escort editor now let's replace this default paragraph with a card component so first of all we have a div with class row and here we have the grid system from material a CSS it is almost similar to bootstrap grid system inside that we have a deal with class card inside that we have another deal with class card content apart from that we have one more class white - text so this will apply white color for text inside this div inside that we have a div row now we can use grid system from materialized CSS we want to divide this deal into two parts with five columns and seven columns so here we have the first view and second you inside this deal this first deal we will design the employee form inside the second view we will show employees list that we have inserted into the MongoDB collection here so first of all I will design employee form inside this div so here we have the form form here we have the local reference employee form is equal to ng form and here we have wired up the submit even using ng submit attribute it will call this function on submit and we will pass the local reference employee form into that function inside the form first of all I will add a hidden field inside this control we will store the object ID from MongoDB so I will name this control as underscore ID then we have the local reference underscore ID is equal to ng model and finally we have to add the two wait binding here ng-model is equal to employee service that means injected object of employee service inside this component here then we have selected employee inside this employee service class and inside that we have the property underscore ID from employee model here now we need to add input text box for remaining properties for that you can see some examples from the material I CSS documentation here we will be using liable textbox pair like this we have the label here and we have the text box here now back to the vs code editor first of all we need to add a div with class row inside that we will have another day with classes input field called as 12 so it will take the entire width inside this div row then we have to add input control like this input it's of the type text we can use this control to end our employee full name so I will add the name property here name is equal to name and then here we have the local reference name is equal to ng model then we have the two-way data-binding ng model is equal to employee service lord selected employee dot name so here we are designing this form using template driven approach after the ng model we have to add place holder place holder is equal to and full name after that we have to add the label here so here it is labelled inside that we have name I want to make this input text box as mandatory to indicate the mandatory fields we will use a red aesthetic mark for that I will add a nested label inside this name level so here it is if we have a label with class red text so this astrick mark will have red color we can add label text box per 4 remaining properties position office and salary for that we can do this so here we have the label text box pair for position and then we have label textbox pair or office then finally we have the salary textbox so here we have designed employee form using template driven approach in order to work this approach we have to add forms module inside app module dot es5 so first of all we can add the import statement for forms module here import forms module from angular forms now we can add this forms module inside the imports array here now let me save all of these modifications and back to the application here boom that's it here we have an employee form as per our design now we need to add a submit button and reset button into this form for that back to the component HTML here in order to add these buttons we can add one more deal before the form and tag here so here it is we have a div with class pro and we have another deal with input field called as 12 inside that we have two buttons this is for reset operation and this is for the form submit button for these two buttons we have classes bTW and from material I CSS then we have the custom class which we have defined inside this tag stored CSS BTN - custom in order to align these two buttons in the right side we have added this right class now let me save this and back to the application here so here we have added submit and reset button first of all I will implement form preset operation for that back to the component type script file here employee component or TS for that we will define reset form function here it has a single parameter form it's of the type ng form in order to use this class we have to import import ng form from angular forms we may need to call this reset form function from various parts of the application in some cases we cannot pass value for this form parameter so that is five you made this parameter as nullable so first of all we will check whether we have a value for this form param if value for this parameter is passed we can reset this form by calling the reset function like this form dot reset after that we have to manually reset these form controls since we have designed this form using selected employee property from employee service class we can do this this dot employee service dot selected employee key we have set the selected employee property with an object containing empty or null value for those properties ID name position office and salary now we can call this result form function inside this ng on a lifecycle hook ng on a lifecycle hook will be invoked whenever this component is fully loaded so initially it would be better if we can reset this form here for that we can do this this dot reset form from this ng Oni lifecycle hook we can't pass value for this form parameter here so let me save this and back to the application here now we can wire up this reset form function to this reset button click event for that you can open the component HTML here then we will add a click event for this reset button here so here it is we will call the reset form function into that function we will pass the local reference for this form here okay now let me save this and back to the application here now let's check how this reset operation works for that I will end on some random text inside these text boxes here now click on reset button here so here we have successfully reset this form in to its initial stage now let's implement form validation as we mentioned employing full name is a required field for this form submission so that is why we have added error a strict mark here in order to make these text box as required field we have to add required attribute into the corresponding input text box here so we can add required attribute here required now let me save these and back to the application here we can implement form validation using ng classes from angular initially if you inspect this text box here you can see that it has classes ng pristine and ng invalid ng pristine means we have not modified its initial value ng in value class in the case that this field is already invalid now keep an eye on this classes here while we update this text box can see that its classes are modified ng pristine is replaced with ng dirty and ng invalid is replaced with ng valid if I clear this text box we can see that it has two classes ng dirty and ng invalid we are not looking at ng touched class Carolee we have ng dirty and ng invalid class applied to this text box so that is why we have a red bottom border for this text box we have defined this tile inside these ties door CSS file here if there is any input with these two classes ng invalid and ng dirty we will apply the bottom red border now back to the application whenever this form as a whole is not valid I want to disable this submit button so desirable attribute will be applied whenever this form as a whole is not valid employee form is the local reference for this form here now let me save this and back to the application here initially this - box is empty and thereby this form as a whole is not valid so we have applied disabled attribute to this submit button if I enter something inside this - box you can see that this submit button is enabled now let's implement the form submit even we have already added a function to this form submit even here ng submit we will call this function on submit now we have to define this function inside the corresponding type script file here on submit function for this function we have a single param for its of the type ng4 inside this onsubmit function we have to insert a new employee into MongoDB for that we need to consume post requests from the node.js API here so inside this employee controller in our node.js API we have created this post crowd we need to consume this post route from this angular application here from this employee component in order to consume the post request we will create a function inside this employee service class I will name this function as post employee for this function we have a single parameter EMP it's off the type employee Mori plus in order to make the post request we have to make an HTTP request into the node.js project for that we can use HTTP client so first of all we have to inject this HTTP client inside this constructor here private HTTP it's off the type HTTP client in order to work with HTTP client we have to import HTTP client module inside this app module dot T is file so first of all I will add the import statement for HTTP client module and then I will add this class inside this imports are here now back to employee service class here now we need to make the post request into employees route for that let me create a read only variable here so here we have the base URL variable it is initialized with the URI for the employee controller in our node.js project now we can make a post request for that we just need to call the post function from HTTP client object as a first parameter we have to pass the URI so here it is then after that we have to pass the JSON object EMP containing details of new employee so here we have returned the result of this post function back to the Colo so basically you can see that this post function returns an absorber here so we can call this function inside the employee component dot ES file here now inside this component type script file we can call this employee service function post employee for that we can do this this dot employee service toward post employee into this function we have to pass an object of employee containing details of new employee for that we can do this here we have the form object in order to retrieve value of form elements we can do this form door value so it will be an object of employee itself as I told you this function post employee will return an observer so we can subscribe to that observer here inside the SUBSCRIBE function we can define a callback function like this it has a single parameter response so it will have the response return from the no js' project so first of all inside this function after in 30 a new record I want to reset the form for that we can call this reset form function by passing this employee form object now I want to show a toast notification saying insertion is successful for that we can use toast from this material I CSS go to JavaScript there you can see toast here in order to make a toast request we just need to do this m dot toast inside that we can pass this HTML object okay now in order to make use of this M object inside this angular application for safor we have to declare m before this component decoration here so here it is here we have declared m it's off the type in e now back to the function here now we can make a toast request like this m dot toast here we have the HTML saved in order to apply round border you can use this class round now let me save all of these modification and back to the application here as you know we have a node.js project running at port number 3000 in order to retrieve all employees we can make this get requests from this angular application we are going to consume a post request from this node.js project where we have a problem in order to make the request we have to enable cause inside the node.js project course means cross-origin resource sharing that means without cost enabling any web application no js' or any web application will block request from another web application which is hosted in a different domain or port number now in order to interact with these angular and node.js project we have to enable course inside this nodejs project for that first of all we have to install this NPM package course so back to the command prompt here currently it is running Nordmann let me stop this execution for that you can use the shortcut ctrl C then type Y in order to install the package you can use this command NPM install course and we have to save this package in our packaged or JSON file so we have double - save hit and off so here we have successfully installed the course package now back to the node.js project here open index dot J is file inside this file Foster for we have to add the require statement for course packet so here it is after that we can use the middleware function Abdur dues for that we can do this F dot use inside that we have passed this function course so this will allow request from any port number or domain we have to be specific we need to allow request from this angular application which is running as poor number four thousand and two hundred in order to enable course for the angular application we can pass an object inside this function like this so here we have the origin property inside that we have and I will cause for this port number which is running at localhost okay now let me save this and back to the application here now let me save these modifications here then back to the command prompt now we need to run this node.js project using Nordmann now back to this angular application here I'm going to insert a new employee here I will name this employee as Fiona green then we have position it will be junior developer then office will be in Canada and we have salary click on submit so here you can see the toast notification same successfully now if you check this MongoDB here now we are inside the employees collection click on refresh button here so here you can see the new record for Fiona green now inside this second div here I want to display all employees from this employees collection here for that back to the angular application here then open employee component HTML here inside this deal we can add a table to list employees in order to design the table I will use the employees array from employee service class here ok we have already injected this employee service inside the employee component type script file here so we can make use of that array inside this HTML here for that for support we will add a double here for this table we will apply two classes from materialized CSS so first of all we have responsive table after that we have highlight class inside the table first of all we will add the table header for that we have t hat inside that we need a row with columns for each properties from the employees collection after t hat we can display exact content from employees collection for that we have a TR element here here you can see the ng for deductive here it basically allows us to I trade through the employees array from employee service class with this EMP variable okay so using this EMP variable we can display status from this employees collection for that we can do this for so far we have the employee name in order to display employee full name we have used string interpolation or one directional binding after that we have position and office here inside this employees are a from employee service class we have to fetch all employee records from this employees collection for that we can define a new function inside this employee service class here so function will be something like this get employee list here we have made a get request into this node.js project into this route here this one first route so it will return all employees from employees collection now we can call this function from this angular component employee component here for that I am going to define a new function here function name will be refreshed employee list inside the function we can call this function get employee lease for that we can do this this dot employee service not get employee list it basically returns an observable from this get function here so we can subscribe to that observable here so we will call the SUBSCRIBE function inside the SUBSCRIBE function we can define a callback function with a single parameter response now inside this response parameter we will have an array of record from this employees collection so we can assign that array into these employees or here for that we can do this this dot employee service dot employees is equal to response here you can see a red squiggly line because we are assigning an object into employees array so we have to cast this response as an employee arrived for that force so for we have to add an import statement for employee model like this then we can cast this response this as employee array now I will call this function inside the ng on a lifecycle hook here this dot refresh employee list now let me save all of these modifications here then back to the application so here you can see the employee list that we have inserted into this MongoDB collection now I want to add one more column into this table for some action buttons like edit and delete so back to the component HTML file here so first of all I will add an empty column inside the table header like this then inside this TR element we can add an extra TD like this inside that we will add a button for delete operation like this so it has a class custom class action BTN it is defined inside this tie store CSS inside the element we have a material icon for edit operation so it will show a pencil icon after that we need to add an anger element for delete operation so here it is we have the custom class action BTN and here we have the material icons for delete operation so it will be a trash icon now let me save this and back to the application here so here you can see those two buttons here edit and delete operation now let's implement the update operation in order to update a record you so want to click on this pencil button here then we will show the corresponding record details inside this form here after making the update then user can submit before so first of all we have to implement V click even for this pencil button here so let me add a click even here when we click on this angered element we will call this function on edit by passing this EMP object from the I tration now let me define this function inside the type script file here on edit it has a single parameter EMP it's of the type employee model class inside that we just need to set this employee object into the selected employee property of employee service class so that it will update this form with selected employee content so we can do this this dot employee service dot selected employee is equal to e MP now let me save all of these modifications and back to the application here if I want to update this record for Fiona green you can click on this pencil button here so here we have populated details of employee Fiona Glee we can edit the employee details here then submit the form we have already implemented submit event for this form using this onsubmit function here so inside this function we have to deal with insert and update operation but we will decide whether we want to do update operation or insert operation based on the value of this input hidden field here underscore ID if underscore ID has an empty string then we will go for insert operation otherwise we will go for update operation for that we can add and if course here form dot value dot underscore ID if it is equal to empty string we will do the insert operation here in the else part we have to do the update operation for update operation we have to consume put route from nodejs project in order to consume the request I'm going to add a new function inside this employee service class here so here we have the function put employee it has a single parameter EMP it's of the type employee in order to consume the port route from node J as we can call the put function from HTTP client object as a force parameter we will pass the URI here here we have concatenated underscore ID into the base URL like this as a second parameter we have passed the exact employee object now we can make use of this function inside this employee component a file here it would be same as that of this post employee function invocation so let me copy this and pasting inside this else part here then instead of this post employee we have put employee function inside this toast success function we can show updater successfully after insert or update operation we have to refresh this employee list inside this tab for that we can call this function refresh employee list so we will do this this dot refresh employee list function can be called same function can be called inside this function also let me save all of these modifications here then back to the application I'm going to update this Fiona I agree in the court now click on this pencil icon here then instead of Canada I am going to update that with UK click on submit so here we have the success message updated successfully now back to the MongoDB compas management tool here you can see the old office of Fiona as Canada if you refresh this list it should be updated to UK finally we have to deal with employee delete operation for that we will be using this delete icon here so we have to wire up and even for this button click even back to component HTML here then I will add a click even for this delete button here we will call this on delete function into that function we have to pass two parameters first f4 we will pass the underscore ID for the MongoDB object and then we will pass the form object employee form because we have to reset this form after any delete operation now we need to define a function inside this employee service class in order to consume delete route from node.js project for that we can do this we have the function delete employee it has a single parameter underscore ID we will make this delete request by passing this URL inside that we have appended this underscore now back to the component type script file here now we can define this on delete function here function name will be oddly it has two parameters underscore ID then for delete operation is a loss of data so we have to confirm the operation from client side for that we can do this we will have any close inside that we will confirm the operation by asking this question are you sure to delete this record or not if you sir confirm this operation it will return a true value so inside this if close we are safe to delete the record for that first of all we will call the function delete employee from this employee service cross function into that function we have passed this underscore ID value this function will return an absorber so we can subscribe to that function here inside the SUBSCRIBE function we will have a callback function with a single parameter response after deleting an employee we have to refresh this employee list here for that we can call the function refresh employee list then we will reset this form if there is an employee selected for update operation for that we can do this this dot reset form function can be called with this form object finally we have to show the toss message m dot tossed inside that we will show this message related successfully now let me save all of these modifications then back to the application here I'm going to delete Ashton Cox record for that you can click on this trash icon here then it will ask for confirmation are you sure to delete this report click on okay so here we have successfully deleted the record if you check the MongoDB combis tool you can refresh this list here so here we have deleted Ashton Cox record so with this means sack application we have implemented curve operations hopefully in the next videos we will discuss how to do user registration login and logout using GWT user authentication and role management so let's mind this means tag tutorial for business you can download this project from the github link given in video description if you found this video helpful please thumbs up this video for our some videos like this please please subscribe to this channel dotnet mob please like and share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 155,875

Rating: 4.8866806 out of 5

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, CodAffection

Id: UYh6EvpQquw

Length: 71min 37sec (4297 seconds)

Published: Wed May 02 2018