Whats New in Angular JS 2.0

So finally after a long wait Angular JS 2.0  final version is out. In this post we go over the main reasons to start your new project with Angular 2.0. 

Trying to make sense of the new version.

If you have been visiting our website, you know that previously, I have written on the best Javascript Frameworks. There is a very high probability that you have chosen the Google's AngularJS for building complex web applications. Thanks to the support it received from the online community, we are able to experience new updates on a regular basis.

This open-source client and server-side web development framework has received several updates and changes over the last few years, which happenend due to the support it received from big companies and organization. We have already witnessed the announcement of AngularJS 2.0 which triggered our intellectual curiosity about its new features.

AngularJS 2.0 is meant to be a complete rewrite up over the previous AngularJS 1.0, and not simply the updates or changes over it, which means the core structure will be changed dramatically. Apart from providing PhoneGap for building mobile apps, and several highly updated features, it claims to have a very polished support of model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures (which we will discuss later).

In the ng-Europe conference on September 2014, it was annoucned that AngularJS 2.0 will be released with drastic changes, which means (as we have discussed earlier) it will be a complete rewrite of the entire framwork, and thus will include breaking changes. It is now recently released in the Beta phase, so you can download it from their official website. Thus you can already "taste" the new version for building complex single-page applications.

In this article, I am going to highlight what's new in AngularJS 2.0, wherein I will present the new features and updates in a linear fashion. Let's get started!

What's New In AngularJS 2.0

1) Huge Support For Mobile Development

There is a known philosophy in the online community that if the mobile development is done separately in any framework, then there is a better chance that the whole development will happen in an organized and easy way for the rest of the desktop. Now, AngularJS 2.0 provides several mobile development features.

Before its release, the developers documented each module into an architecture design document, which is available to the community, so you get to read everything in detail. AngluarJS 2.0 focused to make it the "mobile first" platform. Basically, the developers thought that if you maximize the performance for the mobile by tackling loading times, performance and other challenges, then desktop becomes easy to tackle eventually.

This decision has led to the number of attractions to this platform over the past few months, as pretty much every platform is now targeting mobile, so AngularJS 2.0 would be remembered along with other platforms attracting a further audience accordingly.

2) Loosely Couple Modules

In AngularJS 2.0, several modules have been detached from its core; we have seen it for several versions now already. This decision has been taken to ensure that the web developers get the maximum performance, as the less modules and boilerplate code an application needs to load, the better it will perform on the web servers.

The developers also started supporting some additional modules, such as, UI router and rectangular which can be used as options for some core angular modules. Most of the modules are avaialable at www.ngmodules.org, which as of now, lists around 529 modules. You can use these modules for additional functionalities, as it's extremely easy to integrate these modules to your AngularJS applications! You can even add your customized modules for everyone in the community to use, thus contributing to the overall friendly atmosphere of AngularJS!

As I said earlier, the modules are now smaller, which means it dramatically enhances the performance, especially when you don't need a lot of functionalities in your applications, as previously you had to use the other modules that was attached to the core module. Most modules will be removed from the core as a result in AngularJS 2.0.

3) Enhanced Emphasis On Simplicity

The whole design of the architecture is extremely simple now, thanks to the loosely couple modules, better template management, dynamic loading, ambiguity reduction, and several other features (which will discuss later). AngularJS 2.0 aims to simplify the application development phase as much as possible.

AngularJS 2.0 will hide the angular fame in a better manner through the help of Annotations and ES6. Not everything is hardcoded in the API now, for example, custom directives are present in the framework, controllers are avaialalbe outside the core, external modules can be attached to the core, every module is documented, etc. all these features result in the ease of coding for the next big web applications.

This emphasis on simplicity will attract the newer users of AngularJS 2.0 who previously have used the older versions of AngularJS which had a lot of complexity and a big learning curve, which confused the application developers and even result in their hatred for such frameworks! (something that will hopefully reduce with this release)

4) Integration Of Modern Features

(i) TypeScript Support

From now on, AngularJS 2.0 will target ES6 (which is the recent update to Javascript). Now, the AtScript (which is used as a superset of ES6) will be avaialable for developing the applications. If you are not aware of the AtScript, then just know that it is a superset of E6 that uses the TypeScript's type syntax to produce runtime type assertions instead of compile time checks. The code is processed by the Tracuer compile to produce ES5 code, which means it is compatible with previous ES5. Apart from it, you will still be able to use Javascript however, so the developers allow you to make the choice.

As I said earlier, TypeScript is backwards compatibile with ECMAScript 5 (i.e., Javascript), meaning your old code can easily be moved to it without any changes. As Microsoft's TypeScript is a modern version, you get the following new features out of the box:

• Class-based Object Oriented Programming
• Static Typing
• Generics
• Lambdas

You also get several benefits of the ES6 which enables you to code in an extremely elegant and modern fashion:

• Iterators
• Python-Style Generators
• For/Of Loops
• Reflection

(ii) Evergreen Browsers support

It will now support "evergreen" modern browsers (i.e., the browsers that automatically update themselves silently without giving any notifications), because it needs to ensure that the user is getting the maximum potential of the AngularJS 2.0. This reduces the need for browser compatibility workarounds which used to take A LOT of the time.

This has a dramatic effect on the front-end web development, as it means that when someone is targetting Evergreen browsers, then they would be very confident that their code that runs in their browser will run in the customer's browser too. This eliminates the need to write conditional code for different browsers.

(iii) Dynamic Loading

In AngularJS 2.0, whenever you add new directives or controllers on-the-fly, then you don't need to compile template again, as now this process happens asynchronously. Basically, when you compile the template, you also provide the Component definition, and as the code is based on the ES6 module spec, the provided module loader can now load dependencies by simply referencing them in the component definition.

This feature will further ease the coding as web developers now wouldn't need to rely on manual template compilation whenever they make a small change.

(iv) Improved Dependency Injection

The Dependency Injection (DI) allows you to to inject (or add) dependencies in different components across the applications without requiring any information on how those dependencies are created or what dependencies they need themselves.

The advantages of DI is that dependencies don't need to be instantiated when creating them, and thus you can avoid tightly coupled components by injecting dependencies when needed. As long as the implementations conform to a standard protocol or rule, you can inject different implementations to the same component.

Several new features have been added, for e.g., lifetime/scope control and child injectors, etc. Child injectors have the capability of overriding the service of its parents at the child level. Annotations are provided which help to associate metadata with functions. This eases the construction of object instances, as now you can provide the required information to the DI library and let it handle the rest!

AngularJS 2.0 also features the new instance scope control, which hugely affects the style of coding, especially when combined with new child injectors and your own scope identifiers.

(v) Simpler Routing

The AngularJS 2.0 uses the component based routing, which means components themselves are agnostic of the routes, and so can be used without considering of the routes. It includes the following features:

• Simple JSON-based Route Config
• Optional Convention over Configuration
• Static, Parameterized and Splat Route Patterns
• URL Resolver
• Query String Support
• Use Push State or Hashchange
• Navigation Model (For Generating a Navigation UI)
• Document Title Updates
• 404 Route Handling
• Location Service
• History Manipulation

(vi) Asynchronous Template Compilation

As I mentioned in the Dynamic Loading section, how template compilation works, wherein you provide the Component definition wit the help of controllers and directives. Now, in AngularJS 2.0, there are actually three kinds of directives:

• Component Directive - It helps creating the reusable components composed of View and a Controller.
• Decorator Directive - It helps in decorating the HTML elements, for example, you can add a tooltip or show/hide elements using ng-show/ng-hide.
• Template Directive - It transforms HTML into a reusable template. It can be instantiated and inserted into the DOM by the directive author. For example, you can use ng-if and ng-repeat for their distinct purposes.

5) Useful Functionalities

There has been certain new features added in the AngularJS 2.0. For example, a logging library called diary.js is now included in the package. This library measure the time spent on your applications which can help you to find out the bottlenecks in your own code, which means you can use it to improve the performance of your applications. You don't need to rely on external logging libraries, such as, $log, Log JS, etc. as you get the diary.js out of the box, and the best thing is that it's an open-source library for Javascript, which means you can even use it outside the AngularJS 2.0!

In AngularJS 2.0, the $scope will be removed as it now supports ES6 classes, so you can easily use variables and scoping through elegant classes without resorting to $scope.

In the previous versions, the support for internationalization (I18N) was quite poor, now AngularJS 2.0 fully supports I18N so your applications can reach the worldwide.

Conclusion

So, these are the new features in AngularJS 2 .0 which I tried to highlight in the most organized and easy-to-read way. The admiration for AngularJS remains steady in the web development the more they delve into it and find its deepest mysteries. This may be the most appropriate time to learn the AngularJS as these new versions give the confidence that they will always remain in power when it comes to web development.

Did you like this article? Why not share it with your friends?