Monday, April 10, 2023

Angular- Introduction

What is Angular?

Angular is a JavaScript framework for building web applications. It is maintained by Google and is widely used for creating dynamic single-page applications (SPAs) and complex user interfaces.

Angular provides some powerful features such as two-way data binding, dependency injection, directives, and services that make it easy to build robust and scalable applications.




Below are some features Angular provides-

  1. Component-based architecture- Angular is based on a component-based architecture, which allows developers to create reusable, modular components that can be quickly composed into larger applications.
  2. Two-way data binding- Angular provides two-way data binding, which allows changes made to the model to be automatically reflected in the view and vice versa. This eliminates the need for complex event handling and makes it easier to keep the view and model in sync.
  3. Dependency Injection- Angular's dependency injection system makes it easy to manage dependencies and reduce coupling between components. This helps to improve the maintainability and testability of the application.

Sunday, April 9, 2023

Single Page Application (SPA)

What is Single Page Application (SPA)?

A Single Page Application (SPA) is a web application that loads a single HTML page and dynamically updates its content as the user interacts with the application, without requiring a full page reload. 

This approach is different from traditional web applications, where clicking on a link or button would cause the browser to request a new page from the server, which would then be rendered in the browser.

Saturday, April 8, 2023

Angular Reactive Form - File validators for File Upload

File upload fuctionality is a very common use case in applications. Whenever we allow users to upload files to server, we should have both client side and server side validation. Most likely we validates file size and file extension.
In this post, we are going to see the validators for File Upload functionality in Aangular Reactive Form.

file-validations.ts

In file-validations.ts, we have three validators- FileExtension validator, FileMaxSize validator and FIle Minimum size validator.
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
const FILE_MAX_SIZE = 2048;
const FILE_MIN_SIZE = 1024;
export class FileValidations {
  public static fileExtensionValidator(
    acceptedExtensions: string[]
  ): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (control.value) {
        const ext = control.value.split('.').pop();
        if (!acceptedExtensions.includes(ext)) {
          return {
            fileExtension: {
              acceptedExtensions: acceptedExtensions,
              actualExtension: ext,
            },
          };
        }
      }
      return null;
    };
  }
  public static fileMaxSizeValidator(files: FileList): ValidatorFn {
    return (): ValidationErrors | null => {
      if (files.length > 0) {
        if (Math.round(files[0].size / 1024) > FILE_MAX_SIZE) {
          return {
            fileMaxSize: {
              requiredSize: `${Math.round(FILE_MAX_SIZE) / 1024}MB`,
              actualSize: `${Math.round(
                Math.round(files[0].size / 1024) / 1024
              )}MB`,
            },
          };
        }
      }
      return null;
    };
  }
  public static fileMinSizeValidator(files: FileList): ValidatorFn {
    return (): ValidationErrors | null => {
      if (files.length > 0) {
        if (Math.round(files[0].size / 1024) < FILE_MIN_SIZE) {
          return {
            fileMinSize: {
              requiredSize: `${Math.round(FILE_MIN_SIZE) / 1024}MB`,
              actualSize: `${Math.round(
                Math.round(files[0].size / 1024) / 1024
              )}MB`,
            },
          };
        }
      }
      return null;
    };
  }
}

Thursday, July 27, 2017

ASP.Net MVC - Multiple Models in Single View - Part2

In last post, we have talked about different approaches to pass the multiple models in single view. We have also looked some of them like Dynamic,View Data and View Bag.

This post is the continuation of previous post. Here we will see the use of ViewModel,Tuple and ViewComponent for passing multiple model in single view . Let's first see what was our problem statement-

Problem Statement

We have two models Student and Course and we need to show the the list of Students and Courses in a single view.

Below are the model definition for Student and Course
public class Student
{
    public int StudentID { get; set; }
    public string StudentName { get; set; }       
}

public class Course
{
    public int CourseID { get; set; }
    public string CourseName { get; set; }
}

Solutions to achieve

Here we will see ViewModel,Tuple and ViewComponent to achieve our requirement

1. View Model

ViewModel is a class which contains the properties which are represented in view or represents the data that we want to display on our view.

If we want to create a View where we want to display list of Students and Courses then we will create our View Model (StudentCourseViewModel.cs).

Tuesday, July 25, 2017

ASP.Net MVC - Multiple Models in Single View - Part1

In MVC we cannot use multiple model tag on a view. But Many times we need to pass multiple models from controller to view or we want to show data from multiple model on a view. So In this post we will see the different ways to bind or pass the multiple models to single view.

Problem Statement

Lets suppose we have two models Student and Course and we need to show the the list of Students and Courses in a single view.

Below are the model definition for Student and Course
public class Student
{
    public int StudentID { get; set; }
    public string StudentName { get; set; }       
}

public class Course
{
    public int CourseID { get; set; }
    public string CourseName { get; set; }
}

Below is the Repository class which have two method for returning the list of Students and Courses
public class Repository
{
    public static List<student> GetStudents()
    {
          return new List<student>{ new Student() { StudentID = 1, StudentName = "Manish" },
                 new Student() { StudentID = 2, StudentName = "Prashant" },
                 new Student() { StudentID = 3, StudentName = "Deepak" }
                 };
     }
     public static List<course> GetCourses()
     {
          return new List<course> {
                 new Course () {  CourseID = 1, CourseName = "Chemistry"},
                 new Course () {  CourseID = 2, CourseName = "Physics"},
                 new Course () {  CourseID = 3, CourseName = "Math" },
                 new Course () {  CourseID = 4, CourseName = "Computer Science" }
                 };
     }
}
^ Scroll to Top