How to create Angular 15 front end with .NET 7 Minimal API backend Part 1

hello guys good afternoon uh welcome back to our channel so when I previous video guys you have this minimal API that connect our database already so it's all about uh booking application if I run this guys you can upload the endpoint that will allow the printing point but it will allow us to query a car create a carbide ID post a car and a car detailed or a database and update the car and delete our and this is the database that we have created right so for example if I want to post a new car now so let's have a new record there I can just the ID is identity spell server so it will add so just how it's a big number and like that I will execute sew it up now okay so in this video guys uh we will not uh we will create a front-end uh the web UI of this and minimal if I was created in that 87 framework but this time we will use we will use angular yeah angular 15 is the latest version so I have created oh I I I'm not expert in angular so I created an angular before that that's angularj is the Legacy position and angular 2.0 f is the new version that is really nice so uh this tutorial will be just a repressor for myself and also this is good for someone else started a beginner as well as for repress so we'll take a look uh we can create this angular to API so let's get started so you know I created here on car with UI so you can see Target UI so we will have a command Frontline then I'll go back to that we have to change it right so if you like nice so this is now the folder that is so now this secret we have already the angular CLI it is a way to build your angular application you have to issue recommend uh in the version what's uh still I will install it yeah so this is the focus manager not JS so uh all you have to do guys if you have not installed notches .org yeah you install this first because if you did not install that um cross flat from JavaScript runtime which is called node.js you cannot have that command you cannot create it on angular application okay so go back for a month from so we'll do is to take is not that b a version even that day I think this does so we have version 18. all right so okay so we will create now our angular application so command is npm and then install uh see this is global but angular uh Slash CLI and you can have latest okay so it's well in uh install all the packages that necessary to create your angular application guys so while waiting for that also take note that we are in creating angular that's its application I use Visual Studio code okay so if you have not installed and creating my.net will API I use Visual Studio 2022 and create things uh angular cell I iOS Visual Studio code that is also free ID so although any idea you can use but in this tutorial I use my software control you have to install also so that you can follow yes okay so just installs this so Studio code first and after you install that you are ready to proceed so what the npm is chilling so it's it's done now so if you can check in our holder here this one is sponsor has been okay okay so that's ready so chances I already have that so now we'll just create our application from here so to create an angular application angular component I mean the angular application is subscribe so to start creating a project guys we need to install a common engineer then uh project name enter so it will ask if you will add angular routing of course yes and then we will use traces and it will be installing guys so we will install all the packages the files that needed to create your angular application so yeah we post the video I'll become it's done now guys so if you can see the folder here okay so it has now under lots of files guys so the source which is the these are out the asset the system necessary files that the angular application you love so we'll go to the that folder from New York City are working um and we run this code this is the visual studio code command we'll run Coda period enter so it will open up our Visual Studio code editor guys the first time you have this and you just click this I trust the other author so now you it's now in a car booking your eye folder so as you can see guys the main entry point for the angular application is in the source and then this is the index file so basically this is the index sttml the one that will be loaded but as you can see there's no lots of HTML files here but you can see here this is a uh upload something what the hell is that where is that so it's something like a component so you can see in the app folder guys uh they have component that CS yeah this is you can see selector is of the truth so in your uh this one of the truth so selector is up that route and the template URL is a component that is the email so this one upon standard let's say CML so this is the files okay so that's how it's structured in angular so if we try to see the fields now we can go to the new terminal uh from here we can just see in the serve so it will open the browser hyphen hyphenol open the browser I mean so that's your application bundles is being generating and then yeah guys angularly so this is now the feeds so she can go back here in your code editor so this is your browser now so as you can see this is now the generated fields that we have so welcome and then car walking is up is running and then there's the one another angular like that this is the fields tutorial here you can follow as well if you don't like my video you can just start from here tutorial from the angular itself so we don't like to have this speed so we will create our own so let's go back to our this one and this is the this is the HTML feed so we just silicon and delete this but we have to Remain the out router Router Outlet so the router Outlet is the one that will for example you want to link to the other Pages like that so if we go to the browser now uh local news see so nothing is there now okay because we're just deleted it so in our this is the CSS HTML and uh is the index okay so if we put this for example here before it's just type uh it's one projectile and welcome to I'm gonna repeat like that and save it so it will automatically become file and just replace it here take a look this is I think she's supposed to be okay we are going to save it's compiled what was it it's loading so we just we are not hitting the seat so it wouldn't really click the same but it will out here okay so that is the interview in the bar angular uh project now so lots of things to do what is this so yes guys so there are lots of files here but basically it's created by the sale I uh Source folder the folder the routing is here so yeah roads so this is so so from our index table guys we will use both strap so the portable stuff here after the hit inside the header tag so we will see that bootstrap component so we will get from get what strap um stuff.com so here the gates bootstrap so version 5.3 already a day so started here yes operation let me just select this version of me an introduction now getting started to go here so this is the CSS we will just copy it p8 and r here so just paste it what's that previous video it's from here as well as the JavaScript files the spice here it is okay so we have that in our file now it's compiled successfully all right okay so we can start now so in the up one in that statement well for the navigation bar here so we'll go back to our this one let's search for nav bar we just use navigation bar so and upward there are lots of now barriers so let's take a look like this I think it's this one can be just copy this all right so we'll put a router Outlet to close it there so there are lots here so it's really confusing so we just need to get rid of the other of this so we just have one link just delete this so I'm not familiar with Visual Studio code yet but thank you so this one will just spray the car booking or booking up like that application you can see that this is our page also for example let's cut this as this thing all right let's start listing our listing all right so if you take a look at that service so we have now the navigation car here we're listing so there's no so I think we can make it here um so we just go back there this is now so this must stop guys we'll just say anything so take a look and content now let's have the get rid of that it's deleting so now it's now black and this is your pizza sorry so foreign go to the app folder we will create a folder here and I will create a component folder um here I will create the folder this will be card oh cars or cars component okay and then let's go back to our terminal the terminal now we'll create the new component now so we're going to go to that folder CD say the source file setting up the component ours and from here we will create our component and see Global C component and the component is let's see our component name is car listing or car list of cars unders Mercedes let's enter so it will create a component now so every component can have your CSS file it's time and that typescript speak which is actually this is the typescript she is so import component from angular so it's been created and the selectors this one after list and the temperature is upon in the stml and then our style set is here okay so let's that's the component that we created so this is the car let's work so how we are going to use our feeds here so if you know this speeds you need to load that component fireworks this one and this this this this display so how we are going to do that so we have to go to the app component that she is I know this is not the one uh what is that the component that module uh module routing so this is the routing so you can see here guys there's a there is uh routes here an array so we'll just have to add it here and let's say you have to add it here we should have the path now if the fat is empty uh we can load our component and what's the component that we're going to load this is the cardless component this one okay okay so we try if it works so when we load the main page we should see yeah our list work so that's it so our body we are going to click this one and we should see this one as well so so foreign so to do that I will go to our yeah we need to add another route here all right sister rocking and the fat will be equals to uh it's not so example in cars cars a component that will load I want to load the same component it will like our component as well or this component like that so in our steam L component uh where this car listing we can change this to hearts click it it will show it so let's dial up if it's working so it's loading here so we have oh yeah okay so you you see that the route is changing but it's the one page there's no route to still work and when I click here the rod is changing the parts and then extend the speed is essential component inside here so yeah yeah is it so it's nice so well but lots of things to learn from here this angular is so nice so let's start for now because we're just starting right so all right so you can see guys so when we click this as you can notice there is uh something I replace all right so this is not good because uh it's angular is single bits approach or single pins application so you cannot see a request the primer so we need to change something from our speeds here instead of using each strip here angular over uh route link a router link after box try this one okay so if we go back to our feeds now so we go to the home page it's spelling this car this work and then when we click here so see there's no there's no study happening because that's good all right guys so I'll continue so so yes guys for now uh we'll try to display a a list of cars from our but we will not interact with um or API first so just try to help this model so we will create a model in our angular display as well so first we have to create a model here from all right see that Spirit of fighter who doesn't create a file and let's see also you need to export enter paste this settings and enter this card and then this is from this is from C sharp so here we just have to remove this [Music] the it will be like that in angular Society is let's say this is we just have um string first and then foreign uh models in angular so with numbers type of string and that is we'll just try to display before we are going to enter our connector service and this one not this day time in an hour let me just solve this one this time I just so this is our model now export so we back to our goal so we have created the models guys from here Square model that's 3 is so import from here so we can use it from here import component I mean the models the name of the models is our next card let's start it is coming from our source it's nice let's move this doors of models then foreign Okay so now we can use it now so from here you can have a variable color 6 equals no it's equal it's not feature so we can have uh yeah card this is some Mario card is equal to uh it's just empty like that then we need to populate something from here so we can have a data right so it's sitting wow copy this this so this is just uh this thing that you need to um so we can try to really if we can display it before we are going to interact with uh our actual API guys so description to you it's my car this is late to make up a string so I forgotten good not so what's happening no problem string it let's recognize the daytime so what do we have to put the ditch here this thing is not assignable today which is thicker is a type uh we only just sense for now that's the string but I did it later on it will be okay you can copy it and make it a tool here okay this time guys if you are now display this to our Wireless component HTML okay so we need to create a tip in our canvas component that says to email this one we'll make this as we'll make a table here so we'll have to dig here oh it's the one here that's almost trapped guys I work with us and you will want to learn more about most threats what stuff is in the website and then we will create a table which we're going to display our simple the 61 so hi so must then guys so this is so I have birthday India The Heading of the table so just display take it um it's data so this one is the ID next what's the uh our model you can display plate number foreign [Music] everybody this is now the listing so we have our TR and then we have our PT and this will be a angular plus Defender later on just put it like that that's so nice guys just like that and Supply the property um to work all right so for now if we are doing please no problem yeah so we need to finish it first because this is already angular woman but it's seeing nothing so this one we are gonna have this energy in zip code so you just look at the documentation and then late uh let's see see oh this is how we are going to look here in angular so we have a public uh variable here and are yes this one so this is the this is actually accessible accessible here in our statement so we can let's see all these cars like that and then you can now say that oh it's not uh looking deeper to the CEO by the end I see it why is not anyway this is split complete number split number guys so that number CEO sorry to save it and take a look here it is looking I will see it's only smelling does not exist spent all over here this thing now so it's guys angular is very easy it can be taken immediately so that's nice also it's gonna be thick here but when you save it yeah it's compiling with my quick control is receiving or you can see here okay guys so you see we are displaying now in our listing here so let's do you think that's the static data that we just put it over there Okay so so we just also add a and what we call this validation here guys so in the table um you can put any angular angular command also like Hindi if like that and then we have to validate you are car it is current entities has no data so occur into this data so we can display it if not we can we will not display it so if cars that length why it is that better than zero because it's not over intelligent intellisense uh yeah this chain so if this is it will display your but if not it feels yes this will be nothing so right so it's display because there's a what if we here this one just put an array let's get this and this is just for that one see nothing is displayed okay so that is a nice validation as well so add more meditation so there is no big down you can also about this way foreign phone something like that so let's take a look here so if we can steam this one and you need to delete this first and it's the same Theory and then you save it to move up here so no car spawn so guys that's that's so nice we just started our angular 14 and we will continue the colleague data with API in the next video because that's already uh 40 minutes already so this is part one guys of angular 14 uh how we start angular so happy learning guys hope you know learn palat also this on this video actually I am also learning okay guys so don't forget to subscribe and hit the Bell button so uh next video you we will interact with our and let me save in minimal API and we load the data from there in this web UI using the angular 14. so bye bye see you soon

Channel: Learn@EdwinDeloso

Views: 622

Keywords: .net core tutorials, asp.net core mvc, web api, asp.net, azure, azure devops, entityframework core, entityframework, linq, c#, razor, javascript, angular, angular cli, angular 15 tutorials, angular demo, angular crud, angular with web api, how to create angular SPA, SPA, Single Page application, How to create Angular 14 front end with .NET 7 Minimal API backend.

Id: BgWvvzgB9bQ

Length: 46min 7sec (2767 seconds)

Published: Wed Jan 18 2023