babel-angular

Babel-Angular

This is just a framework for building your own Angular es6 directives, controllers, etc as classes. The real magic that this library provides is the @inject decorator or injectDependencies function. Using this and spread operators from ES6 you can build an inheritance system without knowing what the parent class requires as far as services/injections are concerned. Consider the following example:

import { inject, Controller } from 'babel-angular';

@inject( ['$http'] )
class BaseController {
    constructor( ...dependencies ) {
        // You can now call $this.http in the constructor and any public methods.
        this.$http.get('/someUrl').
        success(function(data, status, headers, config) {
            // this callback will be called asynchronously
            // when the response is available
        }).
        error(function(data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        });
    }
}

@inject( ['customService'] )
class HomePageCtrl extends BaseController {
    constructor( ...dependencies ) {
        super( ...dependencies );
        this.customService.set('title', 'This Is The Home Page');
    }
}

How its done

The decorator simply adds unique values into the $inject member array attached to the class, and then relies on the constructor accepting a rest param (...dependencies) to loop through the inject array and assign the services as it needs to be. This is is done when the models are instantiated.

Is that all it does?

There's also a register static function on every class that accepts an instance of an angular app module.

// Registers a controller called 'homePageCtrl' on ngApp.
HomePageCtrl.register( ngApp );