A couple of weeks ago we wrote about how to write Angular code in ES5 and took a closer look at what annotations and decorators translate to. While it is nice that we can all write Angular applications without the hassle of setting up a development environment for TypeScript, Babel or SystemJS, it turns out that the syntax is still quite wordy. Of course, this isn’t really a big problem, because it is just the syntax after all. That’s why the Angular team works hard on making even the ES5 experience much better. All improvements that land in the ES5 world shrink the gap between Angular 1.x and Angular >= 2.x syntax, in fact, upgrading will be rather boring.
In this article we’re going to take a closer look at the ES5 syntax improvements and how they make upgrading even easier.
Want to see things in action first?
Angular in ES5 before syntactical improvements
In order to understand the syntactical improvements in ES5 when building Angular applications, we have to understand what the code looked like before. Angular uses decorators to add meta data to it’s application code, which in TypeScript (or ES7) looks something like this:
ES5 doesn’t have the concept of annotations or decorators. That’s why the code above translates to something like this, if we’d write it in ES5:
If this is entirely new to you, you might want to read our article on Angular code in ES5 which gives a more detailed explanation of this code. This particular ES5 code totally does it’s job, but as mentioned earlier, the syntax is quite wordy. We won’t get around the fact that we have to assemble annotations for our components ourselves. However, this can easily be fixed since it’s really just syntax after all.
Let’s take a look at how this can be done better with the more improved syntax for ES5.
Angular in ES5 after syntactical improvements
Angular comes with helper functions to create components and services right out of the box. Let’s take our
HelloComponent and refactor it with the better syntax:
As we can see,
Component() is pretty much the equivalent of
@Component decorator. It takes care of creating annotations on our component, while we pass
ComponentArgs to it accordingly. What about
Class()? It’s pretty obvious that
Class() takes the constructor function of our component, but can it also extend other “classes” or consume prototype methods as we would like to create?
Yeap, all that is possible let’s quickly go through all possible properties of Angular’s
Nothing special here.
constructor is a constructor function which internally gets called with
extends property allows us to extend existing classes or components. Here’s a small example that shows what that could look like:
We can define methods on our class simply by adding a property to it that is a function. In fact, every applied property in
Class() has to be either a function or an array.
That’s pretty straight forward. But why do properties have to be arrays otherwise? Remember dependency injection in Angular? We can inject services and factories using
@Inject decorators, but as we know, there are no decorators nor annotations in ES5. That’s where the array syntax comes in.
As we can see, the gap between Angular 1.x and Angular 2.x is not so big anymore. The ES5 syntax for Angular 2.x applications is getting closer to the ES2016 or TypeScript equivalent, which hopefully helps people to not be scared anymore. It’s really just syntax.
Angular Master Class at Shopware
Join our upcoming public training!Get a ticket →
Get updates on new articles and trainings.
Join over 1400 other developers who get our content first.
RxJS Master Class and courseware updates
If you've been following us for a while, you're quite aware that we're always striving to provide up-to-date and high-quality...
Advanced caching with RxJS
When building web applications, performance should always be a top priority. One very efficient way to optimize the performance of...
Custom Overlays with Angular's CDK - Part 2
In this follow-up post we demonstrate how to use Angular's CDK to build a custom overlay that looks and feels...
Custom Overlays with Angular's CDK
The Angular Material CDK provides us with tools to build awesome and high-quality Angular components without adopting the Material Design...
Easy Dialogs with Angular Material
Building modals and dialogs isn't easy - if we do it ourselves. Angular Material comes with a powerful dialog service...
A web animations deep dive with Angular
Angular comes with a built-in animation system that lets us create powerful animations based on the Web Animations API. In...