Building a RESTful API with Angular and .Net Core | Part 03 | Retro app update.

so it's been a while since i posted my last video about my retro application bottom line is i got sidetracked but here is what i've done so far so the first thing i noticed is that the net vanilla angular application is version 8 which is pretty old so i've pushed the version up to 10 and before the next video i will get it up to the latest which i think is angular 12. i guess it would be nice if microsoft could update their vanilla offering because updating angular can only be done one iteration at a time i.e eight to nine nine to ten ten to eleven etc etc etc the next thing i did was install and set up entity framework i ran into a little issue installing ef from the nougat cli it turns out that the issue was a versioning problem but i had to use ryder to figure that out which kind of broke my rule to do this whole project from vim and the command line but nevertheless we can now do migrations from the command line which is pretty straightforward and we do have our first migration in place which i can quickly show you supply them into the application and you'll see on your screen there that we have a migration for creating a model called boards i also added n swagger to the project to get n swagger into the project i had to install n swagger's interface let me quickly show you that that's on your screen now but the benefit of adding this interface that it makes it easier to create the json file that you need to add to your project let me show you that too it sits in the top root of your folder and it's just a bogged standard json file and now not only can i view the api offerings from the browser and swagger also creates a copy of our api dtos data transfer objects and adds them to our angular application the magic line in the end swag json file is down at the bottom of the file on line one two four at the moment we have one dto called board detail let me show you that that's on your screen now and when we run the application end swagger will use magic to copy this dto into our client application let me show you that too and this file has generated a build time by end swag and as you can see on line 12 it has created a board dtu so this is really cool because it allows us to create consistency in our data transfer objects between a restful api and our client i've also set up cypress as an end-to-end testing framework in our angular application it lives in the cypress folder and at the moment there is just a bog standard test which shows that we can actually visit the retro application if you've done any end-to-end testing with angular before then you've probably used the framework protractor and you'll also be aware that protractor is coming to the end of its development life cycle and generally the angular community seems to be drifting towards the idea of using cyprus which is why we'll be using cyprus in this project rather than protractor and as you can see in your screen we've only really got one test so far but we'll be adding more as the project progresses in our restful api we have our first controller called retrocontroller let me quickly show you that and at the moment our retro api controller has two calls the first on line 25 is a post that creates a new board and the second on line 37 is a get method that gets a board with a specific id the retro controller is fairly straightforward my plan is to keep the controllers basic all the business logic will be executed in services and the controllers will simply be responsible for passing responses to and from the aforementioned services and the client and as mentioned i want my business logic in a service layer so we have a retro service let me show you that and at the moment this retro service is responsible for surprise surprise creating a board which is online 16 and retrieving a board with a specified id which is on line 28. and as you can see from the very simple code the service is actually responsible for retrieving and saving data and of course we use entity framework as the conduit between our data and our models if we go back to the top of the file and on line 8 you'll see that our services are interfaced this allows us to scope them in our startup class let me quickly show you that and on line 27 you can see that our retro service is scoped and the scoping allows us to inject services into our controllers without instantiation which is a really nice.net core feature we've also created our first model called board let me show you that and as you can see at the moment board is a very simple class and of course we use entity framework to map this class or model to our database and we also have a data transfer object for this board let me show you that and again it's a very simple class an end swagger will map this dto to our client which i showed you earlier so that we can create data transfer object consistency between our restful api and our client and that's pretty much all i have to show you in the api let's quickly move over to the angular client so we have a home component that contains a new board form let me show you the html and you can see there is simple form for creating a board in the future it will also be responsible for displaying boards but for the time being it can only create a board and if you see on line six we have a button called go and that maps to a method in our component on line 22 which is also called go and as demonstrated on line 24 we also have a service which is responsible for calling our api let's have a quick look at that and as you can see it has two methods one to create board which calls our api service for creating boards and of course a gap board that calls our api for retrieving boards with a specified id we also have a board component let me quickly open that up at the moment the board component is pretty much empty but this component will basically become the meat and potatoes for this retro application because it will manage all the items that will be raised in any given retro so let me run the application and show you what we've got at the moment on the home page we have a simple form and if we enter a name let's call it my first board and we hit go it will take us to the retro board and as you can see the retro board has a title myfirstboard which is the name that we entered in the form and that is basically the state of play lots of setup lots of configuration very little development and very little to show but hopefully that is about to change and in fairness i'm pretty happy with what we've got but i wanted to do all of this in vim and so far that has been very difficult as i mentioned earlier in the video the first issue i encountered was installing entity framework using the nuget cli the command themselves are straightforward however if you run into an issue it's a little harder to trace the problem i had to revert to rider which is a jetbrains offering to resolve the problem which turned out to be a versioning issue and again that was an awful lot easier to see in ryder than it was on the command line the second issue was the sheer amount of setup involved to get our net restful api up and running.net is a very good offering but sometimes it does feel like you're using a sledgehammer to hammer a nail however once you get past the initial setup it does the job and it does the job well on the other hand so does express which is a much more lightweight solution for restful apis but then again.net is more than just a restful api it's many solutions which is why it often feels like a sledgehammer finally the reason i'm trying to do this in vim is because i want to use vim as my editor both for personal and professional projects based on what i've seen so far here that is going to be difficult if i remain in the microsoft stack professionally.net is a decent solution but it is very visual studio orientated you don't have to use visual studio for instance in my current contract i use rider but if you run into a problem the community defaults to solutions in visual studio which is not really surprising so basically my thoughts at the moment are if you want to use vim then life will be easier if you avoid microsoft solutions however i will continue to plug away the project using vim and the command line and that my friends is that if you found the content useful then consider hitting the like button and subscribing to the channel also if you like web games then check out my nova project where i am currently creating a web clone of the 90s macintosh game escape velocity i also have other tutorials that show you how to draw on the canvas api resize the canvas programmatically and a series of videos on how to use canvas api to create games i also do other videos related to programming videos are published every monday and last but not least thanks for watching you

Channel: David Reid

Views: 8

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: T_iVfjvcLS0

Length: 9min 49sec (589 seconds)

Published: Mon Dec 06 2021