MEAN App From Scratch - MongoDB, Express, Angular 2 & NodeJS

alright so in this video we're going to be building a complete tasks list application using the mean stack now if you don't know what the mean stack is it stands for MongoDB Express angular and nodejs now there are packages and modules or frameworks that were created to really streamline a lot of this process and basically set you up with a boilerplate for a mean application alright I do know that no those exist feel free to still tell me about them in the comments but I'm not using one of those because you're not going to learn too much from that all right if you really want to be a good developer and actually know what you're doing and understand it it's better to basically do it from scratch alright so learn it understand what's going on and then move on to those those tools that can basically do all this stuff for you all right so before we begin I just want to mention that this is from a prime angular 2 project based course it's not from it but it is it's based off it so if you do like this I would suggest checking that out and I'll leave the link in the description all right so I have 4 tabs open here and I just want to kind of go through what we'll be working with so for MongoDB we're going to use a service called M lab which will give us a remote implementation of MongoDB so we don't have to worry about installing it on your machine and getting that set up it it does have some really expensive plans but it does have a free sandbox plan which is what we'll use all right so we'll get that set up now the e in mean stands for Express and Express is a framework that you can install in you can use to build web applications it features routing API is to work with HTTP requests and just a whole bunch of different stuff for building applications and running a server alright so we'll get that set up obviously angular is going to be used for the front end for the the the client side you I will build a task list component and we'll also build a service that will interact with our Express server all right now we're going to be using something called Jas which is an ORM that allow us to interact with our MongoDB database and do inserts and finds and stuff like that all right and then of course we need nodejs if you don't have that installed just go to node.js org and download and install that alright and that obviously that comes with NPM as well okay I mean hopefully you guys know at least a little bit you know what NPM is and stuff like that if you don't I would suggest maybe going back into some of them maybe the Express crash course things things like that some of the more beginner based courses alright so let's go ahead and get started first thing we're going to do is create a project folder so I'm gonna go let's see where am I going to go in my C Drive let's see we'll go into sandbox and obviously you can create your application wherever you want I'm going to create a folder and we're just going to call this we'll call it my task list all right as far as the functionality it's going to be very basic the idea is just to get you familiar with the technologies and how they all go together all right so let's open up a command line in that folder I'm just going to use my standard Windows command prompt and feel free to use whatever you'd like for this and let's say I want to make this font a little bigger alright yeah that should be good I'm sure you guys can see that all right so let's go into the folder I just created all right and first thing we're going to do is pretty much set up node and then set up Express all right so we need to have a package.json file which is basically a manifest it has the application name the version all that stuff and it also will contain all the dependencies that we need all right so to create that we can say npm in it and that should start to ask us some questions here it's going to ask us the name my task list is fine so we're going to click enter version that's good description will just say simple task manager entry point I'm going to call it server J s and then just enter through the rest all right and that should have created a package.json file alright now i'm going to open up my editor and i'm using visual studio code which is really nice it's free if you want to check that out or you can use whatever you like alright so I'm going to open up that folder and let's take a look at the package.json file basically just has all the stuff that we just answered alright so now what we want to do is install all of our dependencies ok so we can do that through our command line so say npm install and we want express we want body parser we want to be able to accept data except data through a form and parse that and then submit it to the database we're also going to use ejs as our template system and j/s ok J s will allow us to interact with MongoDB and that should be it so let's do - - save and that'll add it to add these to our package JSON file all right so now if we look at package Jason you can see that we have our dependencies all right so now we're going to create the server J s file okay this will be our main back-end server file so we're going to first bring in what we need to so we'll create a variable called Express and we'll set that to require Express all right that's just going to bring Express in from the node modules folder which is right here all right we also want to bring in our path module now path is a system module that's why we didn't have to install it separately and that'll just help us work with file system paths and stuff like that hence the name path okay we also want to bring in the body parser all right and now we're going to do we're going to have two files in a folder called route and one will be for index which will basically just be our index page our home page and then will be one will be tasks which will be the API that that we want to create so we can work with MongoDB so we're going to create a variable called index and set that to require and it's going to come from routes oops routes slash index all right and then I'm going to just copy that and then this one here will be tasks alright now let's create our main app variable we're going to set that to Express alright then we'll set up the view engine okay first of all we'll let the system know what folder we want to use for our views so say app dot set and we're going to set views then we need the path we're going to use the path module here say path dot join and then I'm going to pass in a double underscore do our name and then views okay so that's going to tell the system our views will be in the views folder now we need to specify the engine so we'll say app dot set view engine and we're going to tell it that we want to use ejs all right now we also want to be able to render files with an HTML extension so we're going to say app dot engine oops app dot engine and then we'll pass in HTML and then we're just going to require ejs and we just want to do dot render file alright so that sets up the view engine now we're going to need a static folder and that's where we're going to put all the angular stuff alright so we'll say set static folder and for that we need to do app dot use and say Express dot static and then we're going to use the path join here again say do our name and specify the name of the folder we want and that'll be client okay so all the angular two stuff will go in the client folder next thing we'll do is the body parser middleware so say app dot use this is just standard middleware if you look at the body parts or documentation this is right from that we want to be able to parse Jason alright we also want body parser dot URL encoded and we're going to pass in here an object and say extended bolts okay so that's the body parts or middleware now we're going to do is create our route so app dot use and we want the slash which is just basically the homepage we want that to be associated with the index route okay so are the index route file which is up here alright and then for the tasks the URL will be slash API okay and then we'll put in here tasks okay so whenever we want to interact with the API will use that slash API now we want to do is just basically listen so we can run our server so app dot listen we want to put in the port we want which I'm actually going to put a variable up here and put the port in that so we'll set it to 3,000 all right actually no set it to all three 3,000 is good all right and then port will pass that in and then this also takes a callback function so we can do something after it connects and all I want to do is just do a console log and we'll just say server started on ports and then we'll just concatenate that port variable alright so that should do it for our server let's save it and if we go ahead and run a node server oops what's this cannot find module routes index oh we have we need to create the routes folder and these files I didn't even think of that so let's create a folder and we're going to call that route and it's going to have a file called index dot JSON okay let's start with the index and this file is going to be pretty short we're going to just bring in Express and then we want to use the Express router so we're going to save our router equals Express dot rotor alright and then we want to set our route for the home page so router dot get because it's going to it's going to accept a get request and it's going to be just slash alright and then that'll take a function and these Ralph callback functions will take a request response and next and all we're going to do right now is say res dot send and we'll just say index index page okay then we just need to export this so that we can access it from other files and we want to explore it the router alright and I'm just going to copy everything here save it and then we'll add that to tasks as well and then for right now just going to change this to tasks or tasks API and just change this right here to tasks alright so we'll save that now we're going to get an error still because we don't we don't it's going to look for the views folder and we'd haven't created that yet so let's go ahead and create that and inside views we're just going to create a file called index.html all right and I'll get to that in a second I just want to make sure that this will run so node server you can see it says service started on port 3000 and if I go to localhost 3000 we get our index page if I go to slash API slash tasks we get that tasks API alright all we're doing right now is this root res dot sin which just sends this whatever we put in here to the browser all right now ultimately with the index we want to display our route our template so what I'm going to do is change this to res dot render and then just pass in here index dot HTML alright and then inside index.html we'll just create some HTML tags and actually let's put a doctype alright and then in our HTML tags we'll put a head and put a title body all right so let's save that and we need we're going to need to restart the server because right now if I go we're still going to get that index page so let's ctrl C and then restart it and now if we reload we get our index.html file now this can be kind of a pain to have to keep reloading the server like this so I would suggest using something called node Mon and you can install that globally so that you can run it from anywhere so to do that we can say NPM install - G make sure you use that to make it global and then node Mon and that will just monitor your your server and update whenever you make any changes all right so now instead of node server we're going to just run node Mon alright you'll see it's it's watching so now if I were to let's say add an exclamation mark and save it without reloading the server you can see that it actually does update all right so now that we have our Express server up and running what we want to do is start to use j/s to interact with our database now we I haven't created the database yet so I'm going to go to my M lab and just log in alright go ahead and create an account if you don't have one and then we're going to say create new and we're going to leave the Amazon Web Services as the default cloud provider and then if we click on single node and then check the sandbox account that's the free account and then for the database name I think it has to be unique I'm just going to say my task list Brad you can call it whatever you'd like okay so that should turn to a check there we go so that means it's setup now if we click on that you should see a page like this and what you want to do first is add a user okay so if we go to users and we click Add database user just going to put my name and for all for the username and password and then create okay so now you can see we have a user and then if we go to collections I'm going to click add collection and we're going to create a collection called tasks all right and if we click on tasks we can now add a document we can add data from here so let's go ahead and add a simple task it'll have a title hope you guys can see that okay so we'll say walk the dog okay so it's going to just have a title and it's also going to have is is done okay we're going to hit call it is done and that's going to be set to false all right so if we go create and go back let's see why am I getting an error all right forgot the comma all right so now you'll see that we have the title we have the is done and it also gives us this underscore ID which is equal to a unique object ID so we don't have to worry about that all right now let's create a couple more okay title and we'll just say go food shopping is done false okay so that got added let's add one more title oops say go out to dinner is done is false alright so now we have a couple tasks to work with so let's go back to our application and now we're going to go into route tasks j/s this is the main API that we'll be creating so we want to bring in J s so say var J s and require ok then we want to create a database object we're going to set that to J s and then here's where we want to pass in our database information so if we go back to M lab and go to back to our database landing page here and you can see we have a way to connect to the de shell and a way to connect using a driver so we want this one with the driver and yours will be different so just grab that paste that in there and then we need to replace the DB user here with your the date the username you created as well as the password alright and then at the end here we're going to add another parameter and this is an array of the collections you want to use okay and the only collection we have that we want to use is tasks all right and now we should be able to work with this DB variable so instead of this res dot sin let's get that out of there and we'll say DB dot tasks dot find all right now inside find we're going to put a function and that will take an error and Docs or actually let's call it tasks it's more descriptive and we'll check for an error so if there is in fact an error we're just going to do res dot send sorry about that and then we'll send the error if there's not then we're just going to we're going to return the JSON content so I'm going to say res day tsin and then just pass in the tasks all right so let's save that and hopefully this works let's go ahead and go to slash API slash tasks and there they are so we're returning the JSON content for those tasks that we created alright so that takes care of that now we also want to be able to get a single task all right let me just add a comment here this will get all tasks we also want to get single tasks why is it doing it all right so what I'm going to do is just copy this whole thing and we're going to say router get this time I'm going to say task slash colon ID which is basically a parameter or just kind of a placeholder because the ID is going to be dynamic it's going to be different every time all right and then we're going to say DB tasks and then we can use this find one and then before the function we'll have an opera meter and that's going to be basically the condition so we want to say where underscore ID is equal to the ID that's passed now since it's an object ID that's stored in the database we have to run it through this j/s dot object ID and then pass in the ID that's passed in the URL and to get that we need to use request dot params ID all right and then we're just going to change this tasks to singular tasks and change it right here as well all right and that should get us a single task so let's save it and then what we'll do is grab let's say that go out to dinner ID and in the URL will say API slash task slash and then paste in that ID and you can see it's going to return just that one task all right so so far so good now we want to be able to save tasks as well all right so for that we're going to need to do a post request or handle a post request okay so what we'll do is we'll say router dot post okay instead of get and the URL will be slash tasks all right then do a function going to take the same thing request to response next and we're going to get the the task from a form so we'll create a variable called task and we'll set that to request dot body ok that's how we can get it from the form and then we're going to do just a very simple validation we'll say if not task dot title or task dot is done and then we're just going to concatenate just a blank string there all right and then we're going to just send a 400 status so it's going to be an error so res dot status 400 all right and then we'll also just send some JSON which will be an object and it will just have an error and we'll just say bad data all right so that's if there's an error and then we're going to do an else right here and then that means that everything went ok with the form so now we can proceed to do DB tasks dot save all right and inside here we'll pass in the tasks and then our function okay that function will take in an error and task and we'll check for the error we'll do the same thing we did up here just grab that and paste that in all right now we could test this using some kind of program that will let us make HTTP requests so curl or something like that but I'm just going to hold off for now and we'll test it when we get to the angular application all right so that's to save a task now to delete a task let's do that and I'm just going to copy I'm going to copy this because it's kind of similar alright so delete task let's paste that in this is going to be router dot delete now it's going to have this same you I'll now even though we have task ID here we can still have it here because it's a different type of request it's a delete request that's a get request all right and then we're going to have DB tasks dot remove and same thing we're going to pass in the ID and the rest should be the same I believe yeah that's fine all right so that's a delete delete task and finally we'll do the update all right so for this let's grab I'll just copy this alright so this here is going to be a put request so put pertains to when you're updating data that's already on the server and then what we'll do down here is get the information from the form so our task is going to be equal to request dot body we're also going to create a variable called UPD task which will represent the updated task which I'll set to just an empty object for now and then we're just going to do some I guess validation I'm going to say if task dot is done then we're going to set that update task dot is done set that to task dot is done all right and then same with the title copy that so task dot title and then down here we'll set this title to task title all right and then let's check for the actual object so I'm going to say if not updated task then we're going to send a response a status of 400 and then we'll just send that res dot Jason and we'll send an error and we'll just say bad data all right so let's put an else here okay this is where we'll do our query I'm just going to copy what we have right here our cut what we have there and paste it inside the else all right now I'm going to change remove to update okay so updates going to take in the condition which we're going to match the ID and then after that we're going to put a parameter we're going to put our updated task object and then another one which will just be an empty and empty object and then of course our function alright and then all this down here can stay the same check for the error and then just spit out the task in JSON format so let's save that alright so again we're not going to test this the delete and the update right now we'll do that when we get to angular all right so everything should still work we shouldn't get any errors or anything like that good so I think our back end is complete we now have an HTTP now have a restful api so now it's time to work on the front end on the angular part of the application so we need to create our client folder okay so let's go ahead and do that and we're going to basically just follow along with the with the documentation if we go to angular do and then get started and we scroll down to this area here there's four main config files we need to create okay so first we have package JSON so we're going to just copy that code and inside client let's create a file called package dot jason and we're just going to paste that in change the name here to my task list and that's all we're going to do the rest is just all with its angular and all of its dependencies alright so let's save that next one is TS config JSON which is the typescript config file let's create that client okay paste that in basically telling the system we want to compile to es5 and we want to use the common je s modules okay this one is typing Jason this is just the Taipings that angular needs gates that save it and then system J s config we're going to copy that and then I'm going to create system j s config and then just paste that in alright so you can close those up and now what we need to do is we need to run npm install but from the client folder alright so i'm actually going to open up another command line alright and we're going to navigate to that folder okay and then we want to go to client and then run npm install alright so now we want to do is create inside the client create our app folder and now we're just building an angular 2 app okay there's a really no difference whether we're using whether it's a mean app or not okay so let's create inside app if we go to the documentation here we need to create a file called app dot module dot TS ok so inside the app folder we're going to create that file app dot module dot TS and we'll just grab what's here alright and basically we're just implementing ng module which basically helps organize our code alright this file here whenever we create a component we have to import it in here and then add it to ng module ok so the next file we want is app component TS so let's create that every every angular 2 application has a core app component so let's grab that code and this is just standard component code we import the component package and then we add this component decorator with a selector in this case is my app and then a template which in this case is just a string with an h1 and then a class alright so save that and then we have to import that into app module ts ok so we'll say import app component from app dot component okay now we have to add this we have to actually create two new arrays here we're going to have declarations and also bootstrap alright and you can see that if we go down here okay declarations in bootstrap we have to add app component to both of these okay and then the next one we want to create is main TS so let's create that main TS paste that in and this is basically just bootstrapping our our core app component so save that now remember we're using typescript with angular 2 so these need to be compiled into into regular JavaScript in order to run the application so what we'll do is inside the command line where we're in the client folder I'm just going to run NPM start and that should compile all of our TS you can see now there's a bunch of JavaScript files alright and then if we go to localhost 3,000 we get oh we shouldn't have that oh we didn't we didn't add the HTML code alright so let's go back to our documentation here and there's an HTML file here that we need to grab this is what loads everything and then we'll go into our HTML file which is in the views folder and replace that let's change the title okay and everything else should be good you can see that the custom tag here my app that actually goes along with the selector of app component es which is right here my app alright so let's make sure we save index.html and let's go and reload and there we go so the angular app is now running so if we open up the console now I'm getting an error because there is no style.css file and you can see it's looking for one here it's included so let's just create that will create that inside the client folder so new file Styles dot CSS and then that error should go away alright and gonna go ahead and just close everything else out here so we want to use bootstrap for our UI and there's a few ways we could set that up I'm going to use Bower which is a front-end package manager much like NPM is for node and for the the backend for the server so let's go ahead and go into our command line the one that's in the app root not in the client and I'm going to stop that and if you don't have Bower installed you just want to run NPM install - G Bower I already have it installed so I'm not going to run it but you run that it'll get installed globally and then you can use it to install packages now when we use Bower and we install a package like bootstrap I want it to go in a folder called Bower components inside the client folder so to make it do that inside the root we're going to create a new file and we're going to call it dot Bower RC all right and then we just need to put in an object here and we're going to say directory and we want the directory to be - client slash bower components oops alright actually we don't need that first slash so let's go ahead and save that and then we'll go back and we'll say bower install bootstrap and we'll add dash - save alright it'll also install jQuery because jQuery is actually a dependency for the bootstrap JavaScript and now you'll see in client we now have Bower components folder with bootstrap and jQuery so now we have to include it in the HTML so views index.html and we'll go right up here put in our link tag okay and then the path is going to be bower components slash bootstrap slash dist slash CSS slash bootstrap dot CSS all right let's save that and then I'm going to run let's run node server are you load and now you can see the fonts change so bootstrap is now being read so we're going to work on the the UI alright and in our angular application we're going to have a component called tasks so in the app folder we're going to create a folder called components I spell that right components yeah and inside there we're going to have a another folder called tasks now in this application we're only going to have the one task component but it's good to have it in a separate folder just so just in case you want to add more later on so inside tasks let's create a file called tasks component dot TS and also a file called tasks component dot HTML that'll be that'll be the template all right so let's go to the TS file and we're actually going to copy what we have an app component TS okay then we'll paste it in there and then we'll change the selector to tasks and change template to template URL and then change that to app sorry not app tasks dot component dot HTML alright then we'll change the class two tasks component so save that inside task component HTML for now we're just going to put in the word tasks alright now in order to use this we have to import it into app module TS so let's go ahead and do that god I'm having a hard time spelling component today so import tasks and pulling it from components / tasks tasks dot component and then we're going to add it to the declarations and save it alright and we should be able to use it so let's go into our app component es file and we'll go ahead and replace this with tasks save that let's see 404 not found oh you know what we can do here is inside the task component es at the top here we're going to add module ID and then module dot ID and save alright so now it works in order to use the relative path like this you have to add that at the top here are just somewhere within the decorator okay so you can see our task component is now showing now for the app component es I want to also use a separate file for the template so we'll say template URL and we'll grab that change it to app dot component dot HTML and also add the module ID save that and then let's create that file and paste in tasks and we should get the same thing alright and let's actually put this in a container say container alright and then let's put an h1 right here and we'll just say my task list and then we'll put an HR tag alright so now we want to do is go to our task component HTML and start to build that UI ok so first thing we're going to have is a form and let's see in this form let's give it a class of well and then we'll put it div with the class of form group these are just bootstrap classes all right and then we'll put an input give it a type of text and a class of form control and let's give it a placeholder and we'll just say add tasks all right and then below that we'll have a div with the class of task list all right now this is going to have three columns it'll have a checkbox then the task title and then the the delete button alright so for now we're just going to put some static stuff in here and then we'll go on to create the service and all that all right so let's create a class here our div with the class of call MD one this will be the the column for the checkbox because we want to be able to check them off and make them and mock off is done so in here would say input type equals checkbox okay then we'll have a class called call call MD let's do seven and then this will be the title so for now just say some tasks okay and then we're going to have call MD five for okay this will have a delete button let's make it an input we'll give it a type button a value of delete and a class of BTN BTN danger alright so let's take a look at that and it looks pretty good okay so now that we have the the basic UI we need to create our service to interact with our API that we created alright when you're using angular services used to do stuff like like communicate with an API because you want that available across all your components if we had multiple components we don't want to write the same code in each one we want to create a service that will send it across them all alright so in the app folder we're going to create another folder called services and now let's create a file and we'll call this task dot service dot TS and we're going to import a couple things here ok so we want a package called injectable because we want to be able to inject this service as a dependency ok and that's going to be from angular slash core we're also going to use the HTTP module to make requests to our API so we want to include HTTP as well as headers which will allow us to manipulate the headers and those are going to be from angular slash HTTP all right we're also going to be using observables we want to get our requests and then send the data as an observable so we want to use the map operator so we're going to say import rxjs which is reactive ik reactive extensions for JavaScript slash add slash operator slash map all right and then to use the injectable we need to add the decorator and then we're going to create our class and it's going to be called tasks service all right and then let's create a constructor and since we're using the HTTP module we have to inject that into the constructor so say private HTTP set that to HTTP all right and then let's just do a console dot log and we'll say task service initialized and save it now to be able to use this service we're going to go into let's see we're going to go into our app component TS and we're going to import it so let's say imports task service from services slash task dot service and then we have to add that as a provider so we're going to go down here and say providers inside brackets will just add tasks service alright so we'll save that now since we're using the HTTP module we have to actually bring that into app module TS so this is kind of a like a meeting file for all the different components you have in all the modules so import HTTP module that's going to be from angular slash HTTP and then we're going to add that to the imports array right here like that all right now if we reload the application we're still not seeing that the services initialize that's because we have to inject it and we're going to inject it into our task component all right so we need to import that here as well okay so we're going to go dot dot slash dot dot slash services task dot service okay and then we're going to add a constructor and we need to inject it here so we'll say private tasks service set of two tasks service all right so if we save that reload now you can see that it's been initialized okay so we can now use it now we want to fetch the tasks from our API so let's go back into the service and we're going to create a function here called get tasks and it's going to be really simple we're going to return and then we're going to use this dot HTTP GET okay we want to make a get request to our API which is at HTTP localhost port 3000 slash API slash tasks all right and we want to return it as an observable and we're going to just add the map the map operator here and then say the response we want to change to res dot jason okay we want to return it as jason so we'll save that go back into our task component and inside the constructor we're going to say this dot tasks service dot get tasks which is what we just created and since this is an observable we need to subscribe to it alright and then in here we'll say tasks and for now it's just console dot log tasks all right let's see what that gives us all right so now down here you can see we're getting these objects and if we look at them they're the tasks from our API all right so we're successfully getting them now what we want to do is add them as a property in our component so let's add up here we'll say tasks and I'm going to set that to the type of task which isn't created yet that's why you see the red line now you could just set this to whatever just an array but I like to set I like to create kind of a a model for our properties so what we'll do is let's create a file not in the app folder outside of the app folder but it's still in the client folder called task dot TS all right and then all we're going to do is export a class called task which will have a title which will be a string and also is done which will be a boolean all right and then we're just going to import that into our task component okay that'll be dot dot slash let's see three times and then task alright so now you can see that red lines gone now what we want to do is instead of console logging we're going to set this dot tasks equal to that task that's coming in from the observable and then we'll have access to them inside of our HTML file alright so we'll go back in there and since this is an array of objects we're going to use ng four to loop through them so let's go right here and we'll say div asterisk ng four and we'll say let tasks or let tasks of tasks and we'll put the ending div down here and now we should have access to each tasks so right here we'll put in our double curly brace and say task dot title and save alright so now we're pulling them into our list so now that we're just playing our tasks we want to be able to add to them alright so we have our form here so what we'll do is in the form tag we want a submit event so we're going to say submit equals and it's going to equal attack a function called add task and we're also going to pass along the event object alright now for the title here we're going to set this is going to be its own property so we're going to set an NG model and we're going to set it to title and then we also need a name attribute set to the same thing title alright now if I save that I think we're going to get an error if I reload okay and we're getting an error because in the latest version of angular 2 you need to create you need to include forms module if you're going to use ng model so we need to go back to app module TS and just go ahead and import that okay that'll be from angular slash forms and then we just need to include it right here okay save that and now that error is gone all right so we added the ng model now let's go back to our component and let's see we want to add right here title and set that to string and then let's go down and create our add task which takes in an event and so let's say event dot prevent default just so it doesn't actually submit and let's do a console log and we'll say this dot title okay so now if we go back and reload and I type in something and I submit click enter you see we're getting something so we know that we're submitting the form we know that we can grab the title now we want to do is create a new object for our tasks that we want to submit so we'll call this new task set it to an object with a title of this title which is whatever we type in and then also is done which we want to set to false initially alright and then what we want to do is we need to have a service function that's going to submit it to the database okay I mean I could you know I could do say this dot tasks dot push and then pass in the new task and you'll see if I go and type something in and submit it it's going to show up here but if I reload it's gone because it's not persisting to the database or to the API so we have to do that so let's do this dot task service dot add task and I know we haven't created that yet but we will and then pass in new task ok and it's going to be an observable so we're going to do dot subscribe and then in here we'll do tasks and then we can do our this dot task dot push and pass in that new tasks are not the new task with the task we get back and then we'll simply clear the form by saying this dot title equals nothing alright so we'll save that let's go to our service and then we're going to say add task and that's going to take in that new task object ok now we're using the HTTP module and we need to set our headers so we're going to say var headers equals new headers and that should be an uppercase H right here alright and then we'll say headers dot pend and we're going to pass in here content type ok content type we want to be application slash Jason all right and then we're going to return this dot HTTP dot post okay it's a post request and it's going to go to HTTP localhost 3000 slash tasks all right now the next parameter is going to be that new task but we want to send it as a string so we're going to wrap it in json dot stringify all right and then the next parameter will be an object with the headers okay and we want to map it so dot map res to res dot jason and that should do it save it okay so now let's just say my new task and enter and we're getting an error here oh let's you go to slash API slash task huh uncle ho's 3000 api / task let's see what am I doing wrong here it might not even be on this side yeah let's just check out the EPI so if we go to routes tasks okay we have router dot post going to task hmm so we're getting a 400 so if not task title all right you know what let's see what it is we're actually sending so in our service let's do a console dot log and I'm not going to cut this out just so you guys can kind of follow along alright so console log it alright so we're getting title test is done fault so that's correct that's what we want to send hmm headers oh there should be an exclamation mark right here let's try that no it's still not working alright guys I'm going to pause the video for a second and I'll be right back alright yes it just restarted the server and it worked so I don't know if you guys are having that problem just try to restart the server and this is correct okay and make sure you have that exclamation mark there alright so we're going to move on now that we can add tasks and I'll just add another one just to prove it say pick up kids at school okay so we can add it and I'm just going to add a little CSS style just to I don't like how these buttons are so close actually not CSS let's just add in the HTML we'll just put a line break right there or two there we go okay so we can read we can add to it now we want to be able to delete these as well so let's do that we have the delete button right here so what we want to do is add a click event so parentheses click okay we're going to set this to delete tasks and all we need is the ID so we'll pass in task dot underscore ID all right we'll save that and then let's go into our component TS say delete task it's going to take in an ID oops not a TD and ID okay and then we're going to create a variable called tasks and set it to the current tasks all right and then we're going to call a service function so tasks service dot delete task which we will create and then that's going to take in the ID and it's observable so I'm going to subscribe and inside subscribe will say data alright and then we're going to say if data dot n is equal to 1 and what we want to do is loop through we want to loop through the task and then find the one that matches that ID and then splice it out of the array alright so we'll do a for loop so 4 will say VAR i is equal to 0 and then as long as I is less than tasks dot length okay we want a I plus plus 2 increment by 1 and then let's do an if statement to check the IDs so we'll say if tasks I which is the current iteration dot underscore ID is equal to the ID that's passed in then we know that's the one to delete so we'll say tasks dot splice and pass in the iteration variable and then one all right so let's save that and then we need to create that function on the service delete tasks okay which takes in an ID and that should actually be singular delete tasks okay we're going to return this dot HTTP this is going to be a delete request so we're going to say delete and say HTTP actually know what we're using this localhost 3000 and we shouldn't have to okay because we're on the same domain so let's get rid of that we'll just say slash API slash task slash and then we just want to concatenate here the ID all right and then we'll just map ok we'll map that back res res dot Jason okay let's try it out so test task let's say we want to get rid of that goes away reload and it stays gone alright so the last thing I want to do here is I want to be able to mark these off is done right now if I check them and I reload think that goes away all right so it's useless so let's go ahead and do that we're going to go to our HTML and go inside aware the input for the check box we're going to put some brackets and say checked I'm going to say checked if task dot is done all right and then this is also going to have a click event when it's clicked it's going to call a function called update status and then we're just going to pass in the tasks all right so let's save that go back to our component ts file and we want to create this update status function ok that's going to take in the task and let's create a variable will call this underscore task so we're basically just creating a new object to to update with so we'll set the I underscore ID to task dot on the score ID we'll set the title task dot title and is done to exclamation task dot is done all right and then after that we're going to call a service function task service dot update status pass in the underscore task object and subscribe okay and then here we'll say data and we're going to set task dot is done equal to exclamation task dot is done alright and that should do it for us so let's save it and then we need to create that service function okay passing tasks and I'm going to copy what we have right here with our headers and all this okay let's get rid of that console.log paste that in so this is going to stay the same and then we're going to say HTTP dot put that's going to go to API tasks and then the ID so we're going to just concatenate on here task dot underscore ID all right and then this new task let's change that to just task which is what's being passed in up here and then the rest of the stuff can stay the same all right so let's save that hopefully this works so let's say we went out to dinner let's check that off reload and it stays checked and you'll also notice if we go to M lab and we look at tasks and go out to dinner you'll see that is done is now set to true all right if I uncheck it reload now you'll see it's not set defaults but it's gone which is basically the same thing if I were to set it again it'll go back to true okay so that's it our task list application is done I apologize if this was too long or if any of it was confusing I know there was a lot to it but like I said if you know how to do it from scratch you have a much better much better handle on it than if you just use some pre-made mean j/s or something like that all right so that's it and again if you guys liked this check out the course that's in the description and please subscribe leave a like whatever you can do is fine and thanks for watching

Channel: Traversy Media

Views: 506,139

Keywords: MEAN app, MEAN stack, angular 2, angular 2 mongodb, angular 2 express, expressjs, MEAN tutorial

Id: PFP0oXNNveg

Length: 76min 42sec (4602 seconds)

Published: Sat Oct 01 2016

Reddit Comments

[u/mistajingsta]

Not bad. Watched the whole video. Been using mean with angular one and this is not bad to try to start understanding angular 2 now.