ng-europe Retrospective Part 2: RIP

In the last post we went through some of the new Javascript syntax that the Angular team are trialling through AtScript, a superset of TypeScript, which is a superset of ES6...

In this post we'll look at what's being removed between v1.x and v2.0 - The victims from Igor Minar and Tobias Bosch's talk at ng-europe.

First, it's worth mentioning some of the great material that's come up since the last post.

And no doubt there'll be more good stuff published in the coming days. Keep an eye on #AngularJS and the AngularJS team on Twitter and Google+.

Now then. Lets take a look at the kill list.

RIP

First, a little disclaimer: I don't know for sure what Angular v2.0 will look like.
Nobody does for sure. Not even the Angular team, because they haven't finished it yet.
I'm merely extrapolating from the ng-europe presentations, and what's currently available in AngularDart.

Controllers

Controllers, as we know them, are going.
This has already been trialled in AngularDart. Controllers were originally a sub-class of directives, but were eventually deprecated and then removed for the release of v1.0.

Instead you will have a way to expose the properties and methods of a class with a @Directive annotation onto your templates. Igor and Tobias' talk mentioned some of the potential Directive subclasses that will make things easier for you.

The closest equivalent in v1.x I can think of would be a directive with a 'controller' and a 'controllerAs', like so:

angular.module('myApp', []).directive('myComponent', function() {  
  return {
    scope: true,
    controller: function() {
      this.myProperty = 'myValue';
      this.myMethod = function() {
        return 'myResult';
      };
    },
    controllerAs: 'myComponent'
  };
});

Directive Definition Object (DDO)

The old DDO syntax that we all know and... know, for writing directives will be gone.
The heart of your directive logic will be a class, with annotations that describe how the directive will be used.

Once again, to get the best idea of how this will work, look no further than AngularDart.

$scope

Now this is an interesting one - the classic $scope object gone for good.
How is that even possible?

Well, $scope provides 3 main functions:

  • exposing properties to the template
  • creating watchers
  • and handling events

The first is somewhat redundant because every control-I mean, every component class will be exposing it's public properties to the template. As though "controllerAs" had become mandatory.

Watchers will be handled by their own new module: watchtower.js
This allows watchers to be grouped together in a way which doesn't depend on... well, anything really. But certainly not a scope hierarchy like in Angular v1.x

As for events... I'm not sure.
I haven't seen anything specific about events, so I can only speculate.
In saying that - my money is on using the native DOM API for events, as that's how Angular v2.0 is heading for DOM manipulation.

Speaking of which...

jqLite

The Angular team have found that jqLite has become too much of a performance bottleneck for them.
And since Angular v2.0 is for evergreen browsers, they have no fear of relying on native implementations of the DOM API.

DOM traversal is easily handled by querySelector() and querySelectorAll(), events with addEventListener(), and good old createElement(), setAttribute(), and appendChild() for manipulation.

But in the end, if you want to use jQuery, there's nothing stopping you from using it.
It just won't be part of the Angular Core.

angular.module

angular.module() has 2 somewhat overlapping jobs:

  • Register different types of components (eg. Directives, controllers, filters, etc.)
  • and register injectables and their dependencies.

The first has been replaced by annotations, like @Directive.
The second has been split into it's own module: di.js

The workings of di.js is pretty simple.
You declare the dependencies for a class using the @Inject annotation, specifying the class for each dependency (The actual class - not just it's name as a string, like Angular v1.x does), and then create an Injector for the classes you want.
Checkout the example on the di.js github: kitchen-di

The great thing about this is that it doesn't make any assumptions about your application. It's totally separated from Angular.
You can even create multiple injectors, maybe one for each instance of a directive.

ng-app

This wasn't listed with the other tombstones, but you'll notice it was missing from the slide with the experimental template syntax.
It's also not used by AngularDart applications.
Instead they create their own application object, which you then register classes with, and then run the application. Not unlike "angular.bootstrap()".
I think Angular v2.0 will do something similar.

Final Thoughts

These changes are about making your code less "Angular" and more "Javascript".
But nothing is really set in stone yet for Angular v2.0:

In my next post I'm going to make some wild assumptions about Angular v2.0 and come up with some things we can do with our v1.x code to make the transition easier.
(Spoiler alert: It's going to involve ES6)

Cheers,
Jason Stone

(Originally posted 05 Nov 2014 at legacytotheedge.blogspot.com.au)

Jason Stone

Jason is an accidental front end developer with delusions of grandeur.

Sydney, Australia