Angular with Visual Studio 2022 (Getting Started)

hello everyone welcome back once again in this video we will look at getting started with angular inside our visual studio 2022 but before we get started please make sure you subscribe to the channel if you haven't so let's get to it then so angular is a platform for building mobile and desktop web applications it is a typescript based open source web application framework and also microsoft visual studio is an integrated development environment ide and is used for developing computer programs websites web applications services and mobile applications so enough of all the talking and let's get to the real stuff yeah so as you can see on the screen i've got visual studio installer opened right so if you come to the screen first of all what we would do is we're just going to launch it and see what actually comes up so here we go to create a new project so as you can see here now we don't have any templates with the exception of the blank solution so this is what we're going to do yeah we're just going to close this yeah so we come back to the installer and then we click on the modify so here as you can see there but they're a bunch of workloads that we can add so first of all we're just going to add the asp.net and web development yeah so so this is this actually helps you build applications using asp.net core um asp.net and the standard base web technologies including html esseter yeah so we check on this box yeah also we have to check on this box the the node.js development workload yeah so as you can see from what i'm seeing here the the total space required is five six nine so we're just going to click on the modify so this will actually install i mean it will download and install the necessary components needed for this video so i'm just going to pause it while the whole thing loads okay so now we've got the downloaded installation completed so what we do is we click on the launch yeah so you come to the create a new project so as you can see here now we've got a couple of projects added to it now so we can select a type script here so here we could we should get a couple of projects so as you can see here now we have got um the standalone typescript um angular project added to it yeah but if you don't see it if it's not showing up here this is what you got to do you can close this bit here and then come to the modify so once you select or you select this here the asp.net and web development once you select this bit here so you could you can add the the.net framework project and item templates to um to the workload to be downloaded and installed here also you're gonna have to add the additional project templates yeah this from the previous versions right so once that bit is sorted out then you can come back and actually launch the visual studio so here we create a new project so we select the typescript and then scroll down so here we have the standalone typescript angular project yeah so so here obviously you can configure the project details ie project name uh the location of the project solution and then the solution name right you can make changes to that here then you click on the nest so here you can actually choose to integrate an mtsp.net web api project right or you could just leave it as it is so we're just going to leave it just like that yeah it's not for this video so what we do is click i mean click on that create so as you can see here now we've actually got the project created now so we've got the source but before we actually go ahead we open a command prompt so we we're just going to check if we've got the node and angular cli install so we're just going to put ng version so if we've got all the necessary stuff installed there we should get them here so basically we've got the angular class 13.3.2 we've got the node then we've got the packaging the package manager the mpm and whatnot so we've got pretty much everything to get us started yeah so what we do next is just gonna we just i'm just gonna run it from the local host so i'm just going to pause it as this might take a while for the whole thing to run okay so as you can see here now i have the angular application running on the local host here port four two zero zero so as you can see here now we've got the angular project two up running and we can have a look at it here so as you can see the angular live development zone is listening under on this port here and it's compiled it's actually compiled successfully so it's not it's not really really difficult yeah so what i'm gonna do so what i'm gonna do is just gonna stop it from running and we're just gonna create another one here create a new project and it's an angular project again this time we're actually gonna use the we're gonna add integration for mtsp.net so it's actually saying directory name is invalid so what i'm gonna do is just gonna create it from scratch we're just going to leave it as it is here so we're just going to add it directly and see if it's going to come so as you can see from a new project altogether it's actually created yeah so it's pretty much the same so what i'm gonna do is just gonna leave this video here and we continue to build on what we've actually started here on the angular yeah so once again if you haven't subscribed to the channel please make sure you do because i've got lots of videos coming up have a lovely day afternoon evening wherever you are peace

Channel: Hacked

Views: 46,666

Keywords: angular tutorial, angular tutorial for beginners, angular, learn angular, angular visual studio 2022, angular.js, angular for beginners, angular for dummies, what is angular, angular2, javascript, front end framework, web development, front end framework 2019, what is a front end framework, software development, programming, front end software developer, web developer, visual studio, visual studio tutorial, angular 2022, vs 2022 angular, typescript angular

Id: 5NZVI15sBmk

Length: 8min 30sec (510 seconds)

Published: Tue Apr 12 2022