Using ES6 with Angular 1.x is easy
Last week I attended a hackathon, and to familiarize myself with ES6 in combination with Angular 1.x I decided to use just that. And it was a lot easier then I expected!
Lets say we have the following application structure
/app
- /example (main component file)
example-controller (component controller)
example-directive (component directive)
example-service (component service)
We want to use ES6 classes wherever possible, and I will explain how to do it per file.
Controllers & Services
Controllers and Services are the easiest to write in ES6.
example-controller
example-service
Two things you might notice, first is the “export default”, this means we can simply write
import ExampleService from ‘./example-service/example-service.js’;
Instead of
import { ExampleService } from ‘./example-service/example-service.js’;
The other thing you might notice is the “ExampleService.$inject”, this tells angular what dependencies to inject into our Class. You could also use something like ngAnnotate if you prefer that
Directives
Directives are a bit more complicated to write in ES6 syntax because Angular expect an object literal, not a constructor function. This can however be easily fixed.
example-directive
As you can see we can still use best practices, such as the controllerAs and the bindToController syntax to prevent the use of scope. The directive’s controller is defined as another Class.
Define our component
Now that we defined all sub-components of our component file we can define them in a main file.
As you can see only the directive syntax is different because Angular expects an object literal, not a constructor function.
Use a module loader
We can use a bundler such as webpack to combine all code in a single bundle. The benefit of using webpack is that we can also compile our code to ES5 while bundling to support the current browsers.
