Angular 2.0. It is essentially a re-imagining of AngularJS for the modern web, taking into account everything that has been learned over the last six years, since the first Angular was released.
Enhancements in Angular 2
General
Angular 2 adds many improvements to the innovations that were introduced in Angular 1.x
It has a much higher focus on creating reusable front-end components
, which is the purpose of modern web frameworks. While it was possible to do so using Angular 1.x
, version 2 of the framework removes a lot of the barriers to reusability, such as reliance on $scope
and on controllers
. Minification was a known issue on Angular 1.x
that has been fixed in this new version of the framework.
Directives
were also immensely simplified, making Angular 2 code much more concise and readable when compared to Angular 1.x
. This new version is also intended to be used with TypeScript, removing a lot of the validation code necessary to enforce type safety. Packed with many performance and framework improvements, Angular 2 manages to present almost an entirely new look at the declarative front-end framework pattern.
AtScript
AtScript is a superset of ES6 and it’s being used to develop Angular 2 It’s processed by the Traceur compiler (along with ES6) to produce ES5 code and uses TypeScript type syntax to generate runtime type assertions instead of compile time checks. However, you can always use plain JavaScript
/ES5 code instead of AtScript to write your Angular apps.
Instance Scope
In Angular 1.x
, all instances in the DI (Dependency Injection) container were singletons. This is the default for Angular 2 as well. In order to get different behavior you had to use Services, Providers, Constants, etc. That's some confusing stuff. Fortunately, the new DI has a new, more general and more powerful feature. It now has instance scope control.
Child Injectors
Child injectors are a major new feature. A child injector inherits from its parent all of its parent's services, but it has the ability to override them at the child level. As an example of this, the new router has a "Child Routers" capability. Internally, each child router creates its own child injector. This allows for each part of the route to inherit services from parent routes or to override those services during different navigation scenarios.
Caveats
Let's be honest...AngularJS isn't exactly the easiest thing to learn. Yeah, you pick it up and you think to yourself "This is awesome. It's really easy and magical!!" Then you start building your app and find yourself going "holy...what!!?? I don't understand!!!"
- Angular 2 suffers from extra complexity because of TypeScript.
- The syntax is just too off-putting.
- Difficulties with understanding the code and debugging.
Angular 2 vs React
It’s important to note from the get-go that in many ways comparing React
to Angular
(any version) is like comparing bananas to apples. Angular is designed as a front-end framework, providing a full architecture for the client side of your application and allowing you to treat your client code as a robust suite of functionality. React is a library, and much less intrusive in terms of the features offered – it’s intended to be used as a part of a whole, rather than dictating your code’s structure. While this may seem to make a comparison between the two somewhat challenging to conduct, there are enough similarities between the two to drive a fruitful discussion on the advantages and disadvantages of each.
Templating
Both frameworks offer templating
tools, but take vastly different approaches to how those are managed. React
uses template objects built on top of JSX
, which allows you to build templates inline and keep all of your template code in one place. Angular 2
, on the other hand, still maintains physical separation between the JavaScript driving your application, and the HTML being rendered.
Angular 2.x focus on componentization
, though, coupled with the use of TypeScript
to build components as coherent functional units, allow you to write your templates in a more generic fashion that can be more reusable and flexible than was possible in Angular 1.x
. – React
templates will likely be more compact and quicker to render, but Angular 2
components will likely be more reusable and, through the ever-present two-way data binding, will be easier to manage as application objects.
Native Support
Angular 2
and React
, having different underlying goals, understandably take very different looks at support for native device code when incorporated into mobile apps. The Angular 2
team has opted to focus on the framework itself, and left other vendors such as Ionic
and NativeScript
to handle translating that code into a format runnable on devices. The React
ecosystem, on the other hand, has React Native
– a framework designed to translate React code into a native application experience, achieving significant performance improvements over more traditional hybrid web apps.
Once again, choosing a “right” approach comes down to the goals of your application. If you’re looking for a blazing fast mobile app experience, React
is the clear front runner. However, if you’re looking to maintain a componentized
application architecture, and willing to sacrifice some performance to achieve a more consistent code structure, then combining Angular 2
with a framework like Ionic
can provide you with all the flexibility you could desire.