Future proofing Angular apps with ES6 features

Question

What is the recommended (if there is one) future-proof way to write controllers, services and directives in ES6 (using Traceur) so that the most of same code can be used with AngularJS 2.0. I realize that AngularJS 2.0 is still on the drawing board but if I were to start a new app today what style or conventions do I follow so migrating to 2.0 will hopefully be less painful.

Declaring a class and then passing a reference to that class into the controller or service is one point i see:

var app = angular.module('myApp', []);

class MainCtrl {
   ....
}

class MyService {
   ....
}

app.controller('MainCtrl', MainCtrl);
app.service('MyService', MyService);

Should the MyService class be moved to a separate file so that potentially in the future I could just export it and have it available to be injected?

What are some other things to keep in mind as I work on a new project using AngularJS (<= 1.3.x) and ES6?

Update After some digging around I wrote a series of blog posts talking about my findings on my blog

"proofing" only needs to prevent breakages; not to utilize new features. — user2864740
– user2864740, Commented Oct 16, 2014 at 3:35
I've been using ES6 in an Angular app about 2 months now, and I can say that classes become obstacles because of the Angular DI. You have to write lots of this.service = service in the constructor. — gustavohenke
– gustavohenke, Commented Jan 16, 2015 at 17:52

Sean McClory · Accepted Answer · 2014-10-23 21:07:05Z

1

The angular team at ngEurope confirmed today that the $controllers, $scopes, $services and jqLite of 1.x will cease to exist in Angular 2.0. There will also be a brand new router, which they intend to backport to 1.3 in the coming months.

To prepare for migration they suggested just following the best practices/styles/conventions that have evolved in the community so far, and when 2.0 is ready (sometime next year), they'll work out the best way to migrate from there.

Also, they said that 1.3 will be fully supported for at least a year and a half after the release of 2.0.

answered Oct 23, 2014 at 21:07

Sean McClory

4,2933 gold badges35 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TGH · Accepted Answer · 2015-04-15 03:54:07Z

You can define ES6 classes and add them in existing Angular 1.x applications. You will need to set up transpiling etc, but here is a general example:

class PersonService{
    constructor(){
    }
    getPerson(){
        return 'Jim Smith';
    }
}
angular.module('app').value('PersonService', PersonService);

class GreetingService{
    constructor(){
    }
    sayHello(){
        return 'Hello from ES6!';
    }
}
angular.module('app').service('GreetingService', GreetingService);

More details here: http://www.syntaxsuccess.com/viewarticle/552dc66f955de264e1fbbaee

Collectives™ on Stack Overflow

Future proofing Angular apps with ES6 features

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related