in Engineering

Using ES6 Modules with AngularJS 1.3

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.


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.

We’re hiring developers
See job listing
in Engineering

gc-http-factory: an easier way to work with APIs in Angular

Today we're announcing and open sourcing gc-http-factory, a tool for working with APIs in Angular.

Using APIs in Angular without HttpFactory

In a regular Angular app you'd use a service to make requests to an API:'app', []).factory('UsersService', function($http) {
  function findOne(id) {
    return $http.get('/api/users/' + id);

  function findAll() {
    return $http.get('/api/users');

  function create() {
    return $'/api/users');

  return {
    findOne: findOne,
    findAll: findAll,
    create: create

If you've got lots of API resources which follow similar conventions the above becomes repetitive pretty quickly.

Using HttpFactory

HttpFactory provides an abstraction for creating services that make requests to API resources. You use HttpFactory to create your service and methods by telling it some information about your API.

For example, to create the UsersService we defined previously, you'd use:'app', ['gc.httpFactory']).factory('UsersService', function(HttpFactory) {
  return HttpFactory.create({
    url: '/api/users/:id'
  }, {
    findOne: { method: 'GET' },
    findAll: { method: 'GET' },
    create: { method: 'POST' }

You can then use the service you've created as normal:

UsersService.findAll(); //=> GET /api/users

  params: { id: 2 }
}); //=> GET /api/users/2

  data: { name: 'Jack' }
}); //=> POST /api/users with { name: 'Jack' } as data


You can install gc-http-factory from Bower:

bower install gc-http-factory

Or just grab the source from GitHub.


We've been using HttpFactory in our Angular apps for a while and we're really happy with how cleanly it lets us create components to interface with our APIs. It's avoided duplication across our Angular apps and we hope it might do the same for you.

If you have any suggestions, ideas or bugs, please either report them on GitHub or feel free to find me on Twitter.

We're hiring developers
See job listing