Using ES6 Modules with AngularJS 1.3
Last editedJan 20201 min read
At GoCardless we use ES6 and AngularJS 1.3 to build front-end applications. Today, we’re open sourcing a skeleton app that demonstrates how we do it.
In October we travelled to Paris for Europe’s first AngularJS conference, ngEurope. AngularJS 2.0 was announced on the second day, and a lot is changing.
We’re particularly excited to see AngularJS embrace ECMAScript 6, part of which includes replacing its own module system with the ES6 module system.
The ES6 modules spec has been finalised, and it will now begin to be introduced to browsers, although we can't expect full support for a while yet. However, that shouldn’t stop you using it with AngularJS 1.3 today, and this post we'll show you how.
Why ES6 modules?
Module and dependency management is essential when building a large client-side application, and the JavaScript community has come up with a number of solutions to this problem. These include Browserify, RequireJS, and jspm, along with most frameworks (including AngularJS) providing their own solution. However, now the syntax of ES6 modules are confirmed it's a great time to get familiar with the specification, syntax and future proof your application.
If you’d like to read about the syntax in depth, ECMAScript 6 modules: the final syntax by Axel Rauschmayer gives a fantastic, detailed overview of the syntax and practicalities of the module system.
Libraries
ES6 usage is enabled by a combination of three libraries:
The ES6 Module Loader adds System.import, a new function that will be available in ES6 that allows us to programmatically load modules.
SystemJS is a universal module loader that supports three different module syntaxes in the browser:
Asynchronous Module Definition (used by RequireJS)
CommonJS (used by NodeJS, Browserify)
ES6 Modules
Finally, Traceur transpiles ES6 into ES5, enabling you to use not just modules, but many of the upcoming ES6 features.
An ES6 and AngularJS 1.3 sample application
To help you get started we are open sourcing a sample AngularJS 1.3 and ES6 application based exactly on ours, using the same tooling, frameworks and configuration. Please feel free to fork it, clone it and use it as a base for your applications. If you have any questions, please open an issue.
The application comes with the following set up:
a sample unit test using Jasmine and Karma
end to end tests using Protractor
the directory structure defined in our AngularJS style guide
ES6 imports used throughout
scripts for building the project, running tests and starting a server
bower for handling front end dependencies
The README has detailed instructions on how to set up and get everything running on your machine.
