Build Amazing Apps With Angular And Asp.Net Core Rest Api

Create a UI Application using Angular and a REST Web API using ASP.NET Core and create a real world full stack app

What you'll learn
Learn how to create an Angular application using Angular CLI and use Angular Material library to make the application beautiful
Learn how to build a real world full stack web application from scratch to finish using ASPNET Core 5 and Angular 12 and Entity Framework Core
Learn how to create and use components in Angular
Learn Angular routing
Learn how to create an ASPNET Core web api from scratch and build CRUD operations in it using HTTP Web Methods like GET, POST, PUT, DELETE
Learn and use Entity Framework Core along with the ASPNET Core Web API to persist and retrieve data from SQL Server database
Learn to upload an Image File from Angular UI application to the ASPNET Core Web API
Implement Filtering, Sorting and Pagination on the UI application to display table data using Angular Material
Implement Angular Material Date Picker, Dropdown List, Checkbox, Notifications and other UI elements
Implement Dependency Injection in ASPNET Core Web API and also in the Angular application
Use AutoMapper to map objects inside ASPNET Core Web API
Use Swagger to test your API data
Learn the Best Practices along with every tutorial to make your app clean, generic and re-usable
You will get the confidence to build a complete app from scratch on your own
Create an DOTNET Core API and consume it from the Angular application
Requirements
Hello world experience in ASPNET Core and Angular
Understand the basic concepts of HTML, CSS and Typescript
A passion to build amazing full stack applications
Description
This is a complete guide to creating real-world highly scalable full-stack applications using ASP.NET CORE WEB API and ANGULAR.In this course, you will be able to use your beginner and intermediate level knowledge of Angular and ASP.NET Core to build a real-world full-stack application from scratch and also deploy it to Azure. Make your Angular and ASP.NET Core to use by developing a real-world application and make your concepts, even more, stronger by applying them in a real-world situation. This Amazing Course covers a lot of best practices and tips and tricks every now and then that would make you a pro in developing full-stack web applications from scratch.We will create a Student Admin Portal web application which will be a complete end-to-end admin app. On the front page, the Admin would be able to see the list of students and perform filtering, sorting, and pagination on the student's table. We will have another page will be a generic page used to add a new student or update a new student.In this course, you will start from scratch and create a REST API using ASP.NET CORE. You will learn how you can test your API using SWAGGER and POSTMAN. During the course, you will learn to implement Create, Read, Update and Delete (CRUD) operations.You will learn how to use Entity Framework Core as an ORM tool to retrieve and persist data from a SQL SERVER database.On the front end side of things, you will learn to build an Angular application from scratch. You will learn to add libraries and install Angular Material and Flexbox Grid as our CSS libraries. We will create Angular components, understand how routing works in Angular and define our routes. We will consume our Dotnet API and make HTTP calls from our UI to the API making CRUD operations.In the end, we will publish our API to Microsoft Azure and our UI application to Google Firebase, thereby completing the entire lifecycle of a real-world application.In this full-stack web application, you will learn- How to create a new Angular app from scratch- Installing Angular Material CSS Library- Creating New Angular Components- Use Angular Routing- Create a Single Page App- Share Angular components- Using Angular Material for Pagination- Table Sorting- Table Filtering- Angular Forms- Angular Form Validations- Uploading Images using Angular UI- Make HTTP API Requests using Angular HTTP Client- Create Angular Services- Use Typesafe models and interfaces- Publish Angular App to Google FirebaseWe will create our web API using ASP.NET Core and we will learn the below- Create ASP.NET Core Web API from scratch- Install and Use Entity Framework Core in our API as an ORM- Use SQL Server as our database- Make use of Entity Framework Migrations to create tables and databases inside SQL Server database- Create a new API Controller- Use HTTP methods- Use Repository Pattern- Use Dependency Injection to inject services- CRUD Operations (Create Read Update and Delete)- Use Automapper to map models- Use FluentValidation to validate request models- Publish ASP.NET Core Web API to Microsoft Azure

Overview

Section 1: Introduction

Lecture 1 Introduction to the course

Lecture 2 Prerequisites

Lecture 3 Tech stack used

Lecture 4 Setting up development environment

Lecture 5 Download and Install Visual Studio 2019

Lecture 6 Install .NET SDK and .NET Runtime

Lecture 7 Install Visual Studio Code

Lecture 8 Install SQL Server Management Studio

Lecture 9 Install NodeJs

Lecture 10 Install Angular CLI

Lecture 11 Getting help

Lecture 12 Source Code and GITHUB Repository - Complete Source Code

Section 2: Building APIs using ASP.NET CORE

Lecture 13 Introduction

Lecture 14 Adding our application to Git

Lecture 15 Creating a ASP.NET Core API using Visual Studio

Lecture 16 Understanding and building the Models

Lecture 17 Adding Entity Framework Core (EF Core)

Lecture 18 Creating the DbContext

Lecture 19 Adding Connection to the database

Lecture 20 Configuring DbContext and using Dependency Injection from Startup.cs

Lecture 21 Create database using EF Core migrations

Lecture 22 Seeding the database

Lecture 23 Creating student repository - Repository pattern

Lecture 24 Creating the Students API Controller

Lecture 25 Run the API and test using Swagger UI

Lecture 26 Domain Models and Data Models

Lecture 27 Adding Navigation Properties Address and Gender

Lecture 28 Install and Use Automapper

Lecture 29 Making Our Code Asynchronous

Lecture 30 Saving your changes to Git

Section 3: Creating the UI application using Angular

Lecture 31 Introduction to the Angular Application

Lecture 32 Prerequisites to create an Angular App

Lecture 33 Cloning UI Repository From GIT

Lecture 34 Creating Angular application using angular CLI

Lecture 35 Adding visual studio code extensions

Lecture 36 Install Angular Material UI Library

Lecture 37 Reference Angular Material Components in app.module

Lecture 38 Install FlexBoxGrid Library

Lecture 39 Clean UI Solution

Lecture 40 Creating Top Navigation Component

Lecture 41 Creating Students List Component

Lecture 42 Creating a Route

Lecture 43 Creating The Student Service

Lecture 44 Adding CORS support in the API

Lecture 45 Creating UI Models

Lecture 46 Displaying Fetched Students

Lecture 47 Implementing Pagination on the Table

Lecture 48 Implementing Sorting on the Table

Lecture 49 Implementing Filtering on the Table

Lecture 50 Saving your changes to Git

Lecture 51 Summary

Section 4: Retrieving and Displaying Single Student Details (READ in CRUD)

Lecture 52 Introduction

Lecture 53 Creating a New Controller Method

Lecture 54 Testing the new method using Swagger UI

Lecture 55 Create New Component in the Angular UI Application

Lecture 56 Creating Route for View Student Component

Lecture 57 Fetching Data Of Single Student From API into UI

Lecture 58 Defining Link Between Students Table and View Student in UI

Lecture 59 Creating and Implementing Design For View Student

Lecture 60 Binding Student Data From API to UI

Lecture 61 Saving your changes to GIT

Section 5: Updating an Existing Student - (UPDATE in CRUD)

Lecture 62 Introduction

Lecture 63 Creating GET method for Gender Controller

Lecture 64 Display Gender List In Dropdown

Lecture 65 Create New API Method - UPDATE Student

Lecture 66 Create Update Functionality in UI

Lecture 67 Show Notifications On Update

Lecture 68 Saving your changes to GIT

Section 6: Deleting a Student (DELETE in CRUD)

Lecture 69 Introduction

Lecture 70 Create New API Method - DELETE

Lecture 71 Test DELETE method in Swagger

Lecture 72 Create Delete Button on Student Detail Page in UI

Lecture 73 Create DELETE Method in Student Service in UI

Lecture 74 Implement OnDelete Method In UI based on Delete Button Click

Lecture 75 Show Notifications On Delete and Redirect To Students in UI

Lecture 76 Saving your changes to GIT

Section 7: Adding/Creating A New Student (CREATE in CRUD)

Lecture 77 Introduction

Lecture 78 Create Add Student API Method

Lecture 79 Test New Add Student Method In Swagger

Lecture 80 Create Add Button In Students Page In UI

Lecture 81 Making Student Component Generic In UI

Lecture 82 Creating Service Method In UI

Lecture 83 Call Add Student API method From UI

Lecture 84 Show Notification and Redirect

Lecture 85 Cleaning Up Generic Component

Lecture 86 Saving your changes to GIT

Section 8: Upload Image From Angular UI to Web API

Lecture 87 Introduction

Lecture 88 Create API Method To Upload Image

Lecture 89 Test Upload Image Method in Swagger

Lecture 90 Create Profile Image UI Structure

Lecture 91 Add File Upload Button in UI

Lecture 92 Create Service Method In UI To Call API

Lecture 93 Upload Image From UI

Lecture 94 Saving Changes To GIT

Section 9: Server and Client Side Validations

Lecture 95 Introduction

Lecture 96 Server Side Validation - Install Fluent Validation Nuget Package

Lecture 97 Test Server Side Validation - Add Student Request Validation

Lecture 98 Server Side Validation For Update Student Functionality

Lecture 99 Server Side Validation For Image Upload Functionality

Lecture 100 Client Side Validations

Lecture 101 Fixing Upload Image Validation

Lecture 102 Saving your changes to GIT

Section 10: Making Our Solution Production Ready & Best Practices

Lecture 103 Introduction

Lecture 104 Changing API Configuration in UI - Using Environment File

Section 11: Deploy / Publish Our UI and API To The Internet

Lecture 105 Introduction

Lecture 106 Publish .NET CORE Web API To Azure

Lecture 107 Seeding Data To Production Database

Lecture 108 Publish Angular UI to Google Firebase

Lecture 109 Enable CORS For Production Web API

Beginner to Intermediate Developer with knowledge in ASPNET Core and ANGULAR