Build Your First ANGULAR Web app ~ Beginner Angular Todo app

what's going on everybody my name is tyler potts and in today's video we're going to be creating a our first angular application now it's going to be a to-do list i know angle to-do list blah blah blah everyone hates them but to do this a great way of learning the basics and concepts of a new framework language or anything like that so this is what we're going to do today so as you can see here we have a to-do list now you can add new to-do's like get or install angular right so here we go we've got a new to-do list we can take to-do lists off we can remove them once they're done as well or remove from when they're not done if you just want to get rid of them um we can take them off remove and obviously add new so we can do all the fancy features so let's just say um call to do bam we can hit enter or click the button here as well to add a new to do and there you go so that's what we're going to be building in today's video so first let me show you how you install angular okay everyone so we're now going to install angular so the first thing you might notice is um what is angular angular is a web framework just like view or react obviously it has its own way of doing things and it works quite a bit different to the both of them um so i'm going to show you that in today's video but before we install it we need to go over to node.js now you need to have node.js installed if you don't click download here run for the install it's super straightforward install it and come back to this video so let's hit get started now we need to get started again hit get started again and now here we are so let's go show you how you set up a local environment so all you need to do is copy this and put this into your uh cli so let's go over here let's open up a new terminal i'm just gonna open up a new one if it'll let me there we go i'll zoom in a little here and what i'm gonna do is just paste that in and hit enter i've already got this installed so it should only take a moment for me but it may take a little bit longer for you so i'll see you once this has installed okay guys as you can see that only took me six or basically seven seconds there because you know speed um let's close this let's cd out of this directory and let's create a new one so we've now installed angular which means we can use ng new which gonna allow us to create a new angular application so if i write ng new we can say first i'm going to say first to do or angular app we'll call it the first angular app working on now we hit enter this could start creating a new app but first it's going to ask do you want to enforce structure type checking blah blah blah on the workspace i'm just going to click no would you like to have rooting no we're not going to use rooting in this video so i'm going to click no it's going to ask us what we want to use again i'm just going to hit css and then i'm just going to let this run through the installer and it will start setting up our starter boilerplate for this application okay guys so now that is um done so now what i need to write in here is we need cd into the project nine so we're gonna say first angular app hit enter and now we're gonna be in there what we need to do next is to run well we can do two things first we need to open up in our code editor or whatever code edits you want so i'm going to do code dot which is going to open up official studio code for me secondly we're then going to run ng surf and you can do dash dash open for it to open directly in your browser now i'm not going to do that just because i already have it open and i'm just going to refresh once it's ready but you can also do if you did open it will open it straight up in your browser on whichever report is available so actually let's go through the file system while that's opening so let's just drag that up there all right so on the left here i'm going to zoom in just a little boop um you can see unless we have a different folders now the main ones you really need to look into is the source file and in the source file you mainly want to only look into styles and we're going to add a few styles quickly so i'm just going to quickly say margin 0 padding 0. these are just going to be some basic resets that we can use throughout the whole project we'll say box sizing border box and then a font family of sans serif so it's not you know serif and that's all we're gonna do in this style so you can add all your global styles to this style sheet and they will implement across the whole app you can also add in component css but we'll go over that in a second so let's just close this so now we've opened app and as you can see here we have app.component.css app.component.html and app.spec.ts that's to do with testing we don't actually need that for this video so i'm just going to delete it so this app is going to be our main component but first let's go over the index.html so in the index it's basically our our html this is where everything will be rendered too we don't need to touch this file other than renaming our title for example so let's just say first angular app and there you go that's going to be left here but if you come down here you can see it's got a load of things you can import um obviously your fonts or whatever you want to do in here as well and actually they're saying weird and unusual in this um area it's called the app root now this is like this how angular injects its code into the dom so what's going to do it's going to anything we built inside of our app module here it's going to be put inside the app root so let's head over to our app module ts so this is where everything gets declared um and what happened to it so you might see this this is a bit weird and i might not have said this already but angular uses typescript now typescript is just javascript with a little enhancement it allows it to be stricter it allows you to do uh typing as the name suggests um it allows you to do data types um properly so like strings numbers and stuff like it basically gives you a much stricter way of working in this thing you can see we've got declarations which are our components all our components will go in here which means we're able to use our components where we need to in our app we then get imports which is going to be our module so you import all your modules here you can see there is the core which is being brought in which is just actually being used here and then the browser module which is 4d platform which you can see is browser okay so we've got the imports and declarations and the app module here now we need let this is all we need in this file for now when we create new components and stuff they'll be automatically injected in here because ty uh not typescript uh angular has a special way of working with components you actually use the cli to create new components and we'll go over that in a minute now inside of our app.html here you can see ignore all these comments they just add it all in but there's all the boilerplate stuff that um angular have when you first set up so you can see it's just a bunch of different things i'm just going to close this sidebar while we're looking here so you see we've just got a bunch of stuff and if we go back to our app here you'll see let's just bring this out you'll see we're actually able to see what is generated and you can see the commands for new components here so a new component is ng generate component you can also do ng g c and then component name angular material pwa support if you want to add some pwas for build for production you see run ng build prod and it'll build it ready for production to deploy and you've got a bunch more stuff here as well so that's really cool so this is what we first get um oh i accidentally just click on learn angular um but yeah so that's that's cool but let's string that back down and let's go into our app and let's in this app component let's just highlight everything and delete it let's create an app wrapper now in here let's just say something along the lines of hello and if we go back you can see we get hello and that's fine now let's go back again now in here let's open up the sidebar again and you can see we've got this app.component.ts now this is where we do our script so think of this as s if you're a few jets or if it's a wrecked person you know it's all in one file so for components they split off into three different areas they split off into html css and javascript which also is typescript and we're able to from this we get we get basically our free elements we've got javascript css and html the three core things that make up the web how this compares to the other frameworks such as react and few obviously if you don't know react or few and just ignore what i'm about to say but basically in view we have our template which is our html we have our script which is the component here and we have our style which is the css here and you can use this in a similar way so it's just split off in different areas and it looks slightly different especially in this department here so that's fine so you can do stuff like that so let's start creating our first new component so let's actually start working on our app here so inside of our main html component app we need to actually set up some things so let's create a header and in this header we'll just have a h1 that says to do list right so let's go back oh wrong way wait no that was the right way no one it's this way we've got our to-do list right here let's just minimize that as well so we don't see that we've got to do list title coming in there now underneath here we could have our to-do's here so we could say dot to do's but let's put this whole do section in a new component because obviously this is a component based system we want to create a component so i'm going to open up my integrated cli by pressing control alt t and that's brought up the terminal i don't know how you do it on windows so please don't ask me now in here what we need to run is ng generate or just g and then we can write component or just c and then we need to give our component a name and a directory so we're going to create a directory called components forward slash and then the name of our component which is going to be to-do's now if we hit enter this could create a whole new file inside of that app or folder sorry and a new set of files and also it comes with the test again which is the spec again we don't need that right now so we'll just go delete that off here and let's close this now we don't need that open so you see we've got our to-do's all added in we've now got a simple um to do component html with its thing here and now you need to pay attention to this selector so this selector app to do's now this is how we use the component in other components and then obviously we've got our plain css so let's go back to our app.component and let's just write in app hyphen to do's and hit tab if it will let me there you go and now we hit save and we go back to offing you can see to do's work which is inside of our to-do's component html we can change this to say let's say just to do's and go back and say it says just to do's and that's that's all you need to do to actually create a new component as you can see it's quite straightforward a little bit more different a little bit more complex from a react or um fuji s but it's not it's it's it the reason it does this is so you don't have to go everywhere else the reason you use the cli so it adds it in automatically so as you can see in our app.module it adds it to our to-do stock component and it adds it to our declaration here so we can use it inside of our app so you can see here we're bootstrapping our app component which is going to inject this into our main html and that's where i think it's coming from so our main component is the app component which we're calling here so let's close this sidebar again and go back to our to do's component so we've got to do's and in here we're going to need a few things so let's create let's actually delete i think and just say to do so we'll create a to-do list let's create a enough of this we're going to have in here a to do a singular to do and in that we're going to have an id it's not a good idea it's just going to be the index we'll put a 0 for now but i'm going to have content which will be let's say my to do which would be obviously a to do and then we're going to have a button that has the class off delete which will save remove which will delete the to do from the app so if we go back you can see that's displaying here so that's fine but we're going to need to loop through a bunch of uh to-do's so let's go into our component here and let's create a array we can actually loop through so obviously we can't loop through anything and you might see this slightly different what the generated one compared to the uh pre-built one over here now this one is slightly different because it comes it comes it derives from or implements the on init which is kind of like a lifestyle mess method but inside of things so this is what happens when it's initialized so we can run things in here we can also use its um templating engine by just saying let's say we create a title here call it to do's in here and now we go back into our to-do's convert html we can put up the top here we can put two curly braces and just say title so we just gotta match what we wrote inside of our class here go back to our app and you can see it says to do's now let's say we change this to not to do's hit save you can see it changed to not to do so that's how you inject your uh variables into your dom by using the templating strings just like how few does and i apologize if i keep comparing it to few or react it's because most people know those if you don't know those then just ignore me and just think of this as a completely new experience to you um so inside so let's just remove this tile because we don't need the title right now but inside this component we will need to add a new to do we need an array of to-do's so let's create to-do's and now we can just say equals an array but we want let's make this a bit more strict and let's make it so we have a model to follow so you have to follow a certain guideline when creating these to-do's so what we need to do is on the open up our integrated terminal okay sorry not open our integrated journal right click on app create a new folder and call it models now inside of our models we want to right click and create a to do dot ts now in here all we want to do is say export class to do and we can give it the parameters we want so we want a content which is going to be the string and we want completed which is going to be a boolean so this is true or false and this string is obviously what the content of the um to do is so now what we can do is import this in our to do's component let's minimize this side again and i'll zoom in a little let's just say import to do from and now we've got a dot back dot dot back dot dot back models forward slash to do so we have to uh go back out of couple of directories but then we go into our models and into our to-do and we get our to-do's now what we can do is instead of writing this we can say to-do's to do and then to make it an array we just give it an array bracket there and that's all we do now we've got an array of two dudes or an empty array of to-do's so let's actually add some stuff to this so inside of our ng on it ng init sorry on init we're going to say this dot to do so we have to use the this keyword to get variables from inside of our classes and then we're going to use an array and inside the array we're just going to pass through some things now you can see it's red already now this just means it does not match our model so we created to do model and we need to now pass through content and completed into our array for every single item so let's do our first one content oh content now in here we're just going to say first to do then it's still going to error because we need our second which is completed which needs to be false now as you can see the red line has gone but if we create another one we will get a red line again so let's create another one and we'll just call this second to do and we'll have the completed value of true and there you go so now we have a to do's array which is really cool but now we need to actually export this and show that or not export to show this on our uh our front end here so we need to loop through this so we've complete currently just got this to do we can use a um a function or a attribute called asterix ng 4 equals and this is like a if you use few or reactors like a v4 or just mapping through something in side of react so in here we're just going to say let to do off to do's and then we're going to get the index by saying let i equal index and now we're going to that this is going to loop through every single to do we have it's going to loop through so you see we've got two to-do's but they don't have the content we need to do that we need to go in here and we need to pass through index here but in the template strings and then this one we need to say to do dot content content and perfect so if we save sorry this shouldn't be indexed this should be i here and if we go back you can see we get first to do second to do with the correct index let's quickly add some styling to this so if we go back to our sidebar here and go into our to do's component css we're able to add in some styling now i'm going to copy and paste the styling in i'm just going to show you it on screen now you can see we've got our to-do it's just a flex size our to-do which reflects item that has some different variables i'll scroll through it slowly so you can see everything pause it if you need to um or you can get this from a git repo which is in the description below if you want to just go and download it there you go so that's now in so if we go back you can see it's now styled and looks a bit nicer now if we go into our app.component here sorry now book burn our to do start component here now we need to start actually coming up with some methods now methods are just functions inside of a class and what we need to do with those is to be able to for example delete ads and remove um items so let's start with ticking off an item so the first thing we want to do is go up to our class here we're going to cut it out we're going to move it to the end and then we're going to use template strings inside of here to just say to do inside of parentheses dot completed if it's completed we're going to give the class of done else we're going to pass through an empty string now if we go back to our front end you'll see this is now stroke through now the reason for that is obviously in our styling when we have to do dot done dot content we basically put a line through it which makes it look like it is done so if we go back to our ts component here let's close this click on the components here and let's just set this back to false go back to our app wrong way you can see it's now no longer struck through so what we need to do is actually be able to when we click this it will strike it through to do that we need to create a new method as i said before so down here underneath ng on init we're going to run a new method and this one's going to be called toggle done and we don't need a declare function or anything like that it knows how to call it a method like this now we can however say we want this toggle to return fight or we can just leave it as knowing void basically means it returns nothing you can also say it returns a number or a string but if you do that it means you would have to run return and pass through whatever value it's asking for ignore that spell return wrong let's just remove that because we don't need that here we can return anything which is going to be foid so in this we just need to say this well we actually have to pass through the id or the index we're using for this and we're going to say to do's dot map and we need to get the value and the index loop through this and we're just going to say if i is equal to id so if our index is same to the index we pass through we're going to say feed dot completed is equal to not v dot completed we're then going to return fee so all we're doing here is we're looping through all our to-do's and checking if our id matches the id we part or where it's index matches the id which will be the index we pass through and if it is we're just going to sell it to complete it so how do we call this now we call this by going into to do stock component going on our content and to call a click event we don't just do on click like you would in normal html we do we put parentheses we say click or you can also do submit or many are for different ones here so we're just going to say click we could give our event name and then we pass through the name of our thing which is toggle done but in here we're going to pass through i which is our index we've created up here now if we hit save and we go back to our app and we click you can see we mark them as done we can toggle them as done or not done there you go so that is how you toggle on and off and how you use a clicker fan in angular now let's actually add the delete method in so back to our to do's component underneath our toggle done we'll call delete to do we're going to pass through the id again which is actually the index obviously normally you'd have a database that'll be bringing back a in id and not an index but for this example we're just going to use an id so to do this we're going to use the array filter method so we're just going to say this dot to do's is equal to this dot to do's dot filter and what we're going to do is we're going to get the value and the i which is the index and we're just going to say if id or if i is not equal to id then we're not going to return it we're going to return everything that's not equal to the id which means we're going to remove the delete to do and also to make this a bit more use friendly what we're going to be part the id we pass through has to be a number we're going to do the same for up here this way we make it strict and if we try and pass a string it'll throw an error to say hey you're doing this wrong it just needs to be a number because we're only going to accept numbers through this thing and this is a typescript not an angular thing a typescript attribute so now we've got delete to do so what we need to do is go back into our to do's component on our delete function we need to do exactly the same as what we did for our content but we're just going to say content click is equal to or delete click it's equal to delete to do and we're going to pass through i hit save go back to our app and now let's say if we remove one you can see it gets deleted and we can move second now if we refresh we can move them in any order we want they will always remove the correct one because we're using the index for this case um so let's now add a to do so we've got everything we've got our toggle in and are removing but we don't have our adding which is probably the most important part of a whole to-do list you know you need to be able to add new ones so at the top here let's create a new element we're going to create a form and in this form we don't need an action we're going to create an input it's going to be a type of text and we're going to break this down onto different each attribute is going to be on a different line just to make it look cleaner we're going to give this a name so it needs to have a name and it's going to be input to do we then need to placeholders just so you can see the text we're writing so we say enter to do dot we then are going to use a class which is going to be equal to to do input and finally we're going to use the ng model now this is how we do two-way data binding in angular so we've got to use square braces parentheses and say ng model it's equal to and then we need to assign it to a variable or a data attribute inside a file component here which we're going to name input to do now this is going to be red the reason it's red is because we haven't actually set up our ng model now i'm going to show you how to do that first but first we need to get input to do inside of here so let's scroll to the top and underneath our to do so we're just going to say input to do is equal to or in this case a string is equal to an empty string so this is just going to get our value and we go back to our components you can see it's still red the reason being is because we're not pulling through our ng model so let's go to our sidebar and inside our app module we need to import a new module so we're going to say import ng model same as that sorry not ng model my bad i was just copying what was the buff there and i didn't actually think about what i was doing was saying forms module from at angular forward slash forms oh and that's all we need to do now in there we need to copy this and we need to actually pull it in our import so it actually uses that element and now if we go back to our thing you can see it's no longer causing any issues there's no red lines there's nothing like that it's now working so if we go back you can see we've got our enter to do here we need we now need to add a button below that as well so we're just going to say input type submit dots and the name for this is going to be to do submit maybe and the value is uh add to do save go back and there you go we've got our button so that's all good that's looking good everything's looking good but we now need to actually submit the form so let's go back to our to do's component here we now need to create a new function called add to do so we're going to say add to do we're not going to pass anything through this and we're not going to return anything from ad to do what we're going to do is we're going to say this dot to do's so we're going to do and then we're just going to push a new array or a new object sorry onto this item and all we're going to say is the content is equal to this dot input to do so the inputs do we bind it up here we're going to get that and it's red again because obviously we need to match it to our to-do model and in here we're just going to put completed false and there you go last i'll go show you one thing after this so let's just go back and see if this works it won't work because what we need to do is go to our contours component html and we need to actually bind this a submit handler which is going to have add to do so now when we submit that form let's just put in a name here say test submit you can see it adds it but one thing is this is still here it still says test it didn't remove it so we're going to end up adding the same one multiple times over so let's go back here what have we done wrong what we need to do is just clear the input to do so what we're just going to say is after we've pushed it we're just going to say this dot input to do is equal to an empty string again so if we go back you can now see enter to do let's say hello enter and you can see it clears it completely and we've got a new to do now we can remove old ones we can tick them off and we can remove them so let's just add one more this is your list to do guys don't forget to subscribe like comment and share the end is the most important one there don't forget the end uh let's remove them all bam there you go so as you can see guys this is our first angular application we've ever built it's pretty cool angular is i hate on it a lot i don't think it's as good as few or javascript or react but i do think it has some value and a lot of people do prefer working like this it's a very it's a much stricter environment and you have and when you work to things you have to make sure everything is in the right place you have to make sure you're importing the right things and obviously you obviously it's using typescript so it's just a lot stricter by nature typescript is great um and so is angular of course but i personally prefer few and react but i'm going to be doing if you guys liked this tutorial i'm going to be doing more angular in the future as well but anyway guys thank you for watching this video i hope you enjoyed if you did don't forget to leave a like thumbs up subscribe and i will see you in the next video guys thank you very much and peace out [Music] you

Channel: Tyler Potts

Views: 46,490

Keywords: webdev, javascript, javascript wizard, wizard, css, sass, scss, js, website development, website design, app dev, app, app design, app development, mobile app, web developer, app developer, developer, programmer, angular, angularjs, angular 11, google

Id: i7KaVFOXNUQ

Length: 30min 29sec (1829 seconds)

Published: Thu Dec 17 2020

Reddit Comments

[u/TD_Maokli]

Great tutorial, from a non beginner point of view, I would say you explained a lot parts in a beginner friendly way, your voice is also clear, however i think for a todo list to make sense you should probably store the data somewhere instead of initializing it every time the app restarts, so you could've tackled browser caching aswell