Angular JS 2.0 General Review

Angular2 has no Controllers

It seems it got modern for the JavaScript MVW frameworks to drop controllers from their components (starting from Backbone.js). Instead of using controllers, Angular2 bet on component-based UI, similar to ReactJS. The core team dropped controllers but added components and kept the directives.

No Two-Way data-binding

One of the things AngularJS 1.x was loved about was the two-way data-binding using . Well, it is dropped from v2.0. Initially it might seems a bit weird, crazy and frustrating but it is actually a really good thing, do not be heartbroken. Removing the two-way data-binding leads to:

• More explicit data-flow
• No circular dependencies between bindings (so no TTL of the )
• Better performance
  • The digest loop could be run only once
  • We can create apps, which are friendly to immutable/observable models, which allows us to make further optimizations (for more information about immutable data take a look at my talk at or this great post by Victor Savkin, a core member of the AngularJS team)

New Router

Brian Ford gave a talk about the new router of AngularJS. I'm not saying "the new router of Angular2" because it could be used in AngularJS 1.x apps as well, which will make your transition smoother. What is that great about the new router? It is more feature rich than the old and with Angular2 in mind unlike . Probably it is the only component, which got more complex to use (given the increased amount of features it has) but most likely it won't be part of the core of the framework (similarly to ), given it is hosted in different repo.

You can use the new router inside your AngularJS 1.x app if you "emulate" the Angular2 component directive with the legacy controllers and templates.

Real Modules

During the AngularJS classes I led I had troubles explaining why AngularJS has modules, which must be loaded explicitly but there's no way to load them asynchronously, without hacky solutions. Well, Angular2 uses the ES6 modules. Since they are not supported by the browsers yet, you can fallback to SystemJS and ES6-module loader, or transpile them to AMD, CommonJS or whatever you find suitable for yourself.

This allows creating bundles with the modules, which are required during the initial page load and loading all others on demand, asynchronously. That's one of the things I've always dreamed of and I'm kind of disappointed it is added at this late stage.

No more $scope

There are a lot of statements the was a tricky for explanation concept to the AngularJS beginners. Well, I had harder times explaining the module system, anyway, there's no such thing as in Angular2! Again, there is no scope. Instead of binding to properties in the scope inside our templates, we directly bind to properties of our "components".

No more $scope.$apply

But how then AngularJS knows that anything outside it's execution context has taken a place? Lets think where the changes might come from:

• (yeah, there are people who still use it...)
•  

Basically a lot of browsers' APIs. How we can be notified when the user invokes method from any of these APIs?Well...we can monkey patch all of them! That's what Brian Ford explained in his talk about in ng-conf 2014.

I bet now you're thinking - "Oh God! Why I'd use something, which monkey patches all the browser APIs? This is just not right!". Why it isn't?

Errors in the Template Expressions

Another thing I didn't really like in AngularJS 1.x was the lack of errors when you had a mistake inside an expression used in a template. The errors, which you were supposed to get were omitted and you weren't aware that your code actually doesn't work. Well, in Angular2 you will get runtime errors in such cases.

It is not production ready

The API of Angular2 is still under development. There are a lot of things, which are still not clarified (like change detection, best API, forms API, etc.). You can play with the framework using the quick start or my seed project

What else we have left?

Filters

According to the documentation, Angular2 will have formatters pipes, which are equivalent (a bit more powerful, since allow enhancement of the change detection) to the filters, well known from version 1.x.

Improved DI

The dependency injection mechanism will be used with the decorators syntax provided by TypeScript. You can take a look at the source code here. Since it is implemented as external library, you can use it inside your project. Here is a simple example from the git repo of :

Conclusion

Angular2 will be a brand new framework, which is not backward compatible with AngularJS 1.x. It is implemented in TypeScript but you don't have to use it if you don't want to. It implements some of the ideas from ReactJS, mostly the unidirectional data flow, which makes it work great with the flux architecture. It is on top of web standards (which is a big bonus compared to ReactJS) and takes advantage of some of the web components' APIs. It will be much faster and lighter compared to AngularJS 1.x and will be supported by the modern browsers with polyfills for older ones (as far as I know the support for IE7 and IE8 will be dropped).

- Based on the blog from one of the Java Script Hacker