Why Angular2 is Easier Than AngularJS

Why Angular2 is Easier Than AngularJS

  • 2016-08-29
  • 6971

Even if you have been hiding under a rock, you must know that Angular2 is coming (or is already here, depending on who you speak to!). That said, a lot of people have been up in arms at the drastic changes that Angular2 is proposing over AngularJS , to the extent that at first sight, they might look like two completely different frameworks. But when you actually spend some time digging into it, you would come to realize that Angular2 actually

  1. Is using the same concepts that AngularJS proposed and implemented
  2. Simplifies a great deal of things to make it easier to develop in AngularJS

In this write-up, we will go over some of the major reasons why Angular 2 is actually simpler to get started than AngularJS

Goodbye 40+ directives, it was nice knowing you!

Remember when you first started learning Angular 2, you suddenly had to learn all these special directives, from ng-click to ng-show to ng-class, and whatnot. Every action that we wanted to achieve would translate to a directive, and if we wanted to support a new behavior, it would mean writing or integrating with a new directive. This was necessary because AngularJS 1 was a wrapper around jQuery and DOM, and thus needed an outlet for each API.

Not so with Angular 2. Most DOM elements are directly bindable, with the new Data & Event binding syntax. That means we can directly bind values to styles, innerHTML, as well as bind to native events such as click, mouseover, etc. No need for new libraries, new integrations.

We can now say goodbye to

  • ng-show / ng-hide
  • ng-click
  • ng-mouseover
  • ng-keypress
  • ng-style
  • ng-class

And many more directives. Life is a lot simpler in Angular 2!

No more Services, Factories, Providers, Directive Definition Objects

The single most upvoted question on StackOverflow related to AngularJS was, “Whats the difference between Service, Factory and Provider?”. And the sad part is, even after the answer, not many people were clear on it. And then we had the dreaded Directive Definition Object, with the scopes, =, &, @ and more! And especially that transclude thing, not that many people understood or used it! Did it mean transfer and include, or was it something more insidious?

Instead, in Angular 2, we only have to work with ES6 classes. Want a service? Write a class. Want a Factory? Write a class. Need to create a directive or create a component? Write a class! At most, you will have to learn some simple annotations, but the core functionality is always using classes. Unlike AngularJS1, where each one was implemented differently (a class for Service, a function for factory, an Object for Directive), the cognitive overhead is minimal in Angular 2 where everything is just a class, with different annotations.

HTML that conveys what is doing — Event & Data binding

One common complaint with AngularJS HTML templates was that with large projects, it tended to get very confusing. That is, given an HTML snippet like

<div do-x=”y”>

It was not apparent whether y was a hardcoded string literal, a variable passed from a scope, whether it was data-bound, or just a click listener like ng-click. This could mean a one way data binding, a two way data binding, a simple string attribute.

Angular 2 solves this by tweaking the syntax to make the intent clearer.

If the data is to be bound from the JS code (controllers) to the UI, use the [] syntax

<div [innerHtml]=”someValueFromController”>
<myElement [myCustomAttr]=”someValueFromController”>

If the event is to be bound to the controller from the UI, use the () syntax

<div (click)=”controllerFn()”>

The event binding works for any DOM event, without any code required. There is no glue code in Angular2 which says you can do () binding on click! Thats the best part, future events added to the browser will be automatically available in Angular2!

If it has neither of these, its a standard normal HTML attribute!

With just these three rules, understanding any template becomes very easy, both for us as developers as well as for IDEs which can provide some great functionality to us for free now!

Few Simple Concepts to start

Unlike AngularJS 1 which required one to understand at the minimum

  • Controllers
  • Services
  • Template Syntax
  • Lots of Directives
  • Scopes
  • AngularJS Life-cycle
  • Compile & Link
  • Directive Definition Objects

in addition to its own special syntax and habits to be able to leverage and use AngularJS correctly and in a powerful manner, Angular 2 is much simpler. To really use AngularJS immediately, you need to know:

  • Components
  • Services
  • Structural Directives
  • Data & Event Binding

That is it for the basics. The fact that everything is just a JS class means that is something you don’t have to learn again. There is of course a lot more, but this basic set is enough to setup most small to medium sized projects that you would write in AngularJS.

Conclusion

Angular 2 is a seismic change in AngularJS land, but at the same time, it can also be a gradual, simpler movement. It can also be a better place to start for developers new to AngularJS, where rather than spending time learning a complex beast (and what a beautiful beast it is!), they can get started with something that is simpler, more robust and more performant than AngularJS.

Suggest

Angular 2 From The Ground Up - Early Access

Angular 2 Fundamentals: Learn By Creating A Real Web App

Become a Modern Web Developer

Angular 2 Fundamentals for Web Developers

Angular 2 Master Class with Alejandro Rangel