Insights from Our Experts

Blog image

Introduction to Angular 5!

Author Image

Atley Varghese,Associate Software Engineer

Introduction

Angular is Google’s popular and open-source JavaScript framework for building and developing single-page mobile and desktop applications. Popular web platforms like Google Adwords, Google Fiber, Adsense, and Winc has built their user interfaces using Angular. Angular is a platform that combines Dynamic loading, an end to end tooling, dependency injection, Asynchronous template compilation, declarative templates, and it is integrated with best practices solving most of the development challenges. It is an open-source framework for building client applications using HTML or JavaScript or a language such as TypeScript that can be compiled to JavaScript. Google Angular team recommends the use of TypeScript language by Microsoft as it offers features like Class-based Object-Oriented Programming, Static Typing and Generics.

 

The initial release of Angular (AngularJS) was on October 20, 2010, and the first stable version was released in June 2012. On 14th September 2016, Angular 2 was released. Later, on 23rd March 2017, Angular 4 was released and which was backward compatible with Angular 2. It was an improvement over Angular 2 which was not backward compatible with its predecessor, AngularJS.

 

The latest version of Angular, Angular 5 was announced to the users on 1st November 2017. Angular 5 is focused on making the Angular applications smaller, faster and easier to use. The Google Angular team has built a nifty tool to make upgrading from previous versions as simple as possible.

 

The major changes in Angular Version 5 are:

1. Build Optimizer

The Angular 5 comes with default Build Optimizer during production build. The build optimizer optimizes the code by removing unwanted code segment including Angular decorators which aren’t needed at runtime. It also provides an option to select code as ‘pure’, thus the tree shaking is made easier.

 

2. Compiler Improvements

The improved Angular 5 compiler supports incremental compilation. This provides for faster rebuilds for both production builds and builds with AOT. In earlier versions the white spaces in the templates was recreated in build code now there is option to choose whether to include these white spaces

 

3. Improved Decorator Support

Angular 5 support new decorators like useValue, useFactory and data in object literals, which helps use the values that are generated during runtime. The developers can now use a lambda instead of a named function, thus they can execute code without affecting their public API.

 

4. Internationalized Number, Date, and Currency Pipes

The need for i18n polyfills in applications for internationalization of number, date, time can be eliminated, as Angular 5 comes with build in feature to standardize these across browsers. If the developers prefer the old behavior they can import DeprecatedI18NPipesModule.

 

5. New Router Lifecycle Events

Angular 5 support new events like GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd. These events can be used to do things like showing a spinner on any router outlet when a child element is updating. If the developers need to reload a page, when it receives a request to navigate to the same URL it can be configured using a router.

 

6. Forms Validation in Angular 5

In Angular 5 the validity or value of form or field can be updated using on blur or on submit, no need to track every input event. Developers can add ‘asyncValidators’ directly into options objects, rather than specifying them as the third parameter.

 

7. Animations in Angular 5

Angular 5 is included with two transition aliases :increment and :decrement.
The Angular 5 animation queries now support negative value limits.

 

Other changes in Angular Version 5 include:

  • OpaqueToken for Avoiding Injection Collisions has been replaced with InjectionToken now
  • The parameter constructor in the ErrorHandler has now been removed from the latest version.
  • The ngOutletContext for passing context to the template has been removed from NgTemplateOutlet.
  • The values “true”, “false”, “legacy_enabled” and “legacy_disabled” used by Angular Router have been replaced by “enabled” and “disabled”.
  • The NgProbeToken is removed from @angular/platform-browser, which can now be imported from @angular/core instead.
  • ReflectiveInjector is replaced by Injector.create in Angular 5.
  • In reactive forms, the updateOn property is passed on in the parameter object when the FormControl is instantiated.
  • Angular now support Multiple Export Alias in a component.
  • Angular provides a Universal Transfer API, thus more DOM manipulations can be done within server-side contexts.