Angular and ASP.NET Core using Visual Studio 2022

hello everyone welcome back once again in this video we will look at the inside with asp.net core with Angela using that Visual Studio 2022 you will also look at the necessary components needed for us to get started but before we get started please make sure that you subscribe to the channel if you haven't so let's get into it then so angular is a platform and framework for building single page client applications using HTML and typescript it is written in typescript and implements core and optional functionalities as a set of typescript libraries that you import into your applications nasp.net core obviously is a web development framework for building web apps on the net platform so enough problems there so let's get into the real stuff so as you can see I've got a visual studio installer opened yeah so let's have briefly let's have a look at the components you need to install when you want on a visual studio so as you can see I've got a visual studio Community 2022 so you click on the modify so this might take a while so let's just give you a moment so as you can see okay so on the work clothes yeah we have to make sure that we check on this box or you've got this box checked here so this will actually help you build a web applications using asp.net call asp.net HTML JavaScript and containers including Docker after supports yeah so you got to make sure that you've got this box checked and also make sure that you check the note dot GS development so this also help you build a scalable Network applications using node .js and asynchronous event driven JavaScript runtime yeah so make sure you got this box checked if you don't want to install the notes workloads then this is what you have to do obviously open a web browser and in Google uh node.js so it's under node.js.org so we click on the link so here you got to make sure you download and install what is applicable to you okay so I'm I'm using Windows so yeah use the windows and you you actually download and install the the current version or the LCS okay so once you're done with that big so let's close this here so once you've downloaded and installed uh the components needed here so we can close the video Studio installer so we can go ahead and create a new project so here uh once you download the necessary components yeah Visual Studio will give you a template to start with yeah so this is asp.net core with angular so at least the project template for creating an asp.net core application with application with angular so we select this here and we click on the nest so here obviously you can configure your project details yeah we're not going to look too much into that so we go ahead and click on the next so here obviously you can select the dot NET Framework streamwork that is applicable to you and you can also select the authentication inside here so for this video say again let's select the individual account okay and when we click on the page so this might take a while before the whole thing actually create so I'm just going to pause the video on the whole thing creates okay so as you can see here now it's got the Project's crickets for us yes so let's briefly look at what is inside here so this video is just to get you started and run your project for the first time yeah so and I'm buying upcoming videos here we look at actually getting started from scratch and building our own stuff from scratch okay but for this video's sake here let's have a look this way so as we as you can see we've got this project here uh project number six that's a project name yeah so we go ahead so we have properties folder here this contains uh settings and whatnot yeah so let's look at the large settings so this is just uh uh the lines configuration like the URL and the port number and whatnot yeah okay so let's go ahead and click on the WWE so this contains their you just have like save iPhone and whatnot yeah and then the next day is a client up here so this contains um the trials for your for your unblocked lines application okay so it has a folder inside SRC Source yeah so let's click on let's open the SRC so here obviously that is you've got a bunch of folders and we've got main.ts and index.html so basically the invest HTML is the starting point of the application here and we've got um let's look at the name so the main also contains the basic contribution to to get the whole application your client application running okay and let's look at the app folder okay before we do that let's let's look at the first bit the API authorization so this contains the authorization for the applications as you can see we selected um an individual for education type for this application so this has got all the the necessary stuff okay and as you can see you've got a folder for um login so this actually contains the login client page and the login typescript okay so let's look at the company the component specs dot CS so this is just a bunch of typescript files here to get you started in terms of the login stuff yeah likely the username and whatnot okay so let's look at the components as well so as you can see we've got a bunch of components so you can actually take your time and have a look at it and try to understand it your own way okay so basically this is not a video for us to look pretty much into this okay so I'm just gonna brush through it quickly and then we've got the login main yeah so this let's look at this has got nothing inside yeah so let's skip that and then the log out contains the the log out starts so let's look at the HTML so as you can see you've got this message and we've got a bunch of typescript files yes just to handle your log out process okay so so as you can see we don't have much time so let's go ahead and look at it on the asp.net core the clients I mean the server side we've got controller control is folder this the first bit is the oidc configuration controller so this is the to conclude the user registration and the logins and whatnot okay and then we've got um weather forecast controller yeah so this is so this also just to handle the data I mean the requested data to weather forecast so this is just a sample data to get you started and we've got actually model however the application model so this is the application user so this is just to register user and get um identities and whatnot yeah if you want to know much more yeah I've got I've got lots of videos on this topic so you can have a look at the channel now we've got this the database contest and whatnot so remember that I mean to waste more time yeah let me let's go and see what actually happens here so you can F5 or you can just click on the play button so it might take a while so I'm just going to pause the video so we've got the application of the running now let's have a look at it so as you can see it's a very simple angular client project with asp.net core so it's got a bunch of stuff so obviously you can you can if you've got all the database connection Springs and whatnot sell properly you can you can create a user and log in just to see how the whole thing works yeah so I mean I'm Gonna Leave This video here for now yeah but I will do my best here and and create similar apps from scratch so that you see how the whole thing is put together so please make sure you subscribe to the channel if you haven't and make sure you like the video as well I hope you have a lovely morning evening afternoon wherever you are peace

Channel: Hacked

Views: 3,792

Keywords: angular, .net core, asp.net core web api, angular tutorials, angular tutorial, learn angular, visual studio 2022 angular, asp.net core, .net core angular, html, angular html, html typescript, programming, coding, learn programming, angular getting started, angular get started

Id: bT63uhxgKfI

Length: 9min 40sec (580 seconds)

Published: Wed Aug 16 2023