Skip to content

Using ES6 Modules with AngularJS 1.3

Jack Franklin
Written by

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.

blog > images > using-es6-modules-today > using-es6-modules-today@2x.jpg

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 BrowserifyRequireJS, 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.


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.

Over 85,000 businesses use GoCardless to get paid on time. Learn more about how you can improve payment processing at your business today.

Get StartedLearn More
Interested in automating the way you get paid? GoCardless can help
Interested in automating the way you get paid? GoCardless can help

Interested in automating the way you get paid? GoCardless can help

Contact sales