Use ES6 with AngularJS 1.X
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 5 commits behind zewa666:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Angular ES6

This example shows how to use ES6 with AngularJS.

The tools used are:

  • NodeJS as a general dependency
  • Gulp for automation of the ES6 to ES5 transpilation as well as BrowserSync
  • BrowserSync automatically refreshes your browser on js/html/css changes
  • jspm modern Package Manager supporting ES6 Module Syntax
  • BabelJS for ES6 to ES5 transpilation
  • isparta for ES6 code coverage


All AngularJS Application files are located in the folder src/ Make sure to start gulp watch (see below for howto) before doing changes in order to get the source files automatically transpiled to the dist/ folder

How to start

In order to start the application do the following:

  1. Make sure that NodeJS is installed.
  2. Make sure that Gulp is installed: npm install -g gulp
  3. Make sure that jspm is installed: npm install -g jspm
  4. Go to the project folder
  5. Execute the following command to install all node-dependencies: npm install
  6. Now install all client-side dependencies with jspm: jspm install
  7. Start the application with the gulp watch task: gulp watch
  8. Open up your favorite Browser and navigate to http://localhost:9000 to see the app.

Using decorators

There is a base decorator called @register which performs generic component registrations. In order to save work you may use one of the following concrete implementations, which allow you to omit the type information


import {constant} from './path/to/config/decorators';

export default class MyConstant {
  constructor () {
    return 'my-constant';


import {value} from './path/to/config/decorators';

export default class MyValue {
  constructor () {
    return 'my-value';


import {factory} from './path/to/config/decorators';

export default class MyFactory {
  constructor (/* dependancies */) { }


import {service} from './path/to/config/decorators';

export default class MyService {
  constructor (/* dependancies */) { }


import {provider} from './path/to/config/decorators';

export default class MyProvider {
  constructor (/* dependancies */) { }


import {controller} from './path/to/config/decorators';

export default class MyController {
  constructor (/* dependancies */) { }


import {directive} from './path/to/config/decorators';
import {baseURL} from './path/to/config/constants';

  restrict: 'E',
  templateUrl: `${baseURL}/path/to/the/template.html`
export default class MyController {
  constructor (/* dependancies */) { = 'bar';

// In template.html :

<p>{{ }} will display "bar"</p>


import {filter} from './path/to/config/decorators';

export default class MyFilter {
  constructor (/* dependancies */) { }
  filter (input) {
    return input.toUpperCase();


In order to inject existing components/services into your new component you can leverage the following decorator as depicted in the example below.

import {inject} from './path/to/config/decorators';

@inject('$http', 'MyService')
export default class MyController {
  constructor ($http, MyService) { }

Injection as a property

Let's say you want to inject a component/service but use it with a different property name. In order to do so use the injectAs decorator

import {inject, injectAs} from './path/to/config/decorators';

export default class MyController {
  @inject $http = null;
  @inject MyService = null;
  @injectAs('$q') Promise = null;
  doSomething () {
    return this.Promise((resolve, reject) {
        .success(data => resolve(data)
        .error(err => reject(err));

Running Unit Tests

In order to run the unit tests do all mentioned steps from above and the additional ones:

  1. Make sure that Karma CLI is installed:
npm install -g karma-cli
  1. Start the Karma Runner with:
karma start

Running code coverage

To create a full code-coverage report execute the following command:

  gulp cover

This will result in a new folder called coverage in your project. It contains an index.html, which you can open with your browser to get a nice code-coverage-report


Special thanks goes to Hadrien Lanneau for his great contribution to this project