Skip to content
An experiment in using ES6 features with AngularJS 1.x
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Add more items Jan 29, 2015
.gitignore Working directive register function Jan 24, 2015
bower.json Create bower.json and package.json Jan 29, 2015
gulpfile.js Add external template to itemDirective & gulp task Jan 30, 2015
package.json Update gulp-less to latest version. Dec 15, 2015

Angular ES6

An example approach to using ES6 classes in an AngularJS 1.x app.

Please see the article Exploring ES6 Classes In AngularJS 1.x for a full explanation.

Update, October 2015: The material in this repo has been developed even further by others. If you want to write Angular 1.x apps in the Angular 2 style, please see the ng-forward project, which unlike this repo, is under active development.

Working demo here


The style of class definition you see below is enabled by including the file register.js in the project, which exposes the global function register

The API is as follows:

class MyAngularComponent {
    // ...

    .controller('MyController', MyAngularComponent)
    .service('myService', MyAngularComponent)
    .provider('myOtherService', MyAngularComponent)
    .factory('myFactory', MyAngularComponent)
    .directive('myDirective', MyAngularComponent);

Example Component Classes


class UserService {
    constructor($http) {
        this.$http = $http;
    getFullName() {
        return this.$http.get('api/user/details');

register('app').service('userService', UserService);


class MyController {
    constructor(userService) {
            .then(result => this.userName = result.fullName);

register('app').controller('MyController', MyController);


class ThingFactory {
    constructor($timeout) {
        this.$timeout = $timeout;
    newThing() {
        console.log('Getting a new Thing...');
        return this.$timeout(() => new Thing(), 1000);

register('app').factory('thingFactory', ThingFactory);


class MyDirective {
    constructor($interval) {
        this.template = '<div>I\'m a directive!</div>';
        this.restrict = 'E';
        this.scope = {}
        // etc. for the usual config options

        // allows us to use the injected dependencies
        // elsewhere in the directive (e.g. compile or link function)
        this.$interval = $interval;

    // optional compile function
    compile(tElement) {
        tElement.css('position', 'absolute');

    // optional link function
    link(scope, element) {
        this.$interval(() => this.move(element), 1000);

    move(element) {
        element.css('left', (Math.random() * 500) + 'px');
        element.css('top', (Math.random() * 500) + 'px');

register('app').directive('myDirective', MyDirective);


class ThingServiceProvider {
    constructor() {
        this.apiPath = 'default/api';
    setApiPath(value) {
        this.apiPath = value;
    $get($http) {
        return {
            getThings: () => $http.get(this.apiPath)

register('app').provider('thingService', ThingServiceProvider);


Clone this repo and then npm install and bower install to download the required dependencies.

Then gulp watch and start hacking!



You can’t perform that action at this time.