IIRF Online > Development > Web Development > ASP.NET Core > ANGULAR and ASP.NET Core REST API - Real World Application
ANGULAR and ASP.NET Core REST API - Real World Application by Udemy
Create Full Stack Web Applications with Angular, ASP.NET Core Web API, Entity Framework Core, C# REST API, JWT Token
Course Highlights
- Learn and Create Full-Stack Web Applications with Angular and ASPNET Core Web API
- Build scalable C# Web APIs using ASPNET Core
- Learn how to create and use components in Angular
- Learn Angular routing and Angular Services
- 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
- Authentication and Authorization using JSON web Tokens (JWT Tokens)
- 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 Dependency Injection in ASPNET Core Web API and also in the Angular application
- Use Swagger and Postman 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
- Role based Authorization
- Angular Auth Guards, Interceptors etc
- RxJs Observables, Subjects and Subscriptions
Skills you will learn!
Curriculum
13 Topics
Introduction To The Course
Prerequisites
Setting Up Development Environment
Install .NET SDK and .NET Runtime
Download and Install Visual Studio 2022
Download and Install SQL Server (Local Instance) and SQL Server Management Stu
Install Visual Studio Code
Visual Studio Code Extensions
Download and Install NodeJs
Install Angular CLI
Getting Help
COMPLETE SOURCE CODE - GITHUB LINK
*****OLD CONTENT ***** Source Code and GITHUB Repository - Complete Source Code
16 Topics
Create New Web API
Understand Files and Folder Structure - ASPNET Web API
Understand REST and HTTP Verbs
Routing In ASP.NET Core Web API
Understand Our Project and Domain Models
Create Domain Models
Install Nuget Packages For Entity Framework Core
Create DbContext Class
Adding ConnectionString To The Database In Appsettings.Json
Understanding Dependency Injection & Injecting DbContext Into Our Application
Run EF Core Migrations
Create New Controller (CategoriesController)
DTOs and Domain Models
Create POST Categories Action Method
Repository Pattern and Benefits
Change POST Category Action Method To Use Repository
10 Topics
Important Version Check
Create Angular Project
Understand Files and Folders
Clean Angular Project And Import Bootstrap CDN
Create Navbar Component
Create Categories List Component and Angular Routing
Create Add Category Component and Routing
Create Angular Services
Enable CORS
Unsubscribe from Observables
6 Topics
What's in this section
Create API GET method to GET all categories and TEST
Create UI Service method to GET all categories
Create Environment Files
Use Get All Categories Service In Component
Using Async Pipe To Subscribe to Observables
6 Topics
What's in this section
API - Create GET API method to get category by Id and Test
UI - Create UI component Edit-Category Component and pass route parameters
UI - Create Service Method and Display Single Category
API - Update Category Action Method (HTTPPUT)
UI - Create Update Category Service Method and Connect to Edit Category Componen
3 Topics
What's in this section
API - Delete Category By Id (HTTP DELETE)
UI - Delete Category Service Method
7 Topics
What's in this section
UI - Create BlogPost List Component and Routing
UI - Create BlogPost Add Component and Routing
UI - Submit Add BlogPost Form
API - Add Blog Post Functionality (HTTP POST)
UI - Create BlogPost Service
UI - Form Submission To Create BlogPost
4 Topics
What's in this section
Seeding Some Blogs
API - Get All BlogPosts (HTTP GET)
UI - Get All BlogPosts
3 Topics
What's in this section
UI - Live Markdown Preview
UI - Image Preview
7 Topics
What's in this section
API - Change Domain Models and Add EF Core Relationships
API - Change AddBlogPost Action Method - Accept Categories
API - Change GetAll BlogPosts Action Method - Return Categories
UI - Display Categories In BlogPost List Component
UI - Display Categories MultiSelect Dropdown and Capture Categories
UI - Submit Categories - Add BlogPost
7 Topics
What's in this section
API - GET BlogPost By Id Action Method
UI - Edit BlogPost Component
UI - Fetch and Display BlogPost Data in Edit Component
UI - Show Categories and Selected Categories
API -Update BlogPost (HTTP PUT)
UI - Submit Form To Update BlogPost and Categories
3 Topics
What's in this section
API - Delete BlogPost Action Method
UI - Delete BlogPost
12 Topics
Introduction - Image Upload
UI - Create Image Component
UI - Image Selector As Modal Popup
API - Image Functionality Domain Model Changes
API - Upload Image Controller and Action Method
API - Image Repository
API - Serve Static Images From API
UI - Create Image Service and Upload Image Form
API - Get All Images
UI - Fetch All Images and Display
UI - Select Image From Image-Selector
UI - Image Selector In Add-BlogPost Component
5 Topics
What's in this section
UI - Create Home Component
UI - Create BlogDetails Component
API - GET BlogDetails by URL
UI - Display BlogDetails By URL
22 Topics
What's in this section
Authentication Flow
API - Setting Up Authentication - Install Nuget Packages
API- Create DbContext Seed Roles Seed Default User
API - Inject DbContext and Authentication Changes
API - Testing Authorize Attribute
API - Create Auth Controller and Register Action Method
API - Create Identity Tables - Run EF Core Migrations
API - Login Action Method
API - Create JWT Token
API - Role Based Authorization
API - Change Action Methods
UI - Introduction to changes
UI - Login Component and Navbar Changes
UI - Create Auth Service
UI - Store JWT Token
UI - Auth Service and Navbar Changes
UI - Implement Logout
UI - Hide Admin Menu
UI - Pass JWT Token With API Calls
UI - Interceptors and Passing Auth Header Using Interceptor
UI - Auth Guard and Implementation
7 Topics
What is covered in this section
API - Add Filtering to Web API
UI - Add Filtering to Categories Page
API - Add Sorting to Web API
UI - Add Sorting to Categories Page
API - Add Pagination to Web API
UI - Add Pagination to Categories Page
1 Topic
BONUS Lecture
18 Topics
Introduction
Adding our application to Git
Creating a ASP.NET Core API using Visual Studio
Understanding and building the Models
Adding Entity Framework Core (EF Core)
Creating the DbContext
Adding Connection to the database
Configuring DbContext and using Dependency Injection from Startup.cs
Create database using EF Core migrations
Seeding the database
Creating student repository - Repository pattern
Creating the Students API Controller
Run the API and test using Swagger UI
Domain Models and Data Models
Adding Navigation Properties Address and Gender
Install and Use Automapper
Making Our Code Asynchronous
Saving your changes to Git
21 Topics
Introduction to the Angular Application
Prerequisites to create an Angular App
Cloning UI Repository From GIT
Creating Angular application using angular CLI
Adding visual studio code extensions
Install Angular Material UI Library
Reference Angular Material Components in app.module
Install FlexBoxGrid Library
Clean UI Solution
Creating Top Navigation Component
Creating Students List Component
Creating a Route
Creating The Student Service
Adding CORS support in the API
Creating UI Models
Displaying Fetched Students
Implementing Pagination on the Table
Implementing Sorting on the Table
Implementing Filtering on the Table
Saving your changes to Git
Summary
10 Topics
Introduction
Creating a New Controller Method
Testing the new method using Swagger UI
Create New Component in the Angular UI Application
Creating Route for View Student Component
Fetching Data Of Single Student From API into UI
Defining Link Between Students Table and View Student in UI
Creating and Implementing Design For View Student
Binding Student Data From API to UI
Saving your changes to GIT
7 Topics
Introduction
Creating GET method for Gender Controller
Display Gender List In Dropdown
Create New API Method - UPDATE Student
Create Update Functionality in UI
Show Notifications On Update
Saving your changes to GIT
8 Topics
Introduction
Create New API Method - DELETE
Test DELETE method in Swagger
Create Delete Button on Student Detail Page in UI
Create DELETE Method in Student Service in UI
Show Notifications On Delete and Redirect To Students in UI
Implement OnDelete Method In UI based on Delete Button Click
Saving your changes to GIT
10 Topics
Introduction
Create Add Student API Method
Test New Add Student Method In Swagger
Create Add Button In Students Page In UI
Making Student Component Generic In UI
Creating Service Method In UI
Call Add Student API method From UI
Show Notification and Redirect
Cleaning Up Generic Component
Saving your changes to GIT
8 Topics
Introduction
Create API Method To Upload Image
Test Upload Image Method in Swagger
Create Profile Image UI Structure
Add File Upload Button in UI
Create Service Method In UI To Call API
Upload Image From UI
Saving Changes To GIT
8 Topics
Introduction
Server Side Validation - Install Fluent Validation Nuget Package
Test Server Side Validation - Add Student Request Validation
Server Side Validation For Update Student Functionality
Server Side Validation For Image Upload Functionality
Client Side Validations
Fixing Upload Image Validation
Saving your changes to GIT
2 Topics
Introduction
Changing API Configuration in UI - Using Environment File
5 Topics
Introduction
Publish .NET CORE Web API To Azure
Seeding Data To Production Database
Publish Angular UI to Google Firebase
Enable CORS For Production Web API
ANGULAR and ASP.NET Core REST API - Real World Application
Related ASP.NET Core Courses
Thank You!
Your review has been submitted successfully.