Building a RESTful API with Angular and .Net Core | Part 01 | Introduction to our RETRO app

today we're going to start a new series we're going to build a retrospective web application using angular and net core so let's get started so i've already created an empty repository for the project and at the moment all it has is a readme file and that readme file is empty so at this point the first thing we want to do is actually install a vanilla angular app that uses dot net core and luckily the.net cli has a command for this it's net new angular and as you can see that takes no time at all so let's clear the screen and let's them into the application so you might be wondering at this point why i'm using the net cli tool rather than an ide like visual studio or rider and the reason for that is that i personally challenged myself to complete the project with nothing more than vem and some cli magic so as you can see in the explorer the vanilla app has created quite a number of files and folders the two folders that are most important to us at this particular moment in time are the client app folder that will contain the angular instance in fact if we look in here if you know angular you'll recognize that folder structure and then the other directory that's relevant to us is the controllers directory and that's where we're going to store all our controllers and at the moment there's a weather forecast controller that was created by the vanilla app application also relevance is the startup cs file and if we open that this basically contains all the things that we might want to configure when the application has started and if you use net you'll be pretty familiar with this class at the moment there's only really one line that i'm interested in changing and that's the code on line 45 which is use https redirection well we're not going to do that for this application so we'll just delete that and to be honest that's all we'll be doing in the startup file for quite some time so at this point let's exit them let's clear our screen and let's run the application and as you can see on the screen there is now listening on localhost 5000 so let's go and have a look at it and as you can see there on the screen we have our vanilla angular.net core application which contains a hello world message and some other informative golf we also have a couple of menus we have the counter which allows you to increment a counter and we have the fetch data page which actually uses our weather forecast controller to pull back some information but of course we don't want any of this nonsense in our retrospective web application so the next thing we'll do is remove all the unnecessary content that comes with the vanilla application so in case you were wondering what a retrospective is it is basically a meeting that a development team will hold at the end of a sprint and the purpose of the meeting is to go over what went well what went badly and other things that you might be considering and of course like any other meeting there is a list of actions that can come from the discussion so let's quit our application let's clear our screen and let's open up vim so the first thing i want to do is to remove any of the content from the home page so let's go into the client app let's look in source inside app and you'll see here that we've got the app component.html so i'm just going to open that up and what you'll see there is that we have an app nav menu which will obviously hold our navigation items and then we have a router outlet and the router outlet is the mechanism that decides which content to display in a single page application so if we go back to our menu we can pretty much see that there's a home directory and i will bet you if we open up that home directory and actually open home component.html we're going to see our hello world message and in fact we see that in line one so i'm just going to select everything here and i'm going to delete it and actually we'll put back in a header that basically contains the name of our application and that's effectively all that we're going to have in our home page in this session so let's open up our home dot component ts file and as you can see at the moment there's nothing in there that we really need to concern ourselves with so we can leave that as it is the other things that we have in here is the fetch data which is going to contain information from our weather forecast controller and i'm going to leave that there just now and we also have our counter which basically allows you to press a button and increment a value so we want to get rid of that and we could basically go into the app directory and just delete the folder called canter but i think angular might actually have a way to delete a component from the command line so let's quickly investigate that so i've just done a quick search and it seems that there isn't actually a way to delete components from the command line so we're just going to have to do this manually so let's start by going into the app module and as you can see on line 16 we have the nav menu component and then on line 18 we have the counter component and these are component declarations and i want to get rid of both of those components so let's just delete nav and let's delete counter and if you go down to line 25 you'll see that the router module has a path for the counter component so we can delete that as well and actually back up in line 10 on line 8 we have imports for nav menu and counter so we'll delete both of them and i think that is it let's do a quick search for nav there's nothing there let's do the same for counter again there's nothing there so i think we can safely say that we've removed the nav component and the counter component from our app module so i'm just gonna have a quick spy of this server module and there's nothing in there that we need to concern ourselves with we will have to remove the reference to the nav component in our app component html so let's look at that and exactly there on line two you can see app nav menu so let's delete that save it and at this point i think we can just do a brute force delete on the counter and nav menu directories so let's do that let's spin open a terminal let's see the let's list out our files we'll see the into client app and then i think it's app maybe it's source it is then it's app and if we ls here we're going to see the nav menu directory and the counter directory so i'm going to do rm rf nav menu and then i'm going to do the same for counter and now we can see that those two directories are gone cool and of course our nav menu is still in a tree but if we do a refresh both the nav menu and the counter directory are now gone i'm gonna hold on to the fetch data component at the moment because it makes a call to the api and thus has useful code that we can reference at a later point in the project so at this point i think we can spin up a terminal run the application and see how it looks we'll do a net build first and then we'll do a net run and there it is we have cleared out all the unnecessary information that comes with the vanilla application and at this point i think we should do a commit so let's do a quick get status and we have a lot of untracked files so let's just do git add hyphen m dot do get states again and now we have all these files now generally i would do a git add p and then we would go through all the changes one by one but because it's a vanilla application i'm not going to bother with that we'll just do a get add all and then we'll do git status and everything's added and we'll do git commit ads initial application files enabled the git push and of course it's the first push so we need to do set up stream origin master and there we go and i think that will do for this session hope you've enjoyed the process thanks for watching you

Channel: David Reid

Views: 35

Keywords: Building a RESTful API with Angular and .Net Core, RESTful, RESTful API, Angular, .NET Core, TypeScript, C#, Building an Angular web aplication, building a web application with Angular and .NET Core, dotnet, RESTful API service with .NET Core, Vim, How to build a RESTful API, How to build an Angular application, how to build a RESTful API with .NET Core, How to build an RESTful API with Angular and .NET Core, How to build a RESTful service with Angular and .NET Core, dotnet cli

Id: AxaalQYfWRo

Length: 9min 16sec (556 seconds)

Published: Mon Aug 23 2021