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