Being passionate about AngularJS, me and two fellow JDriven colleagues visited the ngEurope conference. The amount of presentations during ngEurope was somewhat overwhelming, especially during the mornings without any scheduled break. Good thing I made some notes, that the slides are already available on-line and that someone published quite detailed notes for all sessions. Without all this I might simply have forgotten about some very interesting and relevant details. During ngEurope there was a all lot of attention for the just released 1.3 version of AngularJS and the coming 2.0 release.

Angular 1.3

The latest AngularJS 1.3 release features some great performance improvements (3.5x faster digest and 4.4x faster DOM manipulation) and much less pressure on the garbage collector (GC). However in order to achieve this the AngularJS team did decide drop the support for Internet Explorer 8 (which is default IE version on Windows 7). To allow for even more (optional) speed improvement one time (one way) binding support has been added. Using one time binding no $watch will be registered for the binding; typically you would use one time bindings to speed up rendering the elements of ngRepeat. Additionally a lot of improvements are done on the ngModel directive. First of all a $validators pipeline had been introduced as an alternative to invoking $setValidity from a parser / formatter function. Which also fixes the "input not showing invalid model values” bug ( #1422). Yet another great improvement are the new async validators that allows for (asynchronous) model validation on the back-end. The ngModel directive is now accompanied by the ngModelOptions directive that allows you to configure (the controller of) the ngModel directive. We now can specify when we want the model value to be updated. For instance after a short delay (a so called debounce) or on blur (i.e. when focussing another field). And using ngModelOptions we can now configure the usage of (jQuery) style getter / setter function on our model (instead of using plain data properties). Using ngMessages (multiple different) error messages can now be shown much easier in a switch–case like style for a form element. Besides preformance- and ngModel (related) improvements AngularJS also features some other noteworthy features:

• composable SVG's: it's now possible to directly use SVG as a template of a directive by additionally specifying templateNamespace:'svg' in your directive declaration
• allOrNothing: certain expressions (i.e. {{user.id}} in <img ng-src="users/{{user.id}}/avatar.png">) will only be rendered when completely available (i.e. preventing unneccessary additional image requests)
• $watchGroup: $watch for more than one property
• strictDI: checks during bootstrap if all components are properly annotated for minification; this can be enabled by adding the strict-di HTML attribute to the ng-app attribute or using the angular.bootstrap function (that could also be used from a Jasmine test)
• ngAria: new module to more easily embed Accessible RIA (Rich Internet Applications) in your AngularJS application

The New Router

For the future AngularJS 2.0 a new router has been developed that is currently also being backported to Angular 1.3. Similar to Angular UI Router the new router is also based on (nestable) states. But also brings new features like dynamic loading and child apps support allowing a single app router to be splitted into sub routers. Also it possible to add lifecycle hooks on navigating to or from a router state (i.e. displaying a message in case of unsaved changes).

AngularJS 2.0

(day 1 keynote slides, AtScript slides and Angular 2.0 Core slides) During ngEurope the future AngularJS version 2.0 did receive quite some attention. Although version AngularJS 2.0 is still in its design phase (with basically only really the injector and router in place)... one thing is for sure... version 2.0 of AngularJS will differ hugely from its current (1.3) AngularJS version. First of all the default 'language' for developing an AngularJS 2.0 applications is no longer ECMAScript5. Instead the future 2.0 of AngularJS will be developed in AtScript which is superset of the ECMAScript6 (final draft planned for januari 2015) with a whole lot of extras like types (checked during compile times as runtime check), Java-like annotations, generics and introspection (somewhat similar to reflection in Java). Since AtScript is currently not supported by any browser (even ECMAScript6 isn't currently 100% supported), the Traceur transpiler is used to generate ECMAScript5 from AtScript. Although AtScript is the default way to developed AngularJS 2.0 application, it's also fully possible to still use ECMAScript5 (although it's kind of verbose). A big disadvantage of using AtScript is that is breaks with your existing toolchain. Some tooling (JSHint, ESHint) currently not even (completely) supports the upcoming EcmaScript6, let alone AtScript (being somewhat tied to Angular 2.0) support might never be added for certain tooling (forcing you to stop using the tool or find a replacement). Off course one could still use ECMAScript5 to develop Angular 2.0 application, but personally I find this approach to verbose and also somewhat error prone. Beside AtScript a whole lot of other huge changes are made in AngularJS. First of all (although not an extreme change) the template notation is somewhat change. Instead of using custom attributes (i.e. ng-click) we now using (round) brackets to attach event listeners (i.e. <button (click)="addTodo()">). Additional the names of custom attributes directives (i.e. ng-repeat) are now place between square brackets to easily differentiate between normal HTML and custom attributes. Way more extreme changes are made in the way you write your AngularJS code. Controllers, the (dreadful) Directive Definition Object ("DDO"), $scope, angular.module and jqLite are all being eliminated. Instead of the cumbersome traditional way of declaring a directive one can now simply (Java-style) annotate a class with either @TemplateDirective (i.e. ngRepeat) or @DecoratorDirective (i.e. ngClass). And instead of using a controller one could uses a @ComponentDirective annotated class. Due to the usage of @ComponentDirective (and @TemplateDirective) the $scope is no longer needed (and therefore is removed). Since AngularJS 2.0 will only support the most recent (evergreen) browsers (be prepared to so say goodbye to IE9) jqLite is no longer needed. By using native DOM in 2.0 the performance can be improved even further; but although AngularJS 2.0 won't be use jqLite (not jQuery) you can still use jQuery in your own code (although I personally would not suggest that). Instead of using AngularJS (dependency injection) modules (created through angular.module) 2.0 will use ECMAScript6 modules and the types of constructor arguments to specify which service to inject (as opposed to AngularJS 1.x which used the name of the argument). This approach is very similar to how the Spring Framework does injection for Java application and very neatly integrates with the usage of ECMAScript6 modules. During the "Angular 2.0 Core" presentation a 2.0 implementation of a TabContainer and TabPane directive was shown. Instead of using a require (like in a Angular 1.x directive declaration) the TabContainer we can now simply be injected by adding tabContainer: TabContainer to the constructor of TabPane. Additionally the TabContainer can now (instead of a manual query of its TabPane children) simply add tabs: Query<TabPane> (using generics) to inject the TabPane's as a constructor argument.

References

• Angular 1.3 by Jeff Cross & Brian Ford (slides)
• The New Router by Rob Eisenberg (slides)
• Keynote (of day 2) on AtScript by Miško Hevery (slides video)
• Angular 2.0 Core by Igor Minar & Tobias Bosch (slides video)
• ES6 in Angular 2.0 Erik Arvidsson & Vojta Jína (slides video)
• ng-europe, Angular 1.3, and beyond: blog post of the AngularJS team as wrap up of ngEurope about AngularJS 1.3 and the future 2.0
• Finally... links to almost all slides can be found here