Asp.net MVC and Angular

Friday, 25 January 2019

ClientSide Training

Topics :

- Html
- CSS (Cascading style sheet)
- Javascripts

HTML (HyperText markup language)

HTML is markup language which deals with the page construction.
Page Extentions : .htm and .html
Similar to XML syntax's , html tags has beginning tag and ending tag .

Html page can be constructed with the html tags similar to below :

*Note : " " is comments syntax in the html

Demo.html

<html>

<head>

<style>
h1
{
color:blue;
}
</style>

</head>

<body> 
<h1>Main Content of the page goes here </h1>
</body>

</html>

You can just make a trail by copying the above entire html content from <Html> till end and paste in the notepad and save with .htm or .html extention , click on the file which saved ,then open in the browser you can see the below output :

Wednesday, 9 January 2019

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:

Tuesday, 8 January 2019

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

Sunday, 6 January 2019

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.

Tuesday, 1 January 2019

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;
}

Monday, 16 May 2016

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.