Foundations

Component

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.

Observables

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.

Pipe

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

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

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).

Conclusion

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.

Reference

• https://jaxenter.com/