Tuesday, 21 January 2020

Angular - the future of enterprise application development By Sujeet Bhujbal

 What is Enterprise Application 

An enterprise application is a large software system platform designed to operate in a corporate environment such as business or government. An enterprise applications complex, scalable, component-based and distributed.

What is Enterprise Application Development

Enterprise Application Development is a complex process of creating an application for business purposes. They are complex, customized for critical business requirements and can be deployed on the cloud, on a variety of platforms across corporate networks, intranet, etc. Designing and developing such enterprise applications means satisfying hundreds or thousands of separate requirements.

Common uses for enterprise software include:
  • Order processing
  • Procurement
  • Scheduling
  • Customer information management
  • Energy management
  • Accounting


Changing Trends in Enterprise Application Development

1.User Experience
       Users expect their apps to be more easy to use and understandable

2.Full Stack Development:
                    Use of modern client-side frameworks and server-side technologies\

3.API-led Integration:
                 Providing REST API based integration approach such that application can easily integrate into an internal, external as well as  Cloud-based service. This allows for faster, easier development.

 4. Rapid Application Delivery & Low-code Development
                      Rapid Application Delivery & Low code development is the new trend in Enterprise. Minimal Coding is making Enterprise Application Development more business-centric and easy. Customers are involved in each phase of development

5. Loose Coupling (APIs, Microservices, Composable architecture)–
           Loose Coupling and microservices enterprise applications are delivered as an independent runtime service with a well-defined API. The Microservices approach allows faster delivery of smaller incremental changes to an application.
6.Ready-made Application Infrastructure
                  Need readymade application infrastructure and framework

Angular  - the ideal enterprise application development framework

 Angular is used for rapid application development and delivery platform that helps create enterprise-grade web and mobile apps. With over 10 years of market presence, thousands of developers use it to create applications 67% faster.
The angular platform builds, deliver and manages modern custom applications, improves business agility and applies innovation. The Angular framework leverages the latest trends and technologies in Rapid App Development (RAD) such as multi-device auto-responsive interfaces and componentized app assembly,

Angular is achieving global success in enterprises, with a few of which are briefly described below:
•           American Express, Dell, Marriott, Wal-Mart and many Fortune 500 companies are using Angular as their front-end development framework today.
•           Amazon, Google, YouTube, Nike, and Virgin America and many others are actively using Angular for their projects.
•            Google’s Angular framework is making it possible for enterprise apps to support browser-side rules processing and multiple larger catalogs, streamlining complex customer, order management, and pricing workflows

Below are the advantages of Angular for enterprise application

1.Small and Fast application development
Enterprise solutions run on multiple components built by multiple teams. This puts extra pressure on developers in terms of scaling and actualization. A modern web application has to be sensitive for the reaction from users and deliver impeccable performance because there are no second chances. Small and fast app development is one of the core focus areas of Angular today. The recent release of Angular 2.0, a complete re-write of the development framework from 1.0 to take full advantage of modern web and native mobile platforms, including greater modularity, support for modern browsers, TypeScript support in addition to several other feature areas.
Also in the latest angular 8.0 version, they introduced the new IVY framework which will reduce all the project size in KBS.
Angular application development can increase speed and reduce codebase size
Angular team has committed to ensuring stability and a smooth forward transition between releases. The team is also heavily invested in providing tools to empower developers to seamlessly upgrade between versions in an automated way.  

2. Typescript
TypeScripthas proved beneficial in gaining enterprise adoption and improving security.   TypeScript addresses enterprise needs in a few ways including integration with Microsoft's development stack (Visual Studio, VS Code, Office development)
also as a language itself as TypeScript helps bridge the knowledge gap for server-side developers moving from .NET to Javascript. In typescript finding bugs faster in their code, refactoring and readability can accelerate development.

3, Building Mobile Application easier
 Angular is used for mainstream Google apps including AdWords, AdSense, API Explorer, and others A broad spectrum of Google customers are developing mobile apps using Angular including LucidChart
Angular is designed specifically with mobile app development in mind.

4. Customer Experience
 The biggest advantage of Angular and other open-source frameworks is the ability to tailor the user experience in an enterprise app quickly and have that change reflect across all Web-enabled platforms. This alone saves thousands of hours of programming, testing and validation time. . Angular is proving to be superior at templating and localization compared to legacy programming languages.
 Analytics, BI and e-Commerce apps often rely on large-scale data sets to fulfill queries and complete workflows. By providing backend support vias APIs to large-scale datasets, Angular is enabling all workflows designed into the app to be available on any platform anytime.


Angular UI Component for Enterprise Application


1.Telerik Kendo UI for Angular
                      This one was almost the most obvious and natural choice, as we were already using Kendo components.

2. Angular Material
If you need Table component with built-in individual column filtering and row details, sticky/stacked columns, built-in grouping, etc. — you might want to consider other option, or, at least, test MatTable component on some real-world test case

3. Vmware Clarity
Project Clarity is an open-source design system that brings together UX guidelines, an HTML/CSS framework, and Angular components. Clarity is for both designers and developers.

In this way, Angular is best for Enterprise level applications.

Happy programming!!
Don’t forget to leave your feedback and comments below!

Wednesday, 15 May 2019

.map(), .reduce(), and .filter() in Javascript

Introduction
 .map(), .reduce(), and .filter() are new features in Javascript. In this article i will tell you example of  .map(), .reduce(), and .filter() function,


What is .map()

The Map object holds key-value pairs and remembers the original insertion order of the keys.Any value  may be used as either a key or a value.

Map object iterates its elements in insertion order — a for loop returns an array of [key, value] for each iteration.

The map() method creates a new array with the results of calling a function for every array element.
The map() method calls the provided function once for each element in an array, in order

Example : 


If you want ids of all employees There are multiple ways to achieve this. You might want to do it by creating an empty array, then using .forEach().for(...of), or a simple .for() to meet your goal.



var Employees = [
  { id: 20, name: 'Sujeet' },
  { id: 24, name: 'Rahul' },
  { id: 56, name: 'Raj' },
  { id: 88, name: 'ASSHAY' }
];

const empIds = Employees.map(emp => emp.id);

console.log(empIds)

OutPut

(4) [20, 24, 56, 88]



What is .Reduce()

 

The reduce() method reduces the array to a single value. The reduce() method executes a provided function for each value of the array (from left-to-right). The return value of the function is stored in an accumulator (result/total).

The reduce() method reduces the array to a single value.
The reduce() method executes a provided function for each value of the array (from left-to-right).
The return value of the function is stored in an accumulator (result/total).

Example


   var employees = [
  {
    id: 10,
    name: "Sujeet",
    years: 10,
  },
  {
    id: 2,
    name: "Rahul",
    years: 3,
  },
  {
    id: 41,
    name: "Ramesh",
    years: 1,
  },
  {
    id: 99,
    name: "Sumit",
    years: 12,
  }
];

const totalYears = employees.reduce((acc, emp) => acc + emp.years, 0);

console.log(totalYears)

OutPut : 26



Waht is .filter()


if you have an array but want some of the elements in it. You can use .filter() here

   var employees = [

  {
    id: 10,
    name: "Sujeet",
    years: 10,
  },
  {
    id: 2,
    name: "Rahul",
    years: 3,
  },
  {
    id: 41,
    name: "Ramesh",
    years: 1,
  },
  {
    id: 99,
    name: "Sumit",
    years: 12,
  }
];

c      const emp = employees.filter(emps => emps.name === "Sujeet");
        console.log(empDetails)


   OutPut

   
  1. [{…}]
    1. length1




Happy programming!!
Don’t forget to leave your feedback and comments below!


Regards
Sujeet Bhujbal
--------------------------------------------------------------------------------
------------------------------------------------------------------------------



Thursday, 20 September 2018

Angular 4 Insert,Update, Delete with ASP.NET WEB API

Introduction
Angular 4  is more popular now days and for beginners, I will tell you what’s new IN Angular 4 and show you a practical example of angular 4 With ASP.NET Web API for inserting, deleting and displaying data using Angular 4
Basically, this article will demonstrate with example the following:
·       Step by step procedure to create ASP.NET Web API project  
·       Prerequisites and Setup for Angular 4
·       How to create Angular 4 Application and install Angular 4 packages  
·       How to create   service and component in Angular 4
·       How to get data from server side (Web api)
·       How to bind/Load/Fill data from Server side to HTML page using Angular 4
·       How to perform insert, edit, update and delete operation on view using Angular 4 data binding


What is Angular
Angular is an Open Source which is developed by Google
Angular 4 is the latest version of Angular. It is a front-end web application platform

What’s new in Angular 4

 

1.     Reduced Size and Improved Performance
2.     Separate Animation Package
3.     ngIf with else : -We can use an else syntax in your templates
4.     As: - Introduced as new keyword, As Keywprd allows to store a result in a variable of the template, to use it in the element.
5.     Titlecase : - Angular 4 introduced a new titlecase pipe. This pipe is converts first letter of each word into uppercase
6.     Http  Adding search parameters to an HTTP request has been simplified
7.     Validators :- Added new validators like  required, minLength, maxLength and pattern.  Email validator helps you validate that the input is a valid email 


What You Need

·       Basic knowledge of Angular
·       Angular CLI
Prerequisite
  • Node
  • Npm
  • Angular CLI
  • Typescript
  • Text editor- visual code
Install the below setup step by step, Using Visual Studio Code or Command prompt:
  • Node
  • Npm
  • Angular CLI
  • Typescript
  •  Visual code

Set up for angular 4
Verify version of Node
  • node -v
  • npm –v

Installing Angular CLI

npm install -g @angular/cli

Typescript Installation

First check typescript version using below command

 tsc –version

If Typescript is not installed then use command

npm install –g typescript

 

 

  

Step 1:  Start With Asp.net Web API

 

1.     Create Database WebAPIDB With below structure
CREATE TABLE [dbo].[Employee] (
    [EmployeeID] INT          IDENTITY (1, 1) NOT NULL,
    [FirstName]  VARCHAR (50) NULL,
    [LastName]   VARCHAR (50) NULL,
    [EmpCode]    VARCHAR (50) NULL,
    [Position]   VARCHAR (50) NULL,
    [Office]     VARCHAR (50) NULL,
    CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED ([EmployeeID] ASC)
);

2.      Generate Entity Model from Database Name as DBModel.edmx

3.     Add Web Api Controller
public class EmployeeController : ApiController
   {
       private MyDBEntities db = new MyDBEntities();
 
 
       public IQueryable<Employee> GetEmployees()
       {
           return db.Employees;
       }
 
 
 
       public IHttpActionResult PutEmployee(int id, Employee employee)
       {
 
           if (id != employee.EmployeeID)
           {
               return BadRequest();
           }
 
           db.Entry(employee).State = EntityState.Modified;
 
           try
           {
               db.SaveChanges();
           }
           catch (DbUpdateConcurrencyException)
           {
               if (!EmployeeExists(id))
               {
                   return NotFound();
               }
               else
               {
                   throw;
               }
           }
 
           return StatusCode(HttpStatusCode.NoContent);
       }
 
 
       [ResponseType(typeof(Employee))]
       public IHttpActionResult PostEmployee(Employee employee)
       {
 
           db.Employees.Add(employee);
           db.SaveChanges();
 
           return CreatedAtRoute("DefaultApi", new { id = employee.EmployeeID }, employee);
       }
 
 
       [ResponseType(typeof(Employee))]
       public IHttpActionResult DeleteEmployee(int id)
       {
           Employee employee = db.Employees.Find(id);
           if (employee == null)
           {
               return NotFound();
           }
 
           db.Employees.Remove(employee);
           db.SaveChanges();
 
           return Ok(employee);
       }
 
       protected override void Dispose(bool disposing)
       {
           if (disposing)
           {
               db.Dispose();
           }
           base.Dispose(disposing);
       }
 
       private bool EmployeeExists(int id)
       {
           return db.Employees.Count(e => e.EmployeeID == id) > 0;
       }
   }
 


In the above class we have following methods
1.     GetEmployee() Method will return all the emloyees in JSON format
2.     PostEmployee() method will add new employee to database
3.     DeleteEmployee() method will delete existing employee

4.  Install Swagger Package Swashbuckle



Test Web Api Using  Swagger


 

 

  

Step 2:  Start With Angular 4

Step 1
1      Create a folder of the name EmployeeApplication  . Open Visual Studio Code.and open this folder in it. This folder will be used as the workspace for creating all the required files for the application.


 



4      Create new Angular projects is easy by using Angular CLI in the following way:

Go To Viewà Integrated Terminal

Cd EmployeeApplication 


$ ng new EmployeeApplication 


5      Run the following command from the command prompt.

          npm install



6      Serve the app locally

To serve the app locally, inside your newly created project, run the following command:

            ng serve


Open Chrome and add address http://localhost:4200/



Create New Employee Service using below command

ng generate service Employee


EmployeeService.js file is used for calling server side code by using $http. In EmployeeService.js file we have created an Angular  service called as EmployeeService. To call Web API EmployeeControllers for insert update,delete function we have created three functions in EmployeeService.js
We have created following method in service to Call Server Side Code

1.      postEmployee() : This will post data to server
2.     getEmployeeList() : This will fetch data from server
3.     deleteEmployee(): This will delete employee from server

export class EmployeeService {

  selectedEmployee : Employee;
  employeeList : Employee[];
  constructor(private http : Http) { }

  postEmployee(emp : Employee){
    var body = JSON.stringify(emp);
    var headerOptions = new Headers({'Content-Type':'application/json'});
    var requestOptions = new RequestOptions({method : RequestMethod.Post,headers : headerOptions});
    return this.http.post('http://localhost:28750/api/Employee',body,requestOptions).map(x => x.json());
  }

  putEmployee(id, emp) {
    var body = JSON.stringify(emp);
    var headerOptions = new Headers({ 'Content-Type': 'application/json' });
    var requestOptions = new RequestOptions({ method: RequestMethod.Put, headers: headerOptions });
    return this.http.put('http://localhost:28750/api/Employee/' + id,
      body,
      requestOptions).map(res => res.json());
  }
  getEmployeeList(){
    this.http.get('http://localhost:28750/api/Employee')
    .map((data : Response) =>{
      return data.json() as Employee[];
    }).toPromise().then(x => {
      this.employeeList = x;
    })
  }

  deleteEmployee(id: number) {
    return this.http.delete('http://localhost:28750/api/Employee/' + id).map(res => res.json());
  }
}


Component in Angular :
Major part of the development with Angular 4 is done in the components

In Angular application, Components are basically classes that interact with the .html file of the component 
It consist of
1. Template
2. Class
3. Metadata


  We will get all details of component using below link


Create New Employee Component using below command

ng generate component Employee


export class EmployeeComponent implements OnInit {

  constructor(private employeeService: EmployeeService, private toastr: ToastrService) { }

  ngOnInit() {
    this.resetForm();
  }

  resetForm(form?: NgForm) {
    if (form != null)
      form.reset();
    this.employeeService.selectedEmployee = {
      EmployeeID: null,
      FirstName: '',
      LastName: '',
      EmpCode: '',
      Position: '',
      Office: ''
    }
  }

  onSubmit(form: NgForm) {
    if (form.value.EmployeeID == null) {
      this.employeeService.postEmployee(form.value)
        .subscribe(data => {
          this.resetForm(form);
          this.employeeService.getEmployeeList();
          this.toastr.success('New Record Added Succcessfully', 'Employee Register');
        })
    }
    else {
      this.employeeService.putEmployee(form.value.EmployeeID, form.value)
      .subscribe(data => {
        this.resetForm(form);
        this.employeeService.getEmployeeList();
        this.toastr.info('Record Updated Successfully!', 'Employee Register');
      });
    }
  }
}

Add another component for List

ng generate component EmployeeList


We are using ToasterService for showing notification on UI.
This component is used for showing employing list.It will fetch data from Web Api and will show on UI.
export class EmployeeListComponent implements OnInit {

  constructor(private employeeService: EmployeeService,private toastr : ToastrService) { }

  ngOnInit() {
    this.employeeService.getEmployeeList();
  }

  showForEdit(emp: Employee) {
    this.employeeService.selectedEmployee = Object.assign({}, emp);;
  }

  onDelete(id: number) {
    if (confirm('Are you sure to delete this record ?') == true) {
      this.employeeService.deleteEmployee(id)
      .subscribe(x => {
        this.employeeService.getEmployeeList();
        this.toastr.warning("Deleted Successfully","Employee Register");
      })
    }
  }
}




We are using below attributes
1.     The ng-model attribute is used for, Binding controls such as input, text area and selects in the view into the model
2.     ng-submit  : - The ng-submit directive submit a form to specified function
3.     ngModel : the ng-model attribute is used to bind the data in your model to the view presented to the user.

Add below UI To employee.component.html file

<form class="emp-form" #employeeForm="ngForm" (ngSubmit)="onSubmit(employeeForm)">
  <input type="hidden" name="EmployeeID" #EmployeeID="ngModel" [(ngModel)]="employeeService.selectedEmployee.EmployeeID">
  <div class="form-row">
    <div class="form-group col-md-6">
      <input class="form-control" name="FirstName" #FirstName="ngModel" [(ngModel)]="employeeService.selectedEmployee.FirstName"
        placeholder="First Name" required>
      <div class="validation-error" *ngIf="FirstName.invalid && FirstName.touched">This Field is Required.</div>
    </div>
    <div class="form-group col-md-6">
      <input class="form-control" name="LastName" #LastName="ngModel" [(ngModel)]="employeeService.selectedEmployee.LastName" placeholder="Last Name"
        required>
      <div class="validation-error" *ngIf="LastName.invalid && LastName.touched">This Field is Required.</div>
    </div>
  </div>
  <div class="form-group">
    <input class="form-control" name="Position" #Position="ngModel" [(ngModel)]="employeeService.selectedEmployee.Position" placeholder="Position">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <input class="form-control" name="EmpCode" #EmpCode="ngModel" [(ngModel)]="employeeService.selectedEmployee.EmpCode" placeholder="Emp Code">
    </div>
    <div class="form-group col-md-6">
      <input class="form-control" name="Office" #Office="ngModel" [(ngModel)]="employeeService.selectedEmployee.Office" placeholder="Office">
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-8">
      <button [disabled]="!employeeForm.valid" type="submit" class="btn btn-lg btn-block btn-info">
        <i class="fa fa-floppy-o"></i> Submit</button>
    </div>
    <div class="form-group col-md-4">
      <button type="button" class="btn btn-lg btn-block btn-secondary" (click)="resetForm(employeeForm)">
        <i class="fa fa-repeat"></i> Reset</button>
    </div>
  </div>
</form>


Add command Ng Serve to test your application

NPM Start
Open Chrome and add address http://localhost:4200/

By using this, you have successfully inserted data in the database and you have also shown this in the 

gridview. Click on submit





Please take a look at the attached code for more information. Download AngulaJsExample.zip
Happy programming!!
Don’t forget to leave your feedback and comments below!

 

Regards
Sujeet Bhujbal
--------------------------------------------------------------------------------
------------------------------------------------------------------------------