The most important technology news, developments and trends with insightful analysis and commentary. Coverage includes hardware, software, networking, wireless computing, personal technology, security and cutting-edge technology from the business world to the consumer world.
Friday, March 6, 2015
What’s New in AngularJS 2.0
From humble beginnings, Angular has matured into a client-side MVW framework (that’s Model-View-Whatever) for the building of complex single-page applications. It places equal importance on application testing and application writing, while simplifying the development process.
Angular 2.0 was officially announced at the ng-conference in October, 2014. This version won’t be a complex major update, rather a rewrite of the entire framework and will include breaking changes!
Why Angular 2.0?
Before getting into further discussion about Angular 2.0 (which has an estimated release date of the end of 2015), let’s briefly consider the philosophy behind the new version. Angular 2.0 development was started to address the following concerns:
The new Angular version will be focused on the development of mobile apps. The rationale is that it’s easier to handle the desktop aspect of things, once the challenges related to mobile (performance, load time, etc.) have been addressed.
Various modules will be removed from Angular’s core, resulting in better performance. These will find their way into Angular’s ever-growing ecosystem of modules, meaning you’ll be able to pick and choose the parts you need.
Angular 2.0 will target ES6 and “evergreen” modern browsers (those automatically updated to the latest version). Building for these browsers means that various hacks and workarounds that make Angular harder to develop can be eliminated allowing developers to focus on the code related to their business domain.
What’s the Controversy?
During the ng-conference there was no mention of a migration path to version 2.0. It was also pointed out that the jump to 2.0 version will lead to broken Angular 1.3 apps, as there won’t be any backwards compatibility. Since then, the developer community has been abuzz with uncertainty and speculation, with some developers questioning if it’s even worth starting a new Angular 1.3 project.
What Are the Changes?
Improved Dependency Injection (DI)
Dependency injection (a software design pattern in which an object is passed its dependencies, rather than creating them itself) was one of the factors that initially differentiated Angular from its competitors. It is particularly beneficial in terms of modular development and component isolation, yet its implementation was plagued with problems in Angular 1.x. Angular 2.0 will will address these issues, as well as adding missing features such as child injectors and lifetime/scope control.
AtScript provides tools for associating metadata with functions. This facilitates the construction of object instances by providing the required information to the DI library (which will check for associated metadata when calling a function or creating an instance of a class). It will be also easy to override parameter data by supplying an Inject annotation.
A child injector inherits all the services of its parent with the capability of overriding them at the child level. According to requirement, different types of objects can be called out and automatically overridden in various scopes.
The improved DI library will feature instance scope control, which will become even more powerful when used with child injectors and your own scope identifiers.
Templating and Data Binding
Let’s take a look at templating and data binding as they go hand in hand when developing apps.
This is a feature which is missing from the current version of Angular. It will be addressed by Angular 2.0, which will let developers add new directives or controllers on the fly.
In Angular 2.0, the template compilation process will be asynchronous. As the code is based on the ES6 module spec, the module loader will load dependencies by simply referencing them in the component definition.
In Angular 2.0 there will be three kinds of directives:
Decorator Directives – These directives will be used to decorate elements (for example adding a tooltip, or showing/hiding elements using ng-show/ng-hide).
Template Directives – These will turn HTML into a reusable template. The instantiating of the template and its insertion into the DOM can be fully controlled by the directive author. Examples include ng-ifand ng-repeat.
The initial Angular router was designed to handle just a few simple cases, yet as the framework grew, more and more features were bolted on. The router in Angular 2.0 has been reworked to be simple, yet extensible. It will include the following basic features:
Simple JSON-based Route Config
Optional Convention over Configuration
Static, Parameterized and Splat Route Patterns
Query String Support
Use Push State or Hashchange
Navigation Model (For Generating a Navigation UI)
Document Title Updates
404 Route Handling
Now, let’s check out the features which make the improved router a catalyst to take Angular 2.0 to new heights.
The child router will convert each component of the application into a smaller application by providing it with its own router. It will help encapsulate entire feature sets of an application.
This will give developers finer control over the navigation lifecycle, via a set of can* callbacks:
canActivate – Allow/Prevent navigating to the new controller.
activate – Respond to successful navigation to the new controller.
canDeactivate – Allow/Prevent navigation away from the old controller.
deactivate – Respond to successful navigation away from the old controller.
These callbacks will allow the developer to return Boolean values, a Promise for that value, or a Navigation Command (for a lower level control).
All of this logic is built using a pipeline architecture which makes it incredibly easy to add one’s own steps to the pipeline or remove default ones. Moreover, its asynchronous nature will allow developers to a make server request to authenticate a user or load data for a controller, while still in the pipeline.
Angular 2.0 will contain a logging service called diary.js—a super useful feature which measures where time is spent in your application (thus enabling you to identify bottlenecks in your own code).
$scope will be removed in Angular 2.0 in favor of ES6 classes.
There is a lot of excitement and buzz around Angular 2.0 at the moment and this will only heighten as its release date nears. The beginning of March will see the next ng-conf take place where it’s likely that more details of the next version will emerge.
Meanwhile opinion remains divided as to whether breaking change is a good thing. Proponents claim there are hard limits on the improvements that can be made to 1.x, whilst opponents are understandably nervous at the apparent lack of a migration plan.