What You Will Learn

 
  • Understand TypeScript basics
  • Understand ASP.Net Core Web API
  • How to use Angular for client-side development
  • Understand Entity Framework
  • How to develop & deploy application using ASP.Net Core Web API & Angular
  • Implement ASP.Net Core Identity in application

Outline

Day 1

Session-01: OOP Basic

9:00 AM -11:30 AM
  • Workshop introduction
  • Introduction to OOP
  • Class
  • Object
  • Value type, Reference type
  • Constructor, Constructor overloading, Constructor chaining
  • Property
  • One-to-one association relationship
  • One-to-many association relationship
  • Uses relationship
  • Inheritance
  • Polymorphism
  • Abstract class and method
  • Interface
Tea Break 11:30 AM - 11:45 AM  
Session-02: TypeScript Basic 11:45 AM - 12:30 PM
  • Introduction to TypeScript
  • Variable declarations
  • Variable Types
  • Functions
  • Interface
  • Class
  • Access Modifiers
Lunch & Prayer Break 12:30 PM - 2:30 PM  
Session-03: Angular Basic (Part 1) 2:30 PM - 4:00 PM
  • Introduction to Angular
  • Adding Visual Studio Code extensions for Angular.
  • Creating the first app
  • Folder structure of an Angular project
  • Editing our first app
  • Components
  • Role of AppModule and Component declaration
  • Understanding Components selector
Tea Break 4:00 PM - 4:15 PM  
Session-04: Angular Basic (Part 2) 4:15 PM - 6:00 PM
  • Creating a navbar
  • Routing
  • What is data binding
  • Property binding
  • Event binding
  • One-way-data binding
  • Two-way-data binding
  • Understanding Directives
  • Working with directives (ng-template, ngIf, ngFor)
  • Style and Class Binding
  • Services
  • Http Client
Day 2
Session-01: Workshop Project - Building a Walking Skeleton (Part 1) 9:00 AM - 11:00 AM
  • What is API
  • Introduction to Asp.Net Core and .Net Core WebAPI
  • Setting up visual studio code for our development workflow
  • Creating the .Net Core WebAPI project
  • Reviewing the folder structure and files of the .Net Core WebAPI project
  • Adding a controller
  • Running the .Net Core application
  • Environment settings
  • Creating the datacontext and a model
Tea Break 11:00 AM - 11:15 AM  
Session-02: Workshop Project - Building a Walking Skeleton (Part 2) 11:15 AM - 1:00 PM
  • Entity Framework migrations
  • Creating the database
  • Retrieving data from the database
  • Testing API using Postman
Lunch & Prayer Break 1:00 PM - 2:00 PM  
Session-03: Workshop Project - Building a Walking Skeleton (Part 3) 2:00 PM - 4:00 PM
  • Creating the Angular project
  • Creating a service
  • Adding functions to the service
  • Making HTTP requests in Angular
Tea Break 4:00 PM - 4:15 PM  
Session-04: Workshop Project - Building a Walking Skeleton (Part 4) 4:15 PM - 6:00 PM
  • Adding CORS support in the API
  • Retrieving data from the API and showing on the HTML page
  • Adding bootstrap and font-awesome to our Angular App
Day 3
Session-01: Workshop Project - Authentication in API (Part 1) 9:00 AM - 10:45 AM
  • Introduction
  • Creating the user model
  • Configuring the DataContext for Identity
  • The Repository pattern
  • Creating interface for the Auth repository
  • Creating the concrete Auth repository
  • Creating register and login repository method
  • Registering services in the startup class
Tea Break 10:45 AM - 11:00 AM  
Session-02: Workshop Project - Authentication in API (Part 2) 11:00 AM - 1:00 PM
  • Adding AuthController
  • Creating the register action in Auth Controller
  • Using DTOs (Data Transfer Objects)
  • Validation in the API
  • Token Authentication
Lunch Break 1:00 PM - 2:00 PM  
Session-03: Workshop Project - Authentication in API (Part 3) 2:00 PM - 3:00 PM
  • Creating the login action
  • Using the Authentication middleware
  • Configuring the Startup.cs class for Identity
  • Testing APIs using Postman
Tea Break 3:00 PM - 3:15 PM  
Session-04: Workshop Project - Adding Third-Party Libraries 3:15 PM - 6:00 PM
  • Adding third-party libraries
  • Wrapping third party library as service
  • Using Angular JWT library to improve token handling
  • Adding Ngx bootstrap
Day 4
Session-01: Workshop Project - Login & Register in Angular (Part 1) 9:00 AM - 11:30 AM
  • Introduction
  • Creating the navigation and login form
  • Introduction to Angular template forms
  • Using Angular JWT library to decode token
  • Creating Auth service
  • Injecting Angular services to components
  • Adding register component
  • Adding register function to Auth service
Tea Break 11:30 AM - 11:45 AM  
Session-02: Workshop Project - Login & Register in Angular (Part 2) 11:45 AM - 12:30 PM
  • Introduction to Reactive forms in Angular
  • Validation in Reactive forms
  • Custom validation in Reactive forms
  • Providing validation feedback to the user
Lunch & Prayer Break 12:30 PM - 2:30 PM  
Session-03: Workshop Project - Error Handling 2:30 PM - 3:30 PM
  • Handling exceptions in the API
  • Setting up the Global exception handler in the API
  • Handling errors in Angular
Tea Break 3:30 PM - 3:45 PM  
Session-04: Workshop Project - Implementing basic CRUD functionality (Part 1) 3:45 PM - 6:00 PM
  • Creating the Interface
  • Creating the concrete repository
  • Creating actions in controller
Day 5
Session-01: Workshop Project - Implementing basic CRUD functionality (Part 2) 9:00 AM - 11:00 AM
  • Adding the post service
  • Adding function for retrieving all posts
  • Adding function for retrieving all posts by user id
  • Adding function for retrieving single post
  • Adding function for creating post
  • Adding function for updating post
Tea Break 11:00 AM - 11:15 AM  
Session-02: Workshop Project - Implementing basic CRUD functionality (Part 3) 11:15 AM - 1:00 PM
  • Introduction to resolvers
  • Adding posts resolver
  • Adding post-list component
  • Designing the post-list component template
  • Adding create post component
Lunch & Prayer Break 1:00 PM - 2:00 PM  
Session-03: Workshop Project - Implementing basic CRUD functionality (Part 4) 2:00 PM - 4:00 PM
  • Designing the create post component template
  • Adding post resolver
  • Adding users-post component
  • Designing the users-post component template
Tea Break 4:00 PM - 4:15 PM  
Session-04: Workshop Project - Implementing basic CRUD functionality (Part 5) 4:15 PM - 6:00 PM
  • Adding edit-post component
  • Designing the edit-post component template
  • Adding post-details component
  • Designing the post-details component template

Prerequisites

 
  • Web design, JavaScript and C#
  • Database design
  • Concept on ASP.NET MVC

Who is this workshop for

 
  • Programmer
  • Developer
  • Software Engineer

Tools we use

 
  • Visual Studio Code
  • SQL Server 2016
  • SQL Server Management Studio (SSMS)
  • Postman (for API testing)

** Participants have to bring their own laptops.
** Certificates will be given after successful course completion.


About the Workshop

ASP.NET Core is an open-source and cross-platform application framework used for developing modern cloud-based web applications utilizing .NET. ASP.NET Core is built with the needs of modern web applications in mind. As well as to be cloud-ready by introducing environment-based configuration and by providing built-in dependency injection support.

Angular is a JavaScript framework which makes you able to create reactive Single Page Applications (SPAs). This is a leading front-end development framework which is regularly updated by Angular team of Google.

In this workshop, ‘Building Web App with ASP.NET Core Web API and Angular’, you’ll learn how these technologies can speed up the development of web apps. Finally, you’ll learn how to secure your pages and API’s with ASP.NET Core identity and also learn how to use Angular for client-side development.