How to Setup and Run Angular App in Visual Studio Code 2024 | Download and Install angular VS Code

hey everyone in this video I'll be showing you  how to set up and run your first angular project   in Visual Studio code so I'll be showing you the  entire procedure from downloading and installing   nodejs which is required to run angular as well  as downloading Visual Studio code and also how   to set up and run it there so let's get started so  just go to Google and type download nodejs you'll   be getting the first link over here as nodejs.org  just click it and here will be having the windows   installer if you're using Mac you can use that  particular one I will go with Windows I'll just   click it so it will get started and it is about  30 MB in size so it will just take a few seconds   yeah so once it is downloaded just click it and  open when done so you'll be getting the nodejs   setup over here the dialog box just click on next  and just click on I accept you can just like read   it through and again click next and this is  a default location where nodejs is going to   get installed if you want you can change it I  will like keep with the default one and I will   click next so these are some of the things that  will be like automatically installed so you can   just like leave it to default and just click on  next yeah so this is fine just click next again   and click on install so once the installation  is complete just click on finish and if you just   go and search for nodejs you'll be having this  nodejs app so once you're done installing nodejs   we need to add nodejs path to the environment  variable so just search for node.js you'll be   getting this nodejs app and here you'll be having  option called as open file location just click it   and you'll be having the programs and here you'll  be having nodejs again right click it and go to   open file location so you'll be getting the path  where you have installed nodejs which is local   disk C program files and nodejs just click here  and copy this whole path and after copying just   go to search again and type environment you'll be  having there edit the system environment variables   option just click on open and in this you'll  be having this environment variables click it   and under system variables you'll be having path  just click on path and then click on edit and here   you can see right C program files nodejs has been  automatically added so if it isn't automatically   added you just click on new and paste this path  and click on okay so just check if this path has   been added already okay so once you're done adding  this path close everything and just go to search   and open command prompt so I will just zoom in a  bit so type node -V so here you can see we will be   getting the node version here this means that we  have successfully installed nodejs also type npm   hyphen V yeah so we will be also having the npm  node package manager which allows us to install   many packages like libraries and stuff so now  we are done installing with nodejs and yeah   next thing we want to download is our ID which is  Visual Studio code so just type download visual   studio code you'll be having the first link as  code. Visual Studio code.com click it and here   you will be having for Windows and Linux and  Mac exact same thing like just click on it your   download will be getting automatically started  and thank you for downloading yeah it will get   automatically started and you can just like click  open when done and install it it's so simple I've   already uh like installed Visual Studio code on  my system and even if you still want to watch How   It's getting downloaded and installed you can just  click on the card that is appearing on top I have   done an entire tutorial on how to download visual  studio code okay so now we are done installing   both Visual Studio code as well as nodejs so now  let's begin to create our angular project so for   that just go to Google and type angular you'll  be getting these links over here click on getting   started tutorial and to the left you'll be having  tutorials click that and you need to click on your   first angular app and introduction if you scroll  down we will be having this command which is npm   install hyphen G at angular @ CLI okay we have  already done installing nodejs so just copy this   command or else you can just type it out that's  your choice go to search open your command prompt   and paste it and run this command so this will  basically install angular CLI now to check the   version you need to run NG space V that's it hit  enter so I'm getting an error saying NG is not   recognized as an internal or external command so  for solving this issue you need to just open your   this PC you need to go to local dis C and you  need to go to users then your system username   in this we will be having the app data folder  but this is a hidden folder so if this folder   is not visible to you need to click on this View  and you need to check on this hidden items so if   I uncheck it I won't be able to see it so you  need to just make sure that you are checking   this view hidden items and we will be having this  app data click it go to roaming and if you scroll   down we'll be having this npm folder double click  it so I'll just copy this path and we are having   NG over here right just copy this whole path and  go to your search type for environment you'll be   getting the edit the system environment variables  open it and here click on environment variables   you need to go to path under system variables or  user variables that's your choice I will go under   system variables click on edit new paste this path  click on okay here also okay here also now just   reopen your command prompt okay close it again go  to Search Command Prompt and the command which we   ran is NG space V hit enter and you can just click  on no for this y hit enter and here you can see   currently we are getting our angular CLI version  perfectly and these are the other necessary   angular libraries installed with their version  so now we are good with this and next is going   to be the folder where we are going to create our  angularjs project so for doing this you just need   to go to any random folder or your desired folder  I will just go to my local disk C and new folder   I'll just name it as angular project now just  open your Visual Studio code to the top you'll   be having this file option click it open folder  go and select your new folder that you created   for your angular project click it and just click  on select folder that's it so yeah I trust the   authors now we are inside this folder just click  on Terminal New terminal now we'll be getting the   same path in our terminal now we are running the  command NG space new and you need to give a name   for your angular app so let me give it as demo  app this can be totally your choice these two are   going to be the keywords okay and just hit enter  and ask CSS just hit enter if you want to change   it you can change this I am good with CSS just  hit enter again and I don't want this now n for   this hit enter so this will basically install all  the necessary files and folders for our angular   project after all the necessary files are created  if you just expand our demo app folder we'll be   having all the files the source app everything  will be there dot typescript so we will be having   everything over here and now we need to go inside  this demo app folder to start our application so   for that it's going to be CD space the name of  the folder that you gave for your application   in my case it is demo app so it's going to be CD  space demo app and hit enter so now we need to   start our application so for that the command  is going to be NG space serve and hit enter we'll be getting application bundle generation  complete so we are also having a local host path   so if you hover over it and you need to press  on the control key and click it so we will be   getting our demo angular project opened in our  browser so this is like the default app that we   will be getting so that's the video guys we  have successfully ran our angular project in   Visual Studio code I hope you would have found  this video useful do check the playlist of my   channel I've done a lot of videos in programming  as well as reactjs nodejs CRUD operations and   open AI Gemini AI and other AI tutorials check  the playlist subscribe me thanks for watching

Channel: United Top Tech

Views: 408

Keywords: angular tutorial vscode, angular vs code setup, how to create angular project, how to install angular in visual studio code, angular tutorial, angular tutorial for beginners, angular visual studio code tutorial, angular vscode setup, angular installation in vscode, install angular in visual studio code, how to download and install angular in windows 10, how to setup angular, angular project, how to install angular cli, angular, how to install angular

Id: GBt031nQPu0

Length: 8min 43sec (523 seconds)

Published: Sat Mar 09 2024