Using ES6 Modules with AngularJS 1.3
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?
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.