Thursday, October 12, 2023

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.

No comments:

Post a Comment

Thank you for visiting my blog

Kubernetes

Prerequisites We assume anyone who wants to understand Kubernetes should have an understating of how the Docker works, how the Docker images...