Angular interceptors sample code

Angular Interceptors : 

Interceptors  generally used to modify the request before sending the request to the server and modifying the response after receiving the response from the server before passing to the application code .

Here is the sample code for angular interceptors :


DemoInterceptor.ts 

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable()
export class DemoInterceptor implements HttpInterceptor
{
    intercept(req : HttpRequest<any>,next : HttpHandler) : Observable<HttpEvent<any>>
    {
        let request  : HttpRequest<any> = req.clone({
         setHeaders :
         {
             "Authorization" : "customtoken"
         }
        });
        return next.handle(request);
    }
}

Once the above code snippet is used then , we need to configure the interceptor in the app.module.ts
providers sections  like below  :

app.module.ts  : 

 providers: [
             {
               provide : HTTP_INTERCEPTORS , useClass : DemoInterceptor,multi:true
            }

  ]


After these configurations we can see the request headers for all request contains the "Authorization" in the request header:

Different ways of Registering service in angular

There are various of registering  a class as a dependency in angular.

   1.  Registering globally  to root [This will be available to entire application]:

      LocalServicesService .service.ts
            @Injectable({
                             providedIn: 'root'
                                  })

            export class LocalServicesService {
                        getDetails (){}
                     }

Now if the class is registered as injectable then we can use this class any where in the entire solution as dependency class for ex  like this  :

    HeaderComponent.ts 
          @Component({
                          selector: '',
                          templateUrl: '',                 
                          providers: []
            }) 
           export class HeaderComponent implements OnInit {
                              constructor(private service : LocalServicesService) {  }
                                           ngOnInit() {   
                                           this.service.getDetails().subscribe();
                                          } 
 }

2. Registering service to specific component 

 LocalServicesService .service.ts

             @Injectable()           
            export class LocalServicesService {
                        getDetails (){}
             }


           
           HeaderComponent.ts 

             @Component({
                          selector: '',
                          templateUrl: '',                 
                          providers: [LocalServicesService]
              })   
              export class HeaderComponent implements OnInit {
                              constructor(private service : LocalServicesService) {  }

                        ngOnInit() {   
                                           this.service.getDetails().subscribe();
                                          } 
                       }

In this scenario the LocalServices class can be injectable to only HeaderComponent

                                                    

Debugging in Angular with Visual studio code

Setting up debug steps for Visual studio code  :

1. In the above screenshot , click on debug menu from the left panel

2. You need to setup the launch.json file  with the below code  changes  :

   "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
3. Make sure for chrome you need to install the debug for chrome  extension .

4. Run the angular project , put the break point where ever required.

   

C# code for HttpPost with Authorization Token

C# code for HttpPost with Authorization Token


Assembly :  System.Net.Http


using (var client = new HttpClient())
            {
                client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", token);
                var res = await client.PostAsync("URL",
                new  StringContent(JsonConvert.SerializeObject(yourObject),Encoding.UTF8, "application/json"));
                var resp =res.Content.ReadAsStringAsync().Result;
                var response = res;
            }

Upload file programmatically C# to Microsoft Azure Storage

c# code sample for uploading  file into Azure storage programmatically         


Nuget Package  :
          Install  "Microsoft.Azure.Storage.Blob" package
         

        private async Task<bool> UploadFile()
{

            CloudBlobContainer blobContainer = new CloudBlobContainer(new  Uri("URL"));
            CloudBlockBlob blob = blobContainer.GetBlockBlobReference("FolderName");
            await blob.UploadFromFileAsync("FolderPath");
            return true;
}

Angular Environment Setup

Angular  Environment Setup:

Here are the simple steps to configure the angular environment.

Step 1 : Firstly you need to check if npm is installed in the system or not. Simply  use “npm -version ” in the command prompt , if this shows any version in the system your are good to proceed with second step else go to this link  https://nodejs.org/en/  to download and install the node then proceed with step2.

Step 2 : Secondly you need to check for “ng -version” for angular CLI , if you get  some version in the command prompt then you are good to go with the angular development ,else  run the command in the cmd prompt  “npm install -g @angular/cli”  to install the angular cli globally (-g in the command indicates globally)

Hey!!!! If you done with the above 2 steps then you are good for the development to start with.

ASP.NET MVC Action Filter

ASP.NET MVC Filters allow us to inject extra logic into MVC Framework request processing, this logic either before or after an action is executed. 

I will show you the different categories of filters that the MVC Framework supports, how to create and use filters, and how to control their execution. We can make your own custom filters or attributes either by implementing ASP.NET MVC filter interface or by inheriting and overriding methods of ASP.NET MVC filter attribute class if available.

Understanding the Four Basic Types of Filters

The ASP.NET MVC Framework supports four different types of filters. Each allows you to introduce logic at different points during request processing. The four filter types are described in Table.

All ASP.NET MVC filter are executed in an order. Following list shows the order in which ASP.NET MVC Filters are executing.

1. Authentication filters
2. Authorization filters
3. Action filters
4. Result filters