Angular2. What’s New?

What Exactly Angular2 Has to Offer Us

Not so long ago the final release of the second version of a popular framework for the one-page web apps development Angular2 took place. Our team couldn’t ignore such innovation. So what exactly do its developers have to offer us?

Our colleague Sergey Mashchenko managed to clear up this question.

And here what he has found out:

• TypeScript support.

It’s not only oriented to work with ES6 but also supports ES5 and Dart. However, the key innovation is TypeScript support.

• One-sided binding.

The concept of change tracking for each component came to replace the double-sided binding and operations with watchers and $digest numerous cycles.

• Data transfer between components.

Angular2 uses the @Input decorator that assigns a variable to obtain a value from the outside of a component. And for sending data outside it uses the @Output decorator. And no more prefixes (<, @, =, & …) needed for operations with the data transferred to the directive.

• Zone.js library.

Many of us don’t understand what kind of animal it is. But thanks to zones we know which element had an asynchronous event. All we need is to understand whether it is necessary to render changes for child elements, and there is a distinctive feature of Angular2. In the first Angular, we had to launch the digest cycle that bypassed child and parent elements many times to check whether the model has been changed or not. The second Angular checks for changes unidirectionally. Not all of us have faced similar technology, and some people don’t understand how it works within Angular2. So for a start, we will try to understand how it worked in the first version of the framework.

AngularJS has a hierarchy of scopes, but the service layer is common for all. Services are being set up once and for all before the launch of the application. They also act as singletons. Angular2 provides component independence. For this purpose, it has metadata that allows to describe completely everything that is necessary for this component work: routing setup, the list of the used directives, pipes and services. Components are now connected not through the service layer because each of them now has a router and and injector. And they, in turn, also form a hierarchy which is always connected to the component hierarchy.

• Hierarchical Dependency Injection.

Thanks to the fact that each component has the router and the tree of components parallels the tree of injectors. What benefits does such approach give? For example, now it is easy to set up the same service differently, depending on the component it is injected to. At the same time, it is possible not to be afraid to somehow affect other components above or at the same level of hierarchy as they will use other copies of the same service. Now the component doesn’t depend on the way some service was configured. Behind the scenes each component sets up its own injector with one or more providers defined for that component itself.

Conclusion

Some things can seem hard to understand: unfamiliar definitions, fresh ideas, non-standard approaches. But there is no need to be afraid of the new technologies! A little patience and everything can be sorted out.

Besides, there are so many new opportunities available now in Angular2.

Just try it and who knows — maybe you will experience what you always wanted to. Moreover, we can help you!

If you liked this, show your support by clapping us to share with other people on Medium.

Follow us on Facebook, Instagram, LinkedIn, Behance, Medium and visit our corporate blog for more news and articles on smart solutions.

Any questions? Feel free to contact us!