Workshop on Building Web App with ASP.NET Core Web API & Angular

Workshop on Building Web App with ASP.NET Core Web API & Angular

Understand TypeScript basics, Understand ASP.Net Core Web API, How to use Angular for client-side development, Understand Entity Framework, How to develop application using ASP.Net Core Angular

course at a glance

  • Date : 11 Apr - 25 Apr 2020
  • No. of Classes/ Sessions : 5
  • Total Hours : 40
  • Last Date of Registration : 9 Apr 2020
  • Class Schedule :
    • Saturday - 9:00 AM - 5:00 PM
    • Friday - 9:00 AM - 5:00 PM
  • venue : BASIS Institute of Technology & Management (BITM) BDBL Bhaban (3rd Floor - East), 12 Kawran Bazar, Dhaka -1215.

Price: TK. 7,500
(Excluding VAT & TAX)
Promotional Offer BDT 7000 (Valid till 30 March, 2020)

Day 01:

Workshop on Angular & Asp.net Core WebAPI

OOP Basic

  • 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

TypeScript Basic

  • Introduction to TypeScript
  • Variable declarations
  • Variable Types
  • Functions
  • Interface
  • Class
  • Access Modifiers

Angular Basic (Part 1)

  • 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

Angular Basic (Part 2)

  • 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 02:

Workshop on Angular & Asp.net Core WebAPI

  • 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

Workshop Project - Building a Walking Skeleton (Part 2)

  • Entity Framework migrations
  • Creating the database
  • Retrieving data from the database
  • Testing API using Postman

Workshop Project - Building a Walking Skeleton (Part 3)

  • Creating the Angular project.
  • Creating a service
  • Adding functions to the service
  • Making HTTP requests in Angular

 Workshop Project - Building a Walking Skeleton (Part 4)

  • 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 03:

Workshop on Angular & Asp.net Core WebAPI

  • 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
  • Adding AuthController
  • Creating the register action in Auth Controller
  • Using DTOs (Data Transfer Objects)
  • Validation in the API
  • Token Authentication
  • Creating the login action
  • Using the Authentication middleware
  • Configuring the Startup.cs class for Identity
  • Testing APIs using Postman
  • Adding third party libraries
  • Wrapping third party library as service
  • Using Angular JWT library to improve token handling
  • Adding Ngx bootstrap

Day 04:

Workshop on Angular & Asp.net Core WebAPI

  • 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
  • Introduction to Reactive forms in Angular
  • Validation in Reactive forms
  • Custom validation in Reactive forms
  • Providing validation feedback to the user
  • Handling exceptions in the API
  • Setting up the Global exception handler in the API
  • Handling errors in Angular
  • Creating the Interface
  • Creating the concrete repository
  • Creating actions in controller

Day 05:

Workshop on Angular & Asp.net Core WebAPI

  • 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
  • Introduction to resolvers
  • Adding posts resolver
  • Adding post-list component
  • Designing the post-list component template
  • Adding create post component
  • Designing the create post component template
  • Adding post resolver
  • Adding users-post component
  • Designing the users-post component template
  • Adding edit-post component
  • Designing the edit-post component template
  • Adding post-details component
  • Designing the post-details component template
  • Completing the workshop project
  • Publishing the workshop project


Prerequisite:

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

Curriculum

Module Workshop on Building Web App with ASP.NET Core Web API & Angular 40 Hrs

Tentative Class Start

11th April, 2020

Available Seat

10 / 25

who can join

  • Programmer
  • Developer
  • Software Engineer

Meet the Instructor