Skip to content
Go to GoCardless homepage
LoginSign up

Using ES6 Modules with AngularJS 1.3

By Jack FranklinDec 20141 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 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.

GoCardless makes it easy to collect recurring payments

Sign upContact sales

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

Contact sales

Contact Us


Contact sales

+44 20 8338 9539


Request support

+44 20 8338 9540

Seen 'GoCardless Ltd' on your bank statement? Learn more

GoCardless Ltd., Sutton Yard, 65 Goswell Road, London, EC1V 7EN, United Kingdom

GoCardless (company registration number 07495895) is authorised by the Financial Conduct Authority under the Payment Services Regulations 2017, registration number 597190, for the provision of payment services. GoCardless SAS (23-25 Avenue Mac-Mahon, Paris, 75017, France), an affiliate of GoCardless Ltd (company registration number 834 422 180, R.C.S. PARIS), is authorised by the ACPR (French Prudential Supervision and Resolution Authority), Bank Code (CIB) 17118, for the provision of payment services.