ES6 modules syntax with Angular 1.x.x

[nervgh]

Hi!

I use Babel for writing es6 code. It looks like this:

import Bar from 'path';

class Foo extends Bar {
    constructor() {
        super();
    }
}

export default Foo;

When I write angular module, I must wrap my class into function to make it work:

// ----class----
export default function __(Bar) {

    class Foo extends Bar {
        constructor() {
            super();
        }
    }

    return Foo;
}

__.$inject = [
    'Bar'
];

// ----module----
import Foo from 'path';

angular
    .module('test', [])
    .factory('Foo', Foo);

I thought I found solution without wrapping, but it not works with extends (sandbox):

function Foo() {
    Foo.__['$rootScope'].x = 1;
}

Foo.__ = function($rootScope) {
    Foo.__['$rootScope'] = $rootScope;
    return Foo;
};

Foo.__.$inject = [
    '$rootScope'
];


angular
    .module('test', [])
    .factory('Foo', Foo.__)
    .run([
        'Foo',
        function(Foo) {
            console.log(new Foo());
        }
    ])

I tried to use angular.injector() but in this case the view not updates (sandbox):

var ng = angular.injector(['ng']);
var $rootScope = ng.get('$rootScope');

function Foo() {
    console.log('Foo#constructor');
    $rootScope.x = 1;
    // $rootScope.$apply();
}

Foo.__ = function() {
    console.log('Foo.__');
    return Foo;
};

angular
    .module('test', [])
    .factory('Foo', Foo.__)
    .run([
        'Foo',
        function(Foo) {
            console.log(new Foo());
        }
    ])

Is there way write angular code without wrapping?

Thanks =)

[wesleycho]

Ideally, Angular should support doing something like this - I would say that maybe a modification in the injector to support this would be nice.

[nervgh]

@wesleycho, thanks for comment. I think this is not the best solution:

1. The constructor should not be used to transfer module dependencies
2. I cannot say class Foo extends Bar

[wesleycho]

The problem here is that the class syntax in ES6 transpiles down to an object, and Angular has specific support for what arguments it supports in the module syntax. There is no avoiding having a wrapper function otherwise.

[nervgh]

There is no avoiding having a wrapper function otherwise.

See my second examlpe. But in this case Angular don't update scopes =(

The problem is that Angular 1.x.x breaks syntax of ES6 modules.
Sadly.

[pkozlowski-opensource]

This doesn't sound right - if you plan on registering classes into ng 1.x DI system you should be using .service syntax instead of .factory. Also, I'm not sure why you would have to specify Bar as a dependency in DI if Foo simply extends Bar - this doesn't make sense.

Could you please put together a minimal plunk with the transpiled output you get with simple Foo and Bar classes without any additional "magic"?

[nervgh]

For example:

1. I have an angular-some-module.js which contains the Bar class.
2. I want create and inherit my class Foo from Bar.

<script src="angular-some-module.js"></script>
<script src="angular-my-module.js"></script>

angular
    .module('my', ['some'])
    .factory('Foo', [
        'Bar',                      // from angular-some-module.js
        function(Bar) {

            class Foo extends Bar {
                /**
                 * @param options
                 */
                constructor(options) {
                    super(options);
                }
            }

            return Foo;
        }
    ])
    .factory('instance', [
        'Foo',
        'options',
        function(Foo, options) {
            return new Foo(options);
        }
    ])
    .run([
        '$rootScope',
        'instance',
        function($scope, instance) {
            $scope.app = instance;
        }
    ]);

This doesn't sound right - if you plan on registering classes into ng 1.x DI system you should be using .service syntax instead of .factory

Sorry for .factory in example.

What would you do in this case?

[wesleycho]

You can do

class Foo {}

class Bar extends Foo {
  get $inject() {
    return ['$http'];
  }
  constructor(http) {
    super();
    this._http = http;
  }
}

angular.module('foo', [])
.service('foo', Foo)
.service('bar', Bar)

This keeps Foo and Bar decoupled from Angular completely if you so wish, or use an angular specific class that inherits from a completely decoupled class.

[nervgh]

@wesleycho , thanks, but subject of my question is

I have an angular-some-module.js which contains the Bar class.
I want create and inherit my class Foo from Bar.

I think what there are not other solutions than the use of a wrapper function. I close this issue.

Example: wrapper & inheritance.

Thanks to all for comments.