From the course: Building Angular and ASP.NET Web API Apps
Course overview and application demo
From the course: Building Angular and ASP.NET Web API Apps
Course overview and application demo
- [Instructor] Hi, everyone, and welcome to this course. In this course, you'll learn how to build a full stack application with Angular for the front end and ASP.NET API for the backend. To better understand all the topics, we'll create a complete app from scratch by gradually adding features step by step. At the end, you'll also learn how to deploy this app to Azure. In the landing page, if you are not logged in, you're going to be redirected to the login page, and if you don't have an account, you can just go to sign up, and here provide the credentials. We can start with the email address. You need to provide a valid one because if not, you're going to get this validation error, which says that you need to enter a valid email address. I'm just going to type in here ervis@trupja.com, and the password does also have validations, like for example, 1, 2, 3, 4. The password must be at least six characters long. Just type in here, 5, 6, and then down here you need to also confirm the password because if not, you do get another error, which says that passwords do not match. Just type in here, 5, 6, and on here you can see that the signup button is also enabled. Let me just sign up. Now once you sign up, you are automatically logged in, and here at the top you get the transaction and the logout button. In the dashboard, you have three tiles. The first one is for the total income, total expenses and then we have the net balance. Now let us just add a transaction. Here you can choose between an expense and an income, or just choose expense. The categories are food, transportation, and entertainment. Let me just type food. Then $50. Save transaction. You're automatically redirected to this page where you can see the date, the type, the category, the amount, and also to action buttons. Here at the top, you can see that the net balance is minus $50. Let me add another transaction. Just go to type. Now I'll not choose expense, which has these categories. I'm going to choose an income. The categories are different. Than salary. Let's say 200. Then save transaction. Now as you can see, the net balance is 150, and here we have all the transactions. If you want, you can just remove a transaction. You can also edit a transaction. For example, from income to expense, then from salary to entertainment, and then just $20, update transaction. And then once you're done, you can just log out, and then you can always just log back in, ervis@trupja.com. Password, 1, 2, 3, 4, 5, 6, and then the login button is enabled. Just log in and you're logged in to the app. Now, this is not a complicated app, but it does have all the components that you need to learn how to build full stack apps, including how to deploy these apps to Azure. As you can see at the top, this is an Azure static app that I have deployed. And then if I just go to inspect and then network, then just refresh the page. And here you can see that I'm calling this API endpoint, which is also hosted in Azure. AzureWebsites.net. So you're basically going to learn everything from scratch. We're just going to start with two empty projects, one for the Angular app, one for the ASP.NET Web API. We are going to add all these features step by step, and then at the end, we're going to deploy both apps to Azure.