5 big changes in Angular 2 that impact developers
vector illustration of light red shield with A letter image via Shutterstock
At the end of 2015, the AngularJS community announced the beta of Angular 2. The REST API development community followed the changes closely. Angular is one of the most popular frameworks for API developers to add a front-end to an API.
The approach of Angular 2 is better concepts, less code. To achieve this, the framework leverages a component-based approach. The syntax within associated HTML templates has evolved. Although Angular 1 users will recognize some concepts, there are many improvements to the implementation.
In Angular 2 there are no more controllers or scopes. Angular 2 provides component-driven architecture and the central element is obviously the component. Components contain both state and processing, accepts parameters and can trigger events. Components can be used within other components and can react on other component events.
- Template syntax
Template syntax has evolved to be more efficient to use. Sure you find a way to use bindings (simple or birectional), to attach some processing on component events and leverage structural and attribute directives. Some shortcuts are also provided to make code concise at this level for example for bidirectional bindings and loops.
- New change detection
Angular completely updates the way it detects changes and handles them. Detection is now based on the ZoneJS library that can intercept all of the asynchronous APIs in the browser. Since an Angular 2 application is a reactive system, the change detection system propagates bindings from the root component to children ones.
By default, the change detection system walks the whole tree of components in a predictable way. This allows to have good performance. In addition, you can also add some optimizations for particular uses cases. For example, if you use immutable objects or observables, you can take advantage of them and check parts of the component tree only if they really change.
Angular 2 is now based on observables. Their inputs aren’t so clear for new Angular 2 developers compared to promises. They both try to solve problems around asynchronicity, and avoid callback hell. Where they have similar semantics, observables are much more powerful. They allow to receive several values, can be canceled and can leverage operators to transform and combine observables values.
Observables correspond now to the foundations of several features in Angular 2. They take part in change detection and event support for components and HTTP.
Pipes correspond to what was called filters in Angular 1. Pipes transform displayed values within a template. In the context of HTTP calls, this feature allows to elegantly handle asynchronous calls and update the component view accordingly. It also allows developers to build queries in a friendlier way.
HTTP support relies on observables. The main consequence is the ability to easily plug HTTP calls into whole processing of components. We can easily configure some transformations on data to send for a request or received data within a response. More advanced processing like retries, errors can be easily handled with a few lines of code.
Form support is based on a set of directives that allow to specify bidirectional bindings on component attributes, but also have access to form and field states. Based on the new syntax in templates, we can efficiently and easily handle validations.
Another interesting aspect is that state relies on observables. So we can check updates and plug some processing like HTTP for auto completion or asynchronous validation. Form data submissions or handling are always supported by attaching processing on events (form submission or click).
Angular 2 offers developers significant improvements. As the concepts are significantly different from Angular 1, developers may be hesitant to make the change. Time invested will in learning about new ideas and structure of Angular 2 will be worthwhile.