Angular 4 vs Angular 2

Angular is a web application framework by Google. The framework is aimed at the development of single page applications. The history of the product made by the Angular Team begins in 2009 when the original product named AngularJS was developed by the Brat Tech LLC.

In 2014, the rewrite of AngularJS was announced. Initially, the rewrite was called simply Angular but this name caused some confusions in the developer’s society. At the result, the updated version of the framework was named Angular 2. Angular 2 is a TypeScript-based web app framework that is available in open source.

Skipping the third version, the developers announced Angular 4 in 2016. The final release took place in March 2017. All versions of this framework are open source. In addition, the final version is backward compatible with the second version of Angular.

Let’s compare these two versions and reveal their differences.

Angular 2

Directives are the fundamental components of the apps built with Angular. The intention of Directives is to provide the creation of the easily reusable components for the apps. The components of Angular are interchangeable with Web Components in order to provide the work with other frameworks. It means that Angular 2 can use any component as a Web Component without any wrapper coding.

The interaction of Angular components with other components is performed due to the output and input properties. E.g., based on configuration a component receives from the parent component, it can set up its view and be notified to change its appearance based on the event received from a child component.

Angular supports dependency injection, i.e. a component receives the required singleton services.

Another benefit of Angular 2 is the use of TypeScript. TypeScript provides such useful tools as navigation, refactoring, and advanced autocompletion that are required to develop the large projects.

Angular 2 offers a command line interface to automate all the stages of the app development. This CLI facilitates the creation of an app that already works.

Angular 2 provides a great performance due to the lack of the deep object comparison. The items can be added to or removed from an array without any change detection. The object properties also remain undetected until they are directly bound by the view.

The main difficulty with Angular 2 is the necessity to learn. If you decided to choose Angular, be ready to learn the following:

  • TypeScript
  • JavaScript
  • Angular decorators
  • Angular form/field validation
  • Angular built-in pipes
  • Angular template syntax
  • Angular built-in directives
  • RxJS and observables
  • Routing to provide different URLs for different views

The other flaws include the use of a regular document object model. Manipulating an actual DOM directly slows down and decreases the efficiency of Angular 2.

The server templating also has some difficulties since Angular 2 separates JavaScript and HTML.

Angular 4

Since Angular 4 is the updated version of Angular 2, it is hard to find some drastic differences. However, new means better. Can this statement be applied to Angular 4? Let’s have a look at the changes and new features of the fourth version.

In short, using Angular 4 the apps will consume less space and work faster than before. Nevertheless, the other improvements will be highly appreciated by the developers.

AoT Compilation

The biggest change relates to the ahead-of-time compilation. In the ahead-of-time mode, the templates are compiled during the build and a JavaScript code is generated.

The AoT compilation has several pros. The errors are detected at build time releasing a developer from waiting at runtime. As a result, the app starts faster since the generation of code is done. In addition, there is no need to send the compiler to the users. The main flaw of using AoT compiler is a large package size because the generated JavaScript code is bigger than the HTML template.

The new View Engine produces less code even if using the AoT compilation. The size of a code reduces almost twice without any changes to the performance.

Server-Side Run

Angular 4 can be run on a server due to Angular Universal. This is a community-driven project that was released by the team of Angular as an official project.

Animations Package

The animations of Angular 4 received the own package. If you do not need the animations, you may not skip this code in the overall bundle of your app. This change improves the autocompletion and facilitates the search of documentation.

Template Tag

Another change refers to the deprecation of the “template” tag. The “ng-template” tag should be used instead of it. This feature was implemented in Angular 4 to remove a confusion associated with the use of a real HTML tag. If you forget about this change and use the deprecated template, a warning will appear.

Template Syntax

A few template syntax changes are also introduced. Now, the developers may use an “if/else” syntax. To unroll an observable, an “as” keyword can be assigned.

Pipes, HTTP, and Test

Pipes are the special tools to format the displayed values. Angular 4 offers a new pipe named Titlecase to change the first letter of each word into uppercase.

The simplification concerns also the addition of search parameters to an HTTP request and the override of a template in a test.

Other Significant Changes

– To update or get the Meta tags a new service “Meta” has been implemented.

– An “email” validator is introduced to the existing validators “pattern”, “maxLength”, “minLength”, and “required”. This validator verifies the validity of an email input.

– “compareWith” is a new directive to compare the select options.

– The previous interface “params” or “queryParams” has been replaced by the “paramMap” or “queryParamMap” to represent the parameters of a URL. Unlike the previous storage of the route parameters in a simple key-value object structure, now they are also available as a map.

– An optional parameter that contains the next state is added to the “CanDeactivate” interface.

Summary

Using Angular 4 makes the apps faster and smaller. The improvements based on Angular 2 increase the performance and efficiency of the use of this app framework. In addition, the recent version of TypeScript (2.2) improves the speed of the compiler and provides the better type checking.