Why ES6 Classes With AngularJS?

Readability

class Person {

    constructor(name) {
        this.name = name;
    }

    greet() {
        console.log(`Hi, I'm ${this.name}!`);
    }

}

// versus

function Person(name) {
    this.name = name;
}

Person.prototype.greet = function() {
    console.log(`Hi, I'm ${this.name}!`);
};

Enforces the Naming of Functions

// No
angular.module('myApp')
    .controller('AppController', function() {
        // ... code
    });




// Yes
class AppController {
    // ... code
}

angular.module('myApp')
    .controller('AppController', AppController);

The Future

// An example Angular 2 directive
@ComponentDirective
class SantaTodoApp {
    constructor() {
        this.newTodoTitle = '';
    }
    addTodo: function() { ... }
    removeTodo: function(todo) { ... }
    todosOf: function(filter) { ... }
}

// An example Angular 2 service
class TodoStore {
    constructor(win:Window) {
        this.win = win;
    }
    add(todo) { 
        // access this.win.localStorage ... 
    }
    remove(todo) { ... }
    todosOf(filter) {  ... }
}

TypeScript

A Brief Review of angular.Module

controller(name, constructor);

function AppController(someDependency) {
    this.stuff = someDependency.getTheStuff();
    // etc.
}

angular.module('myApp')
    .controller('AppController', AppController);

service(name, constructor);

function MyService($http) {
    this.getStuff = $http.get('api/stuff');
    // etc.
}

angular.module('myApp')
    .service('myService', MyService);

factory(name, providerFunction);

function stuffFactory($http) {
    function getStuff() {
        $http.get('api/stuff');
    }

    // etc.

    return {
        getStuff: getStuff
    }
}

angular.module('myApp')
    .factory('stuffFactory', stuffFactory);

directive(name, directiveFactory);

function myDirective() {
    return {
        restrict: 'E',
        template: 'path/to/template.html',
        scope: {
            list: '='
        },
        // lots more to configure...
        link: function(scope, element, attrs) {
            //.. code
        }
    };
}

angular.module('myApp')
    .directive('myDirective', myDirective);

Controllers

class PersonController {

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

        this.likes = 0;
    }

    like() {
        this.userService.addLike();
        this.likes ++;
    }

}

angular.module('myApp')
    .controller('PersonController', PersonController);

<div ng-controller="PersonController as vm">
    {{ vm.userName }} <i class="icon-like" ng-click="vm.like()"></i>
</div>

A Note on Annotation

// TypeScript
class PersonController {

    public static $inject = ['userService'];

    constructor(userService) {
        // ...
    }

}

Factories

class ThingFactory {
    constructor($timeout) {
        this.$timeout = $timeout;
    }

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

// nope
angular.module('myApp')
    .factory('thingFactory', ThingFactory);

// Goal: turn `ThingFactory` into
// ['$timeout', ($timeout) => new ThingFactory($timeout)]

var constructorFn = ThingFactory;

var args = constructorFn.$inject; // args = ['$timeout']

var factoryFunction = (...args) => {
    return new constructorFn(...args);
}

var factoryArray = args.push(factoryFunction);  
// factoryArray = ['$timeout', factoryFunction]

Directives

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

        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'); 
    } 
}

Compile/Link Problems

var constructorFn = MyDirective;

if (!constructorFn.prototype.compile) {
    // create an empty compile function if none exists
    constructorFn.prototype.compile = () => {};
}

var originalCompileFn = _cloneFunction(constructorFn.prototype.compile);

// the _override helper function replaces the 'compile' property on
// constructorFn.prototype with a new function defined by the third argument.
_override(constructorFn.prototype, 'compile', function () {
    return function () {
        originalCompileFn.apply(this, arguments);

        if (constructorFn.prototype.link) {
            return constructorFn.prototype.link.bind(this);
        }
    };
});