Angular Master Class in Freiburg
Join our upcoming public training in Germany!Get a ticket →
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.
Get updates on new articles and trainings.
Join over 1400 other developers who get our content first.
Three things you didn't know about the AsyncPipe
This article explains three lesser known features of the AsyncPipe that help us to write better async code.
Using Zones in Angular for better performance
In this article we'll take a look at how to use Zone APIs to improve our app's performance!
Making your Angular apps fast
In this article we discuss tips and tricks to make Angular blazingly fast!
Testing Angular Directives with Custom Matchers
Deliver terse, DRY, self-documenting unit tests with Angular using custom Jasmine Matchers and Helper functions.
Testing Services with Http in Angular
Want to learn how to test services in Angular that have an Http dependency? Read more here!
Two-way Data Binding in Angular
Two-way data binding was one of the main selling points of Angular. Since version 2.x, we can build directives that...