Tech Seeker

The main objectives of this article: Create StudentController In API Project HTTP Get Action Method In API Project(Read Operation) Create Student Component In Angular Application. Create Student Model In Angular Application. Add A Student Service And Invoke GET Student API In Angular Application. Bind API Response In Student Component In Angular Application. Fix Cross-Origin Issue. Create StudentController In API Project: A controller is an entity or class that contains logical methods or function that gets executed for an HTTP request from the clients. So let's create the 'StudentController' in API Project. API_Project/Controllers/StudentController.cs: using Microsoft.AspNetCore.Mvc; using Student.Api.Data; namespace Student.Api.Controllers; [ApiController] [Route("[controller]")] public class StudentController: ControllerBase { private readonly MyWorldDbContext _myWorldDbContext; public StudentController(MyWorldDbContext myWorldDbContext) {

The main objectives of this article are: .NET6 Web API Install .NET6 SDK Create A .NET6 Web API Application. Entity Framework Core Install Entity Framework Core NuGet SQL Connectionstring Setup Entity Framework Core DatabaseContext. .NET6 Web API: Web API is a framework for building an HTTP service that can be accessed from any client like browser, mobile devices, and desktop apps. In simple terminology API(Application Programming Interface) means an interface module that contains a programming function that can be requested via HTTP calls to save or fetch the data for their respective clients. Some of the key characteristics of  API: Supports HTTP verbs like 'GET', 'POST', 'PUT', 'DELETE', etc. Supports default responses like 'XML' and 'JSON'. Also can define custom responses. Supports self-hosting or individual hosting, so that all different kinds of apps can consume it. Authentication and Authorization are easy to implement. The id

The main objectives of this artice are: Creating Angular 13 Application. Install And Configure Bootstrap Add Bootstrap Menu Angular: Angular is a framework that can be used to build a single-page application. Angular applications are built with components that make our coding cleaner and maintainable. Angular component composes of 3 files Typescript File(*.ts), Html File (*.html), CSS File(*.css). Components typescript file and HTML file support 2-way binding which means data transfer is bi-directional. Component typescript file listens for all HTML elements events from the Html file. Create Angular(v13) Application: Let's create an Angular(v13) application to begin our sample. Make sure to install the Angular CLI tool into our local because it provides easy CLI commands to play with the angular application or to set up the application. Command To Install CLI: npm install -g @angular/cli Run the below command to create an angular application. ng new name-of-your-project

The main objectives of the article are: .NET API And Angular Application Communication. Install SQL Server And SQL Management Studio. Create SQL Database Table .NET API And Angular Application Communication: User request the angular application(Single Page Application) then js files are downloaded and then runs the browser. Since Angular is a single-page application, it depends on API for data to display. API runs at the server that gives JSON response. API communicates with the database for fetching the data. Install SQL Server And SQL Management Studio: First, install SQL serve in our local machine. So go to line 'https://www.microsoft.com/en-in/sql-server/sql-server-downloads' and then install the developer version which is free and fully functional. Next, install the SSMS(SQL Server Management Studio) IDE at 'https://docs.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms' Create A Database: A Database contains a collection of tabes

In this article, we will implement a small angular application about item sorting using the angular material drag&drop. Key Notes About Angular Material Drag&Drop: Let's know about a few key things on angular material drag&drop like: DragDropModule load from the library '@angular/cdk/drag-drop' The 'cdkDrag' attribute makes an element draggable. The 'cdkDropList' attribute on an element that surrounds a set of 'cdkDrag' elements groups the draggable into a reorderable collection. So it creates a boundary of the region for dragging. The 'cdkDropListDropped' is an event fired after dipping the item. Create An Angular Application: To accomplish our demo let's create a sample angular application. Command To Install Angular CLI: npm install -g @angular/cli Command To Create Angular App: ng new your_app_name Now let's install angular material into our application. Command To Install Angular Material: ng add @angular/mate

In this article, we are going to understand the usage of Bootstrap(V5) Modal in Angular(V13) applications. Create An Angular Application: Let's create an angular application to accomplish our demo. Command To Install Angular CLI: npm install -g @angular/cli Command To Create Angular App: ng new your_app_name Install And Configure Boostrap(V5) Install the Bootstrap NPM package. npm install bootstrap Now 'angular.json' file configure boostrap 'CSS', 'JS' references. Bootstrap Modal Usage: Let's implement a small sample to understand the usage of Bootstrap Modal. src/app.component.ts: import { Component, OnInit } from '@angular/core'; import { AppService } from './app.service'; declare var window: any; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { formModal: any; constructor() {}

In Par-1 we had implemented a basic angular authentication using the HTTP only cookie. Now we are going to enhance some features like 'Authentication Guard', 'HTTP Interceptor To  Refresh The JWT Token Inside The HTTP Only Cookie', 'User Logout'. Angular Route Guard For Authentication: Problem 1:- After successful authentication, we reload our angular application, or the user closes the browser and then opens again, we can see our user information will be lost. Problem 2:- Currently with our sample application, we can access any page means, if the user is not logged in also can access the 'dashboard' page, similarly if the user logged in can also access the login form page. Solution:- Implementing Angular  Route Guard for authentication. In 'AuthService' let's add logic to load the authenticated user information either from the 'AuthService.userProfile' variable or from the browser local storage. Because if the application is rel