MEAN Stack Application Tutorial | Build a MEAN Application From Scratch | MEAN Stack App | Edureka

hi everyone these are scenes from edo Rekha and today we are going to learn how to build a mean stack application from scratch so before moving ahead let us discuss the agenda for today's session so we'll start with what is the mean a patient then we'll talk about MongoDB Express angular 2 n nodes or chase basically mean is an acronym for long body be expressed angular 2 and node or chase so we are talking about all these four technologies they will talk about curtain and at last we'll start building our application which is contactless mean up so are we clear with the agenda guys so let's start with very first topic of today's session which is what is the mean African means that refers to a collection of JavaScript based technologies used to develop web application so from client to server to database everything will be based on JavaScript if you see the diagram which shows a simple client-server architecture that will be following in our main application if you see there you will find angular 2 that we'll be using for a client-side development then we are using Express which is based on node or shares for our server-side development and at last we'll be using MongoDB as our database so this is the architecture that will be following so let us talk about these four technologies starting with MongoDB so normal DV is an open source schema lace no sequel database system so if you are working on MongoDB you will be working on collections and document a collection is a group of documents whereas document is a set of key value pairs you can refer to a collection as that of a table in our DBMS system so basically all the data that we'll be working on inside MongoDB will be in the form of key and values mama Dee Vee says data in binary it is on format which makes it easier to pass data between client and server now let us talk about Express which is our next framework in our list so I have a quick question coming here which other database can we use with Express ok Bank since we are building a mean stacker app that is why we are going it with Normandy be buddy of course you can go ahead with other database as well and integrate with your Express framework let me show you the documentation so that you can know all those data base which are there and can be integrated with Express you go to express a dot-com guide database integration so these are the data we can integrate with our Express framework you can go ed with Cassandra which is also a no sequel database and go ahead with my sequel we are working on MongoDB right now you can go ahead with SQLite which is also using Android apps so these are the database that you can work with your express framework so I hope your doubt is clear man okay so let's get back to our topic so let's now list is Express so Express is a lightweight framework used to build web application based on node or TS it provides you a set of proposed features which you can use to build single page application as well as multi page application the idea of Express came from Sinatra which is a very popular framework based on Ruby so basically Express provides you boilerplate by encapsulating the functionalities of node or shares so that the whole app building process becomes easier and fast now let us talk about angular 2 using angular 2 you can make application for your mobile as well as your desktop annular is by far the most popular JavaScript framework available today and with the introduction of typescript angular 2 is bringing a true object-oriented web development into mainstream so we will be using our interface through which our client will be interacting using angular 2 so at last let us talk about nodes or chairs so no doubt J's is a server-side JavaScript execution environment built on Google Chrome's v8 JavaScript engine it follows an event-driven architecture where there is a single thread mechanism to process your events and event can be a clicking a button or filling a form in a website so all these events are then sent back to your server for processing and then the server after the processing is done generates the response the processing of these events are done asynchronously that is if we have multiple events in our event queue our node server doesn't pay it for a particular event to complete so it can process or serve multiple requests at the same time so this very whole event driven architecture makes our node.js server highly optimized and scalable so I hope guys you have a clear overview of all the technologies that we'll be using in our main stacker so now let us talk about credit operation droid is an acronym that stands for create read update and delete so basically these four operations will be performed on our database so we will be using post method for inserting new data into our database we will be using gate for the trimming data from our database we will be using put for modifying or updating any data that is there in our database and at last we'll be using delete method for deleting resources or deleting any data that is there in our database so we will be implementing all of these four functionalities or operations using restful api that will be learning while building our whole application so why let us starts with building our application before that we need to install MongoDB and node.js locally into our system so let us go ahead and do that so for installing node.js you need to visit this website called ods.osu.edu or controller and download it so I'm going overhead with Windows so basically installing no tears or longer live in your system is pretty easy you just have to go through setup like a bunch of next buttons and specify your location where you want to install it or go with the default and that's it so my download is complete and well install I have already downloaded and installed node or chairs in my system so I'm not going to install it but I'm going to show you the procedure or way to do it pretty easy and then we're gonna install MongoDB I think I have also installed a MongoDB in my system but I'll tell you how to do that so specify your location here then click on next next and then finally install so once your installation is completed click the finish button and open the node Carcharias command from so basically we will be using this command from node.js command prompt to build our entire project so let's check out the node version then you can go ahead and check out the NPM Berlin NPM stands for node package manager which is there for managing your dependencies and their versions so whatever dependencies you need to run your application or for your project you're going to use NPM to manage that now let us install MongoDB into our system so you go to MongoDB calm you click on download then again as per your operating system choose the installer I'm going to go ahead with this way version and I'm going to download the MSI topic 5 148 and B so I have already downloaded it so I'm not going to go ahead with the download you have to run this set up click on next I have MongoDB already installed in my system so I'm going to remove it first then you can show you the installation I could have done that with no door cheers as well but it's pretty same they use it at a big bunch of next if they specify your path and that's it I have uninstalled it then go next agree next I want complete install you can go it with the custom options as well where you can specify the location and other configurations but I'm going to go ahead with other default mode or the complete it's collision and the MongoDB files have been stored in my Program Files if you're using Windows and you can go ahead and check out that so I'm going to show you that once the installation has been completed yeah so click on finish your files will be installed by default in your program files using Windows go to DB server 3.4 then so this is where your all the files reside in your system now for running your MongoDB service for example whenever you are creating a mean app you need to run the MongoDB service so that you can make connection to it and perform data operations so for that what you can do is go to dock in MongoDB calm because it will get the whole procedure or step-by-step process to do that with the MongoDB server installation momentary Community Edition windows we have already completed this very step that is installed MongoDB Community Edition now we need to run this MongoDB service so for that we need to create two directories called as data and one subdirectory a steamie so let's go ahead and do that this is open command prompt let me delete the data file because I had mungry we already installed in my system and I deleted so yeah DB has been created now the next step is to tell long would you be that this is the path where my data is data or data for the database will be residing I'm going to copy this command and I'm going to paste it here I'm going to change my path which is see and slash data session so my connection has been started my service has been started and sweating for connections on port 27 0 17 which is a default port for MongoDB - correct if in case like if you go it with this very step and it doesn't work out and you have to execute the G dot exe which is the third step you can do that as well so we have MongoDB ID and node or chase ready so now we need to create our project so I'm going to go ahead and start building my application for that I'm going to go to my project directory which is entry type yeah so I'm going to make a folder where I'll be putting all my source code set aside as well as my client side so that flame is as the name of our application which is contactless now I'm going to use NPM and it command to bend my project as well as create packages or JSON files which will contain all my dependencies and diversion so you go ahead with NPM and it will ask you your project name version description of the project net your building employ me an application entry point is a file from with where your server-side exhibition will start so let's name it as a broad case you can go ahead with in-depth OJ's as I always use a broad gear so it's up to you to name whatever you want to name that pal you can do that you can put your name as altered I'm going to put mine right now so let's open this folder or project okay I have already opened in my vs code so I am going to use V export as an editor you can use any ater of your choice so this is your package courtesan file which contains all the information regarding projects we haven't installed any dependencies yet that's why you're not seeing any dependencies or anything like that we run have forehead and Buddha so for that I'm going to use the command + PF installed so for installing any dependency or modules you use npm install command followed by the name of that particular module which is expressed then you can use - - say plug in that way whatever dependencies or modules you're installing it will be written to your package or JSON files so I haven't told my express and you can see over here in the dependencies section we have Express of version 4.1 5.2 and so this is how you do things so now if you want to share your project with your friend or colleague so you don't need to send the entire project along with the dependencies so you just need to send them the source code and this package or JSON file so that they can download the dependencies or install the dependencies and start working with your project you can also install multiple dependencies or modules or at the same time what I meant to say is using a single command install words with Mongoose and then we need chords we need 20 part so Mongoose is an object document mapper for using MongoDB and body butter is used for our finger incoming JSON data and all support because we will be having our server code running at port 3000 whereas our client-side code run on 4,200 4,200 so that's why we need to enable course so that we don't get an error which is not allowed by the earth now as I told earlier we have our entry point for you called ab dot tears from where our server-side execution is start so you start server-side code by making that very file of creating that WAV file in the first place so we'll go ahead and do that AB dot kid then what we'll do we will import the modules or dependencies that we need to build our project or our server-side code so importing modules suppose we need extras we need Mongoose you when in body butter you with it called you and we need part we have an installed park because it's one of the cold model so you don't need to install it separately you now now for making a Express application or using Express believe two or use Express method and assign it to some variables so we'll hand it to app okay now we need to define a pose number you now we need to bind ourselves with this port so you this is a fallback you can go in and I am using arrow function you can use function as well as the JavaScript function after a successful connection we need we want to say that servers target at both concatenate the pose number now what we need to do is we need to add our out so that if we go to localhost 3000 then we need to specify our server what it needs to render for that homepage Oh testing server because you cannot later on create all our doubts in a separate file called route dot J's or something like that so that all our routes are in particular files and it's not in our advert year side for creating route you need to use get method for example like this is how I am defining a row and the route is for my home page that's why I am using slash the next argument is the first response whereas dot sin now let's go ahead and run our server for that you need to execute note space your entry point violent has been started go ahead and check that so we have a full bar so everything is running fine now so remember I told you that I want all my routes to be in a particular folder so I'm going to create a folder called route or we can simply put it in a five because it's a simple application so we'll do that or we can create our food respect door to you now we want to use this a particular folder so what I'm going to do here is I'm going to define this particular file with a variable so first I'm going to use route / we need health / now we need to use it so so I want all my earth which is proceeding with Slash contact or slash API or slash ABCD to be forwarded to that very particular file so for that for example I want it to be flash API so all that outs with Slash aps large ABC let's say will be directed to my route gorgeous but and where I have defined what to do with that particular route call for example I'm having slash APA slash a contact for adding the contact so whenever a client needs to add contact it would make a power to this way API slash API slash add contact and I would be defining my music for adding contact to my database or there in my dog or JS file beside that very particular route that is slash API slash add contact so that's how things work right so we need to define route so that we can make call to it and we can perform our data operation so far now this is the reason that we are making the route so it's done now we need to add our middleware so that we can parse our data and we can use course so let's go ahead and do that adding so we need course we need body parts as well you so you want to parse our JSON data I and we need to do one more thing we want all our static files to be in a particular folder so for that I'm going to create a folder called public and inside that I'm gonna create my four index dot HTML which will be rendered by our front-end application so take pride you but God shine basically I am defining the parterre you can directly go and specify the path of this folder public folder or canoes underscore underscore dir name which will point to your current directory and you want to join it with public so that is we are done here now let's create some route so we need to bring Xpress you you can use cost or whatever you want but in general the us cause the cuz the value of Xpress is not going to change I mean the value of variables Xpress is not gonna change in our code same with all so we're going to use Express routers you remember I told you that we'll be adding the outs here so whatever call and making - slash API which is there let me show you slash API slash contact it will be directed to this very particular dot ket method the first response and next now this is my slash contacts folder so and I'm going to use this very out for retrieving the contact list you okay so every time you make changes to your server-side code you need to restart your server all what you can do you can go ahead and install node mode which will continuously watch your source code files for any changes so whenever there is a change it will restart your server on its own so we want to do that you now you go ahead with note Mon command the starter server so they are getting a error so priorities are creating route you need to export your router as well you so basically what it does it goes to your package or is on fire and where it finds a node more that our main entry point file is AB dot J's and finally start the server using this a particular file so if you see over here the same command that we use to execute for starting our server note app gardius has been used by node model now if I go ahead with slash API slash contact see we can have the data so now what we're going to do you going to connect to our database and then here we gonna write our logic for including data from our database and that's how we will send data to our client-side application which will make a foil to this very particular API and it took the risk of contact we need few more methods for example for freezing data we need them like a to add data add contact you for that we'll be using post method you then we need a method for deleting contact you pretty similar the syntax or the signature of these methods so how I am going to eat a particular contact is by referring to that very particular contact using its ID so it's done now what we need we need to create kima for our contact that will be inserted into our database and we need to make connection to our database so we're going to make a folder called models inside that we need a file contact god chase so this very particular file will be having all our schema our contact schema so that is the reason I am making this file so we need to bring in Mongoose for since we are going to make schema for a MongoDB so into brain longest which will be talking to MongoDB or true that will be using our motivated you contact FEMA Mongo's schema so this is a function and I'm going to pass the schema that I am going to use for my contact so I'm going to go it with first name and last date you type string you - quite cool then we need lastname you let's make it required also you can make it fall as well but since it's a demo so I'm going to go ahead with true a lot P will wait for contact number or phone number let's keep it clean only now we need to export this very schema you so it's done now what we need is we need to create connection or way to connect to our MongoDB so we're going to go ahead and do that so we have Mongoose already here so now for connection will be using Mongol tour connect function so let's go ahead and do that connects to you dB bond will start connect then we need to pass no you are along with port number two which we gonna connect to our MongoDB so it is long would I be localhost - seven zero one seven so we're going to go ahead with our default port now on successful connection we need to display a message that yeah the connection has been established successfully one connection we need to say man will start connection dot on next step then we want to say that connected to database Maru TV ad yes that's it now in case of Earth suppose we have an error while doing the connection or wise establishing the connection if there we need to know that what is the error that we are having you print some message as well Oh it a page connection yeah we don't need you so it's done I think now we can check out if we have met the successful connection or not yet so we have been connected to our database at both to 7 0 & 7 now what we need to do is create a ps4 you trippin contacts or adding contact or database or deleting contact from our database so you can't do that so first we need to bring the schema the contact schema that we have created in our contacts dot js5 you now for retrieving contact we're going to use find method or function then you're going to call back so this is one other way to define a callback or function the JavaScript play you yes star tears on so after retrieving the contact all the contact or the contact list will be saved in our contacts variable which we are sending or responding back to our client in JSON format now we need our post so first what we need we need to create a new contact which we'll be adding to our database so I'm going to make an object new contact and go to new contact it will be of type contact name I want my first name to be from my request body dog first name last name so it will be lost you then we need phone number you that's it guys now we want to insert this very new contact into our database so for that we're going to use you like that dog saved and we need a callback let's go ahead with the error function if earth wait to send or we want to send message phase to add contact as you on dark added successfully that's it guys now for to eat what I'm trying to show you is that if you are inserting any data into your database what our mom would be does it creates an ID for each document or each contact so using that very particular ID we're going to refer to that particular contact which we want to deed and we'll perform our trade operation so that's how we want to do things so from client side we'll be receiving that very particular request for relating our particular contact then using that very ID we're gonna issue our delete command so contact dot to move now as I said we need to retrieve the ID this ID and then our callback you the earth you Oh you that's it guys so our delete method has been added to our doubt files Chris Foley so we have three methods now later on we will also add our update method so it's done we have no error or no issues now for checking our API is we're going to use postman which is a Chrome extension which you can add to your web browser Chrome browser and go ahead and check your API we went above it post nine proof here you will get an option for adding it to your browser or to your Chrome now first of all we need to insert some data so that we can fetch it throw in a word with our post method then we want our header as content type to be JSON then we need to send draw or echo so first name Ruth last name wait then poll number you okay I'm gonna go ahead with string but yeah let's add some random number here now we have to enter the URL or the URL of the API that we want to make the call to so that it can be directed to that particular post method so we're going to go ahead with localhost 3000 slash API slash contract so contact our xxxp let's add some more contact Peter you now let us retrieve the contact that we have already added into our database for that we'll be using API slash contact so we have these two contact so that's what I was talking about you can see over here we haven't added any ID field while inserting our contact so this is automatically generated by MongoDB and this is what we are referring to in our delete method so what we're going to do is copy this very particular ID now we will not issue a delete command so now our method will fetch this very particular ID from our URL and it will refer to that very particular document or that very particular contact and delete it so the contact has been deleted now let's check that we are having issues here so we can see that our Peter Parker has been deleted so this is how you can check your API is now what we are going to do we're going to make our client application and where we will be making call to our API is for performing various kind of data operations that we have defined in our server file or server-side code so that's it guys our server-side code is complete now we're going to go ahead with our client side application using angular 2 and we'll be creating view templates and all to show a contact list we'll add buttons for delete for adding contacts and all that let's go ahead and do that so for that I'll be using angular CLI or command line interface that we'll be using to build our entire client side project so go ahead and open our new instance of node dot JSC MD then go to the project directory you so now we need to install angular CLI for that you'll be using again NPM install a direct angle / feeling so basically angular CLI will help you to provide all the boilerplate or all the files which is necessary to run your client-side angular application it will also provide you the core node modules or code modules which we are going to use in our angular app you yeah so NPM install has completed and our angular CLI has been installed now we gonna go ahead with creating a angular project so for that you'll use ng new and the polar name where your angular app will be deciding so engineer client name it as kind because it's a client-side application so as I said it will provide your boiler plates or all the files so these are the files that will be created using your ingenue command so you'll have a basic component called as a broad component and you will have a basic model AB dot module where you will be specifying all the modules which you're going to use across the application as well as your components and services then we will have index dot HTML which is the file that will be rendered in the first place to your web browser so which we have specified in our public folder then we have packaged a zone there are other files as well if you see over here we have protractor for testing and for linking we have TS link got a zone and all the configuration for our angular CLI is in angular - realize or Kazon so couple others are there so which is not required for now like don't need to know all of that you so our project has been created successfully now we're going at that very particular folder now what we need we need to create component okay let me just give you a quick walkthrough so inside our client folder we have source then app this our component our basic component colors AB dot component so if you look at index dot HTML file which I told you is gonna render in the first place so here in body we have AB - hoop so this is a selector or tag which will load our ab dot component for this so basically we will have AB dot component or app component Clause to be render in the first place so here you can see we have AB - root as selector so for building an angular 2 application to use typescript as language which is based on object oriented features so here you can see that it's a Thai script class called as AZ component now we have something called as decorator at rate component decorator which is angular that this very class is a component and we have template URL over here which is specify the template for our component which is over here and then we have CSS for styling so let's run this very particular application and p.m. start is the command or you can go ahead with ng serve you no record and for 200 you are having that very particular thing as app works so basically for our index dot HTML file is rendered which is calling our app route or app component so if you check out the a dot component or template - in this template we have what we call an interpolation or one-way data-binding so we are winding this value as app works so left let's make it better coming to Edgar it has been changed so a lick for in case of server-side application while we were creating the Express app we had to run server every time whenever there is a change and for that we use node more similarly in our Android application there is a difference is that we don't need to restart our application or it continuously watches for any changes that we make in our source code and it reinsures or restart the whole application each time so you can go ahead and check that so if you see over here then we had a change over here so it recompile it and start the whole application all these ts files are converted to JavaScript files or transferring to JavaScript file and then are rendered now we need a basic component colors a contact for listing our contact as the last there will be a form over there which will have three for adding contact we will have button for deleting contacts so let's go ahead and do all of these so first of all we need to create a component so I'm going to stop it for now we'll be using ng T or ng generate for generating component or services component will be contacts we need a service to so basically it's considered to be a good practice to separate your business logic or your data retrieving or data operation logic in a separate file which we call as a service then what we do is we inject those services into our component or wherever it is necessary so as to use those services now you can see your warning here that service is generated but not provided so basically whenever you have to use or in whichever component you have to use the service you have to provide it in your advert component decorator so there will be a field here called as providers and we will add the service that we will be creating now so we have contact dot service of TS or contact service class where we'll be writing our business logic or our data or retrieving or ritto operation logic and we'll have a contacts component where we'll be creating our template and all the logic behind us so we'll start with creating our service so that we can retrieve the data first then we'll start with creating this contacts component now one more thing we need is we need a schema for our contact so let's go ahead and make a file called as contact or chairs or TS that will transfer into gist so through that contact dot TS we'll have a class called contact which will have portraits id3 of ice cream then we need first name three last name string and full optional field now we need to import our HTTP module for all getting all HTTP methods for retrieving data or for sending data or in other words contacts so input Chicopee we need headers as well Brom angular activity then we need our contact glass to be imported here so that we can use the schema support contact from you then we need the reactive gears operators basically we will be using Knapp operator you so it's done now we need to use our HTTP module so for that you stun north create the methods for retrieving contact then we will add contact and we will give contacts so we have breathing contact so which is get contacts and I want to return all the contact called the contacts or put the contact list which I will be getting to while I am going to my API you then the API URL you can see over here this is the signature or syntax of your get method or signature you can call like we will have first argument at URL string so we'll have as HTTP slash locus Flagg and poor gamble then we'll have API then we have contacts then we are mapping to days on former so we have our pet contact method ready over here you now we need add contact Razak and on that which will be taking new contact as an argument you we're going to append the content type in our header which is you so now I wanna return the response and I wanna make a call too my art contact API which is /ap air slash contact I'm going to copy this very same thing you and I'm going to pass the new contact then the header we'll map response as a zone now either delete method you remember I told you that portal eating of contact will be using ID so as to refer that very particular contact in our database so we need ideas our parameter you then I'm going to append or concatenate the ID you so we have our service ready now we'll be using all of this method or injecting these services into our component and then we're going to use all of this method to retrieve data and finally do something on it for example is going to show the contact list so we will do that then for adding contact will use this add contact method so that's how we'll be doing things so let's go ahead and create our component so we'll go to our contacts dot component or TS private contact stutters yeah but we need to import it was so we have cantar service from not slash contact yeah so now we need our contact class or schema you that's it now we're going to initialize our contact service or we want an instance of that very contact service class so that we can use the methods that we have defined this so for that what we'll do we'll right we'll pass the argument as private contact service of type contact service class so this very process is called dependency induction or that's how we inject our services into our component and second thing is you need to provide your service so as to use providers you now let us go ahead and retrieve data so we'll be putting our retrieving data logic inside MGR init method which will be initiated once your component is being loaded into your browser so every time you load your component it will automatically call this very particular method to retrieve all the data so you'll be having this thought contact service and you're going to use get contact method so you can see over here that we have three methods add contact click contact and get contacts we going to each get contact and since it will be returning an observable we need to subscribe that we want our contacts to be set as to restore contact no showing an error because I haven't made any variable for contact so let's go ahead and do that so it will be contacts of type on that and it will be an error yeah so we have done that which creates a more variable that we'll be needing it round we need one then we need first name a sling then last name then phone number that's it last remember I told you that the bootstrap component is AB dot components so we need to specify in our ab dot component that now this particular component should be loaded so we will go to template and we're going to use app that on tap because if you go ahead and look at other selector it's AB - contact so contacts works so wise we have retrieved the data here now let's create our template so that we can display this very particular data so I'm going to go it with my contacts dot component dot HTML and you so before doing this we need to refer to our bootstrap style sheet so that we can incorporate it into our template so we'll go ahead with boots watch then these are the ties that's available which you can use so I will go ahead with something super you so you can go ahead and click the download and copy this very thing and put it into your HTML or index dot HTML file so we'll go there we'll copy this very thing and paste it here and then we need to write style shape and will remove this very particular feeling and will cop it here in our HS so that it can refer to so it's done now we can go to our component and here what we want is we want to iterate over our list so product we'll be using something called as ng 4 which is a structural our directive so dope-ass track ng Alette on contact so we'll be iterating over contact using contact variable so each contact in our contacts array will be retrieved in this very particular variable and that very variable will be displaying as a list so go ahead and do that so we need our class md3 again a deaf closing the start so now again we will be using that very interpolation or one-way data-binding to display our contact dot first name then we need similar columns for our last name and phone number you so it's done so let's check out our yeah so we can see over here that our list is being generated we'll put some more styles so that it was good in the end so what we'll do right now it will add a delete button or using that we can delete any contact so we'll go ahead and do that so for that as we copying this well thing again and I need my would type button you then click which will call a method call as a contact which we haven't created yet but we'll do it soon now what we want is we'll be referring to that very particular contact using ID as I told you earlier so maybe so the value should be the using a class call but the danger so it's done so we have this very particular thing over here now what we need is will add few bricks so that we are iterating over the list so yeah we'll do it later on this sidings so now we'll add our elite method over here which we'll be using and we also need something called as adding contacts add method or add contact method so let's go ahead with our delete first so we need T on track that's kind ID as any type type any now so basically we'll be calling our service again so this dot yes that service dot delete contact and then will passing the ID and since it returns an observable we need to subscribe that very particular observable so we'll go ahead and do that now what we need to do is even if we have polluted the data or the contact from our back-end site or from my database I need to remove it from my contact error as with this very particular contact where all the contact has been saved so we'll go ahead and do that if the relief operation was successful then our sent then okay so I'm having an error because I haven't defined the variable contact so going to distort contacts sister now we need to increment our iterator so if contact i dot underscore ID is equal to the ID that has been provided to my method then I want to remove it like I so our delete contact is done now in to add our new method for our adding contact so delete functionality is done so let's add our add contact method so that we can add more contact and delete them and see everything is working fine or not so for that I'll be using an contact and this is creating new contact here I need first name to be just thought first name then I need last name to be this God last night and I need phone to be this start pool now I need to provide this particular contact that I have created to my service or in other words I need to call the method that is defined in our service so for that we'll be going ahead contact service dot add contact and we'll be passing this particular variable please not subscribe it till start contact put so we are putting the new contact into our array you are having her okay so it's not able to find any cannot find name very contact and I don't know why we are having this error okay let's check it out so yeah so it's done so these are add contact method now we need to call it from a template so you're going to modify our template so that we can add a form on top of our class and which will have three fields one for name one for last name and then for one for phone and then a submit button for adding the contact finally so for form we need to use form tag or submit event and then we'll add add contact so this is a method that people call when the bomb has been submitted close the tag from that now we need creepy guys so the first one will be all power first name so let's go ahead and do that so for that will be using depth glass equal to they've claws equals to form grouped now we need to close this particular tag and I won my label has first thing yep now I need input type equal to text then we gonna use something called as ngmodel for two-way data-binding so whatever changes that we want to make there should be reflected in our list as well where we'll be showing the contact list so we want to use that and G model close to name suppose to first name plus equal to four so I've done we have our first three four you know poisoning similarly we need it for our last name and then for our phone number so will electric as last name and then we need to write it as last impaired finally we need for phone number so for number so you wanna put this value to our phone variable yeah everything is done here now we can add something goal is required so if you are not putting that very or filling that very field then it will pop up a message or there will be a message popped up stating that you need to fill that very particular form or particular field so we can use this required here now we need a one button also for our submit button for submitting our form now on top of that we need to add some heading stating that this is the section for our add contact so you extend our everything here or going either horizontal line or cooler yeah so basically these are add contact form using which we can add our contact and this our delete button everything is there let's slide my knee we are having it here but yeah it's there and the second thing is that if you are saying this that every time we are adding a data we need to reload it is happening because our this very method for retrieving the contacts so basically whenever you are retrieving the contact and displaying it at that particular time like your browser never allows you to block your UI so that is what is happening right now so what we can do to fix it is we can copy this very particular thing over here and we are going to put it inside our add contact to be called just after we have put the contact so now if we go ahead and to that then you can see where okay we should add some PR tag so that looks quick or present table over here so we're going to do that here so this is so far now let's check our delete button it's working as well so our goal application is working let me give you a quick walk throughs or a quick recap so that we can defer edge all the things that we did for creating this very particular mean application so what we did we start with our server-side coding where we had our app dot J's or entry point file where we imported all the motors that we required for our application then we used middleware for applying cords and a body parser to parse the json data and then we put all our out in a separate file callers route yes this is over here now there we created routes for each operation and then we created schema for our database for contact like for example first name will be like this last name will be this and phone this now we have our client side or client folder where we started with creating our component so these are component and then we had a service called as contact or service where we have mentioned all the data operation logic and we have injected reservation service into the component that we need to use or we want to use so that's it guys this was the whole angular application and Express and MongoDB so we have created our main app successfully I hope you find this whole session to be informative so you will find this particular recording into your LMS you can download it and in case of any query you can go ahead and ask those queries or put those queries to our support team which is available for 24 cross 7 and in other cases you can also bring your doubt in the next class so thank you for attending the session thanks bye I hope you enjoyed listening to this video please be kind enough to like it and you can comment any of your doubts and queries and we will reply to them at the earliest do look out for more videos in our playlist and subscribe to our Eddie Rica channel to learn more happy learning

Channel: edureka!

Views: 318,034

Keywords: yt:cc=on, mean stack, mean stack application tutorial, mean stack application, mean stack tutorial, mean stack tutorial for beginners, mean stack development, mean stack app, mean application tutorial, mean application tutorial angular 2, mean application from scratch, mean stack web application, mean application example, mean stack example, nodejs and angularjs, nodejs and angular, nodejs mongodb, nodejs tutorial, nodejs training, nodejs edureka, edureka

Id: wtIvu085uU0

Length: 81min 13sec (4873 seconds)

Published: Fri Apr 07 2017

Reddit Comments

[u/FenrichDisgaea]

Thanks