Build Full Stack Application using ASP.NET Core Web API with Angular

yo what is up guys my name is Joel and today we gonna continue where we left off so in the previous video we implemented our front end using react shares and today we gonna Implement our front end using angular but before we get started I just want to tell you guys that I'm using this code now um to one of my projects so uh recently Microsoft launched a new plugin so where that will help you code c-sharp while using vs code so yeah I'm gonna continue using it forward so yeah let's get into it so the first thing we're going to do is we're going to add angular to our project so as you guys know I'm gonna do this in one take so let's see how it goes so let's go to angular docs let's create a new project and we're gonna copy this one so engineer Angler uh engine new in the name of your project so yeah let's let's get into it so it's good the name is gonna be the same as the other so it's going to be CRM manager dot angular web so yeah I'm gonna add the routing we can use CSS alright guys so it took longer than I expected so let's continue on as you guys can see here the left side we have our angular project so let's see if everything was installed correctly so let me just go let me navigate to that folder so it's going to be CD CRM manager dot angular web okay and let's run npm Stars okay let's see if the page shows correctly [Music] building okay and let's just open the link and okay it's working correctly nice all right so let's start off by cleaning everything here so let me go to my app component file so it's your HTML file sorry remove okay clean nice let me just see if everything is correct in the CSS file okay it's empty and let me go to my style CSS okay it's empty perfect okay so if you guys remember in the previous video we had in our react application we had the main layout and inside the main layout all of our other components pages will be loaded there so let's just do the same but before we do that I want you guys to go to the package Json and here in the start script we're going to add a flag here so it's going to be dash dash open and now every time we run this command the page should be open it should be opening automatically now so let's see okay nice it's working perfect so now we don't need to manually click here to open the page when the project starts okay so let's continue on so first off let's start by adding our components and UI Library so let's just install our bootstrap Library so it's going to be npm installed trip okay okay nice so we have bootstrap edit here so what we need to do now is we need to go to our angular Json and in the files array we need to add the path to our Styles in this case to our bootstraps also I'm gonna add here the path so oops sorry and now I also need to add the scripts that output strap need so I'm going to the scripts array and add here the path to our scripts oops I delete it okay thanks so to see if everything is working correctly I'm going to my app component here and I'm going to create a button so it's going to be button dot vtn dash primary and before the PT before the BTN primary I'm gonna add BTN and add here working okay so let's start let's start off the project and see if the bootstrap is installed correctly so it should be showing a button here a blue button so let's just see if it okay nice it's working nice okay let's continue on okay so now I'm gonna create our components so then in my app routing I can add the components here in this case the pages here so let's start off by creating our component so I'm gonna first I'm gonna add the main layout so it's gonna be Ng generate component so the path to our component is going to be common Dash components not there sorry slash and uh layout or in this case main Dash layout okay so this command will create component layout here so yes so you guys can see here and now I'm gonna add the other pages so if you guys remember in the react video we had two pages one will show the the list of customers and another page uh would let us create uh customers and inside those two pages we have two minor components one was the customer form and the other was the customer list and we're gonna do the same here in our angular project so let's start off by creating the pages so it's going to be NG generate components so it's going to be pages slash customer flash customers Dash page Okay so okay nice and you're gonna do the same but it's gonna be customers Dash create oops create Dash edit Dash page okay so we have our two pages so it's going to be the create page and the customers page and now we're going to create those two components that we need on those pages so it's going to be the it's going to be the same path but here it's going to be components and here I'm going to put customer form and then there's going to be the customer list okay nice okay so this is our components nice okay so now what I'm going to do is I'm going to my app routing file in this case app routing module and here inside the routes I'm gonna Implement our routes that we're going to use in this application so if you guys remember we have the main layout route so this will be the first rocket that we're going to create so it's going to be path so it's going to be an empty path and the component is going to be the main layout component okay and if you guys remember the other components will be loaded inside the main layout so what I need to do is I'm going to use the children and here I'm gonna add an array and inside the array I'm going to add all the other components that will be loaded inside here so it's going to be path customers and here's the component it's going to be the customer page component okay I'm gonna copy this one and I'm going to create the customers slash create and here's going to be the customer create edit component and I'm gonna copy once again and this is going to be the edit so in this case the I can put edit here Dash ID or I can just put like this maybe so I'm gonna put edit it's okay now I'm gonna I'm actually gonna leave it like this I'm gonna leave it like this okay so this is going to be the um the page I will use to edit the customers okay so now what I need to do is I'm actually need I need to go to the app component here and since I want the the this component to use or in this case since we want to use the main layout here I need to add this so router Outlet so this will be using the this is a class from or in this case a component from the app routing so this will tell angular to use this routing and since it's on the app.component HTML he will go here and we'll see the routes that exists and since the empty path it's the main layout he will go to our main layout component so what I need to do here is also add the route outlet that before that I'm actually going to add the container so it's going to be like this and here I'm gonna add the or navigation so let's just go to the bootstrap commentation so it's going to be good strap five last one and here we're gonna copy the the nav bar here so let me add it like this and I'm gonna remove everything that I don't need so I'm gonna remove this and remove this okay so this instead of being home to be customers or customers and I'm gonna add a router link so router link and it will route to customers so this is needed so we can do navigation enabler using waterlink and I'm gonna add the same here in the this anchor tag so it's going to be an empty so it will go to the roots of our routes and I'm gonna remove this because we don't need it and I need to because since we're gonna do the same as the react project I need to go to the react project and just copy the style that I used before so it's going to be on the main nav here so I'm going to copy this one okay uh and it should be working now oh actually forgot CRM manager okay so let's just start the project and see if everything is working correctly okay nice it's working I actually forgot I need to copy the the this styles from react because we're going to do the same in angular so and okay nice now it's the same as our project in a react perfect all right so now what we need to do is we need to start off by implementing our pages so but before that I forgot I need to add our services because we need to get our customers um and show and display it on our pages on our Pages sorry so what I need to do is I'm gonna type here so NG generate services so it's going to be services slash customer slash customer so we should create a folder called Services okay and customer okay customer service okay nice okay so we need to add the we need to add the HTTP client module here because this is allow us to make requests so let's go to the angular docs so angular oops HTTP module okay so let's just copy this here and we gonna add the HTTP client module inside our Imports okay nice so now inside our service we're gonna inject the HTTP client so it's going to be private B client and it's going to be type of HTTP clients okay so let's create our methods here so it's going to be get all so this method will return all of our customers it's going to be a type of observable and it's going to be a type of customer and an array of customers okay and return this dot HTTP client dot get I'm going to return an array of customers so it's going to be customer and here we gonna add the path to our um API so the path to our API so let me just go to my uh solution Explorer here in vs code and here I can just run the project and see what's the end point so because it's going to be different since now I'm using this code so okay so the past is here so I'm just I can just copy here and go to my okay dot API dot dot customers is it customer or okay customer okay nice let me go to the project and run without debugging okay okay nice let me just open Terminal once again let me navigate to okay nice okay so this will service will return our customers and let's create another one to create because I'm just going to be create we're gonna receive a customer of type customer yeah we're gonna return an empty array an empty observable so it's okay in here we're going to turn this http client.get an empty observable and not yet sorry I'm gonna post my bad and the pad is going to be the same as this one and we're gonna pass here the customer this is all we need to our customer service because we're gonna inject this in our components okay nice perfect so what we need to do now is we need to go to our customer page customer page component and here we're going to start implementing our methods and variables that we're going to use inside this page component so let's go so let me just start off by creating the customers so I'm going to create an observable when an observable of type customers so the angler itself while using the async pipe will deal with subscribing automatically and And subscribe when I leave the component so instead of me typing this service get all subscribe I will use the async pipe method so to do that I need to create a variable so it's going to be type of observable observable and it's going to be an array of customers so it's going to be a customer and I can just leave it like this customers oh okay so actually I forgot to go to my tscon fee here and as a rule that will allow us to serve start or create variables without instantiating it so it's going to be um enforce no initializing initializing oh okay that's false nice okay so okay nowhere anymore nice okay so let's go to our Constructor and here we're gonna inject our customer service so it's going to be private customer service type customer service okay and here um we need to uh subscribe uh this variable needs to subscribe to our service so what we're going to do is we're going to add on in it so it's gonna be on in it it's going to be implements on in it and we will create this method nice and all I need to do is I need to add customers so this dot customers it's going to be equal to this Dot customer service dot get all okay this is all I need so this will automatically subscribe when the component initialize and then he will unsubscribe when the component is deleted or removed from the Dom okay so now what I need to do is I'm going to my customer page I'm gonna add here this a pretty div dot row people call H1 customers so this is the same as we did in our react project I'm going to add a little bit of margin so it's going to be margin top Dash three and I'm gonna do the same here in here um I'm going to show the table of our um customers so if you guys remember in the react project I had the components that will show all of our customers so what I need to do here is I need to implement this customer list component so what I know so what I'm going to do is I'm going to navigate to this customer list and here I'm going to start off by implementing our customers list components so what I'm going to do is I'm going to start off by creating an input so it's going to be input so this this will allow us to receive a list of customers so it's going to be input customers type of customer okay let me just import to input okay and now uh what I'm going to do is in my HTML I'm going to implement the table so it's going to be let me go to the bootstrap dogs it's going to be a table okay let's just copy this table okay it's very environmental correctly uh I don't know if wait no it's different okay let me just go to the react project because you're gonna do the same okay so it's three fields okay let's go back to our project it's gonna be three Fields here so name and here this is where we gonna do differently that from the other project so this is going to be an ng4 so it's going to be ng4 customer of customers in here we are going to add our customer dot name and trade and text number okay nice so this component will receive an input and with that input he will show us the table so it's going to be table Dash table dot stripe and I think that's what I added in the react project let me just check table striped yeah it's correct okay I'm just going to just see if I did a typo okay nice okay so now what we need to do is we need to get the customers and pass to this component so I'm going to my customer um page in here I'm gonna do the same that I did in the react project so inside here I'm gonna create a new card it'll be give up cards you know card Dash Bali and let me just see in the customer page or style I used okay cards I have a shadow okay so it's going to be card Shadow and in the card body okay to the card body simple chord body okay nice and here I'm gonna call the customer list component so what I'm gonna do is I'm gonna type here customer so it's going to be at customer list okay close and here I'm gonna pass the list of customers but to do that since I'm going to use the async pipe I need to add here if so it's going to be if and here I'm gonna type here customers so it's gonna be customers foreign okay so this will tell angular that he will await to subscribe to and to end and get the customer list and here it's not the customer sorry it's customers it's customers and here I'm going to pass here as it has a variable the customers that we are sized when the angular subscribes so it should be working fine I guess let's just see if it works so let's start off the project and let's navigate to our customers page and it's working guys nice as you guys can see let me see if there's any error in the console let me just put this outside wait why isn't okay okay so okay nice it's working correctly guys let's let's just add the create button here and navigate to the in this case we're going to implement the create page so let me just go to let me just add here another row in here it's going to be the flex justify content and and here it's going to be button primer Dash primary and here it's going to be create and here I'm going to add a router link so because I want to split into route so route the link here it's going to be to create and if I refresh it should go to the create page nice nice okay it's working okay so let's start off by implementing the create page Okay so what we're gonna what we're gonna do is let's go to our um customer form because this will be the form that we'll be using um not form but the component that we'll be using to um Implement our component so okay so let's start off by creating the form okay so we're going to use reactive forms so let me just go to the angular docs so it's going to be angular reactive forms okay so we need to import this let's go to our app module by adding copy my bad yay and here we're gonna import here let me see if there's anything we need and okay okay so this is all we need for now and here we're going to create the customer form so it's going to be customer form and the type is going to be form group the design form group okay nice let me just check the docs to see if you see how they are using it okay it's done here I believe okay nice it's like this and we're also going to do like this so let me just copy here and we're going to create a new method called create form in here inside this message we're gonna initialize our form so let me just change here so it's going to be this Dot customer form and here we're gonna add the name the streets and just add the angular forms and here we're gonna add the text number text number so I think for now this is okay I'm gonna add a new method called submit from submit okay so this will be the method that we'll be calling to submit the form um and now what I need to do is I'm going to implement only need two here so it's going to be on meet it's going to be implement on it and this will create the method and join it and here we're gonna call this method to create form okay nice in here we're gonna add the form so it's gonna be form group customer form okay and what we're gonna do now is we're gonna create input so let's go to our bootstrap let's go to the forms form oops overview and we just need this one I just copy this one because this will be the same to the other input so it's going to be in your dot row okay so let me just remove this so it's going to be type text name name and here The Field's going to be name okay so you guys have to be careful with the cop with the copy paste because I'm gonna do this two times one two let me actually forgot to add some margin okay and here instead of name this is going to be the straight trade actually forgot the form control name form control name for that maybe it's going to be named in here it's gonna be text number three three okay in here it's gonna be that's number foreign okay nice so this form will uh be used to create um and um edit um page so I mean even though the create email page are the same um this this will be used inside this component so if you guys for example had another page instead of using the same you guys could share this component between the between the two pages so in this case since we only have one um we can use it like this anyway so let's continue on uh so we have the customer form okay now we need to pass this customer form to our wait before that sorry guys I need to pass here and input because for example if um if I'm calling the edit page it's because I already have a customer and I want to pass that customer properties towards here so I can initialize the form with the value so I'm going to create a new input so it's going to be input inputs that's going to be type of customer so it's going to be customer okay in here what I'm going to do is instead of having like this is going to be customer it's going to be this.customer.net and I'm gonna do the same towards here name straight in here it's going to be text number okay now what I need to do is in my create page so it's going to be let me just go to my page so it's going to be Thief dot row creates customer so it's going to be margin top Dash three and I'm going to do the same here in here I'm going to show the form so I can just type here this Dot card save a car there's your body and here I'm gonna load the customer form component so it's going to be app because form close and here I'm gonna pass the customer so what I'm going to do is I'm going to create a new variable called customer type customer okay and I'm gonna add only need two all you need and type here in comments on image and here um I'm gonna initialize this variable so let me put above here okay so it's going to be this about the customer it's going to be equal to name it's going to be an empty treat and text number Plus customer okay so I mean I can create a method and do this and have some logic here to check if I have an ID in the URL but I'll do it later so just so you can continue the implementation I'm gonna leave it like this so okay and now in my customer form I'm gonna press here the customer and here I'm going to pass the customer okay so let's just see if it's working let me just before let me just see see if it's working I'm going to put the name Joe so this name should be showing up in the form itself so let's see if it if everything is working correctly customers and create and it is guys as you guys can see it's working correctly which is nice all right perfect it's working correctly let's just now on our customer four what we're gonna do is so every time we actually I forgot something here I need to add the button to submit my bad so I'm gonna adhere a button button submit this part is going to be type submit okay and now I need to add here mg submits on submit I'm going to call this method in here let's just see how the form is so it's going to be this dot customerform dot values or volume okay let's just see how it is right I had to consoles my bed it's not showing anything on submit okay I forgot okay let's see how it should be working and nice this is our this is our object so it's working correctly perfect all right so what we're going to do now is we need to pass this updated object to our parent so let me go to my customer form and I'm going to create instead of input I'm going to create an output so it's going to be output because this will allow us to pass data to our parents so this we're gonna type here output it's going to be output and we're gonna call this event so it's going to be at submit customer or submit event you can put submit event for example and it's going to be a new event emitter of type customer okay and every time we create a customer or in this case every time we submit the customer what we're going to do is going to create a new variable called customer and this custom customer it's going to be the volume it's going to be this Dot a customer phone dot values volume and here what we're going to do is we gonna submit the this event so it's gonna be uh submit event dot Emit and we're going to pass this customer wait it's tight because let me just over here okay customer isn't okay nice and now I'm going to my customers create page and here I'm gonna type here submit event and here I'm gonna I need to pass here a function that will receive this event so I can come here to my custom my customers create page and here I can just pass here the in this case I can create the function so it's going to be create and here I'm going to pass customer type customer in here let's just console what about the customer and see if everything is working correctly I can pass out the create in here I'm gonna paste the event event okay so let's see if we can lock inside our parents the the customer so it's going to be and it's working we are passing everything correctly guys okay so before I forget let me just move here the name Joel so this is one of the ways you guys can create your angular Pages or structure your angular projects this is this is my current template to create uh angular project so and I actually enjoyed it because um it scales really well so I recommend you guys to try it so now since it's working correctly now I can actually create a customer and pass this to our API so to do that what we're going to do is we're going to call the customer service so it's going to be wait I didn't inject here okay I had an injector so it's going to be private customer service it's gonna be type of customer service and here what I'm going to do is going to be clip this Dot customer service dot create and here I'm going to pass the customer not subscribe and here I'm gonna get results and I need to route back to our uh um to our list of customers so I need to inject another service here so it's going to be private router type router or route I think it's route no not right router okay and here what I'm going to do is this dot router dot navigate in here I'm gonna navigate to my page my customers page is going to be customers and this should be working correctly now so let's just see so we have our customers okay let's create a new customer called for example clickings she's taking clients and tax number let me just put some random text to the text number submit and it's working nice so yeah guys so this is pretty much how you can uh create angular projects and Implement pages in angular using Huawei so what we are missing now is we need to add the buttons to edit and edit this information um and we need to do some changes in our backend too so I will leave that to the next video so I hope you guys enjoyed it and leave a comment and subscribe see ya

Channel: JoelDev14

Views: 298

Keywords:

Id: kX4EhktvqLI

Length: 38min 13sec (2293 seconds)

Published: Thu Sep 07 2023