Most Important Features of Angular

 2010-----angularjs---javascript framework [google]
                                |
                           ->complex UI handling will not be easy
                           ->no object oriented programming support

  2013------reactjs---javascript library [facebook]
                                 |
                           ->Component based arch makes complex UI handling
                             easy
                            ->object oriented programming support

 2015-- angular2---typescript framework[google]
                                |
                           ->Component based arch makes complex UI handling
                             easy
                           ->object oriented programming support
                           ->more databinding options compare to reactjs
                           ->built-in validations support compare to reactjs

Features of Angular

1.Component based architecture

This will simplify complex UI building, this provides reusability and
better maintainability of UI.

  Example:
  Header Component==> data + logic + UI + styling --> Reusable across
                                                      other components
    

2.Object oriented support

The complete development in angular will be in the form of classes
  

Example:
    Component Class
    Pipe  Class
    Directive Class
    Service Class
     

3.More languages support
    Angular supports different programming languages for application
    development mostly used is typescript
     Example: typescript, JavaScript and dart

    asp.net web app development===> vb.net and c# languages[mostly used is c#]

    angular web app development===> typescript, JavaScript and dart[mostly used is typescript]

4.Databinding
  Establishing a relation between a variable | method to html element is
  called "databinding", in this case variable value will be given to html element
      and html element changes will be applied to variable automatically
     this will reduce coding burden to developer

     price-100------------------> <input type="text" [(ngModel)]="price">
                                     |                                          |
                                    100                             databinding option
                                   [modified]
                                     |
                 <------------------200

  Normal approach[javascript]:
        ->body onload function----> document.getElementById("t1").value=price;

        ->textbox onchange function-->price=document.getElementById("t1").value;
                                 |
                 this can be avoided using databinding

 Note:
   Angular provides more databinding options compare to react.js

 5.Better performance
      Angular provides 5+ times better performance over angularjs

 6.Built in validations support
     Angular is providing built-in code[class with methods] to perform
     different types of validations, this makes developer job easy and faster.

   Note:
     reactjs is not providing built in validations support.

 7.Routing
     Routing will provide navigation between components[webpages]
     with in angular app,this is used to develop Single Page App[SPA]

 8.Angular material
      Angular material is a UI component library[package],which will provide
      so many built in components to provide rich user interaction with
      angular app with better look and feel.

 9.Ajax support
      Angular is providing "HttpClient" service to work with Ajax.

Ajax is used to call restapi methods running on webserver system to communicate with database.


 10.Angular universal[server side web development]
    Angular universal can be integrated with node with express for server side web development
    Angular can be used for client side[SPA] and server side web development

 11.Tooling support
       Angular is providing "Angular Cli" tool, Angular CLI is a command line tool to
       make development, testing and production build easy.

Example With Angular CLI with single command we are creating a component. If Angular CLIis not there, then we need to manually write each and every line.

Working with Fiddler to test Web API

Please refer the previous article 

https://dotnetbyudayrajakonda.blogspot.com/2023/10/creating-basic-aspnet-web-api.html

What is Fiddler?

The Fiddler is a free debugging proxy tool that is used for testing restful web services. We can use Fiddler to compose and execute different HTTP requests to our Web API and check the HTTP response.

Download the Fiddler software from the below URL

https://www.telerik.com/download/fiddler

click on the Fiddler.exe to open Fiddler

Next, click on Compose Tab as shown below

Now, enter the Web Api url which we created in the previous article and Hit Enter , you will see the response.

Request and Response Screen

Testing POST Request using Fiddler:

Select the Compose Tab,

1. Then choose the HTTP verb as POST
2. Set the Content-Type as application/JSON.
3. In the request body, provide the string value that you want to add to the string array.
4. Click on the Execute button as shown below.

Testing PUT Request using Fiddler:

1. Select the Compose Tab,
2. Then choose the HTTP verb as PUT
3. In the URL provide the index of the array element whose value you want to update.
4. Set the Content-Type as application/json.
5. In the Request body, provide the updated string value that you want to update into the string array.
6. Finally, click on the Execute button as shown below.

Testing DELETE Request using Fiddler:

1. Select the Compose Tab,
2. Then choose the HTTP verb as DELETE
3. In the URL provide the index of the array element whose value you want to update.
4. Finally, click on the Execute button as shown below.

Swagger in WEB API Application

 Let us take the previous example itself.,

Please refer :

https://dotnetbyudayrajakonda.blogspot.com/2023/10/creating-basic-aspnet-web-api.html

First, we need to install a package called

 Swashbuckle via NuGet as shown below.

You can install NuGet packages in two ways one using command  and the other using manage Nuget package from project window

Select it and click on Install

Click on Ok 

To check if that package is installed or not. You will find that in the App Start folder as shown below

Now, we will configure Swagger.

First step goto SwaggerConfig.cs and delete the commented code and modify the code as below

 

Now, Run you will be able to see the Swagger UI

In the url , type the name Swagger , then you will be able to see.

Swagger with XML Comments

Now, In the Solution Explorer right-click on the Web API project and click on the Properties. Click the Build tab and navigate to Output. Make sure the XML documentation file is checked. You can leave the default file path. In our case its bin\FirstWebAPIDemo.XML as shown below

Next, goto  SwaggerConfig.cs and make the below changes

public class SwaggerConfig
    {
        public static void Register()
        {
            GlobalConfiguration.Configuration
               .EnableSwagger(c =>
               {
                   c.SingleApiVersion("v1", "First WEB Swagger Demo");
                   c.IncludeXmlComments(string.Format(@"{0}\bin\WebApplication1.XML",
                                        System.AppDomain.CurrentDomain.BaseDirectory));
               })
               .EnableSwaggerUi();
        }
    }

Now, goto ValuesController and add some xml comments to it as shown below

Now, run the application and you will be able to see the xml comments 

Web API HTTP requests and responses.

 Request Verbs: 

The HTTP verbs such as GET, POST, PUT, and DELETE  they will  describe what should be done with the Web API resource. 

For example, if you want to  read, create, update or delete an entity? The HTTP Verbs GET, PUT, POST, and DELETE are the most commonly used verbs in real-time applications. 

Request Header: 

When a client sends the request to the server, the request contains a header and a body. The header of the request contains some additional information such as what type of response the client required. For example, the client wants the response to be in XML or JSON format.

Request Body: 

The Request Body contains the data that you want to send to the server. For example, a POST request contains the data in the Request Body for the new item that you want to create. The data may be in the form of XML or JSON.

Response Body: 

The Response Body contains the data that is sent as a response from the server. For example, if you request a specific employee, then the response body includes the employee details either in the form of XML or JSON.

Response Status codes: 

The Response Status Codes are the HTTP status codes that will specify the status of the request. The most common status codes are 200/OK, 204/No Content, 500/Internal Server Error, and 404/Not Found. 

 In ASP.NET Web API, an action method that returns void will send the status code 204 No Content 

Creating Basic ASP.NET Web API Application

First step

Open Visual Studio and select create new Project

Click on Next

Click on Create

Select Web Api and click on create

The project will be loaded as per the below screen

We need to make a note that Web API Controllers are different from MVC Controllers. In our example, the ValuesController is WebAPI Controller.

From the above screen shot , we can see the Apicontroller is inherited from the ApiController class which is present in sytem.web.http namespace.

Where as , in the below screen HomeController is inherited from Controller which is present System.Web.Mvc namespace.

Now, let us discuss on the ValuesController, we have get/post/put/delete these are nothing but http verbs as shown below

Next go to global.asax file, within that file, we have method called application start, which gets executed only once when the application starts for the first time.

Here , in the below code we are registering the bundles, filters,route

 

Now, go to webapiconfig.Register File in the App_Start Folder as shown below

Here, in the below code, you can see the default route is registered as shown below

Note: If the request controller name does not exists, then we will get the error message as 

No HTTP resource was found that matches the request URI.