Advantages of Angular

Angular (2+) provides many advantages over the previous version of AngularJS (1.x). Angular is a more structured platform for developing Single Page Applications. Following are some of the key advantages of Angular over the previous version.

Advantages of Angular (2+) over AngularJS (1.x)

AngularJS (1.x) is based on MVC architecture, Angular (2+) is based on component based architecture.

AngularJS applications are driven by HTML or other web development frameworks like like Asp.Net MVC etc. and AngularJS directives were used to enhance the applications, Angular 2.0 brings a major shift to this, Angular is a platform by itself for developing Single Page Applications. Because of the architectural differences Angular applications provide better performance when compared to AngularJS applications.

What is Angular?

Angular is a web development platform from Google to develop component based Single Page Applications. Prior to Angular 2, we call it AngularJS and from version 2.0 onwards we call it Angular.

Angular 1.x was more of a scripting framework where the primary driver of the applicant was HTML pages or other Frameworks like Asp.Net MVC etc. and AngularJS directives were used to enhance the applications, Angular 2.0 brings  a major shift to this, Angular is a platform by itself for developing Single Page Applications.

Angular applications follow a component approach, where the application is built with a set of Components in a hierarchy. Angular2 applications are built using TypeScript and ES6 (ECMAScript 2015) features like import, export, backtick, for…of loops, and fat arrow. Angular uses TypeScript features like class decorators and type declarations.

In the following posts we shall see in detail about developing applications using Angular 2+ with examples.

componentDidCatch example

The componentDidCatch life-cycle method is invoked when an exception is thrown in its child component hierarchy. Components which implement componentDidCatch are called Error Boundary components. These components act as catch {} blocks to capture exceptions.

The following example has 3 components
ErrorBoundaryComponent - Implements componentDidCatch, acts as a catch {} block to capture errors in child components.
ChildComponent - Actual UI component, encapsulated in ErrorBoundaryComponent
RootComponent - This is the bootstrap component which launches the application.

React Component Lifecycle - componentDidCatch

The componentDidCatch life-cycle method is used to create special Error Boundary components. Prior to react v16.0 there was not structured way of error handling, if a component throws an exception then the application will crash and we might have to refresh the page.

To overcome this React v16.0 introduces error boundaries. Error boundaries are special components which catch errors in its child component hierarchy and display a custom error / fallback UI. Error boundaries handle any errors in the render(), constructor or any of the component life cycle methods in its child component hierarchy.