Angular 2 vs Angular 1

Angular 2: A brief history

About a year ago, the Angular team made the decision to drastically change the tremendously popular AngularJS framework. Google and the Angular contributors sought to better the framework by reducing the learning curve and providing performance enhancements. However, these proposed changes were met with much contention by the developer community. To ease concerns, the Angular team sought to explain the benefits more thoroughly at ng-conf 2015. Since then, the Angular team has made quite a bit of progress towards implementing their dream, with 37 alpha releases so far.

What are the differences?

Component-based UI

Angular is adopting a component-based UI, a concept that might be familiar to React developers. In a sense, the Angular 1.x controllers and directives blur into the new Angular 2 Component. This means that in Angular 2 there are no controllers and no directives. Instead, a component has a selector which corresponds to the html tag that the component will represent and a @View to specify an HTML template for the component to populate.

The following examples utilize TypeScript, a superset of the ES6 javascript standards. Angular 2 is currently being developed in TypeScript, but will be compatible with both ES5 and ES6 javascript standards.

Angular 1.x:

Angular 2.0:

User Input with the Event Syntax

Angular applications now respond to user input by using the event syntax. The event syntax is denoted by an action surrounded by parenthesis (event). You can also make element references available to other parts of the template as a local variable using the #var syntax.

Angular 1.x:

Angular 2.0:

Goodbye $scope

Even though ‘$scope’ has been replaced by “controller as” as a best practice since Angular 1.2, it still lingers in many tutorials. Angular 2 finally kills it off, as properties are bound to components.

Angular 1.x:

Angular 2.0:

Better Performance

With ultra fast change detection and  immutable data structures, Angular 2 promises to be both faster and more memory efficient. Also, the introduction of uni-directional data flow, popularized by Flux, helps to ease some of the concern in debugging performance issues with an Angular app. This also means no more two-way data binding which was a popular feature in Angular 1.x. Not to worry, even though ng-model is no more, the same concept can be solved in a similar way with Angular 2.

What does this mean for me?

Big changes are on the horizon with Angular 2, making the migration path somewhat unclear. Even so, the direction that the Angular team has taken seems to be bold but positive. In preparation for an upgrade, current applications should keep up to date with the latest 1.x version and consider introducing ES6 or TypeScript.

One thought on “Angular 2 vs Angular 1

  1. asdasd says:

    There’s a misspelling in: ‘What doe this mean for me?’

  2. helene says:

    very helpful!

  3. kush says:

    Its a great explanation

  4. タイン says:

    i am familiar with angularjs 1, so i think angularjs2 is little Confusing…..

    1. Damian Pound says:

      Wouldn’t that be expected with the architecture changes? It’s not a completely new framework, so it should be easier to learn than Angular1 since you already know Angular1.

  5. sombriks says:

    to remove the bidirectional binding is a big step back. it’s true what they told about performance, but such feature will be heavily missed.

  6. Vijay says:

    Great post!!
    Angular 2 is awesome and I am currently loving it. And best way to learn new tech is via comparing with old one. And you exactly showed via comparing. I also found another post which is to the point and precise. Thought of sharing with you.

  7. George Lucas T. Bentes says:

    Nice overview! Thanks!

  8. Virendra says:

    Great post and good comparison. I believe angular 2 is in right direction and it will be easy to learn for a beginner. Person like me coming from Angular 1.x background may find little difficult. I was also looking for a comparison post between 1 and 2 (a summary kind of thing) and found at below link.

    Thought of sharing with you.

  9. Ajit says:

    Great Post!! Nice comparison with sample code.Thanks!!

  10. Sapti says:

    Nice discussion!

  11. Rudolf Olah says:

    I referenced this article when writing about the differences between angularjs 2 vs 1:

    This is a pretty good overview! Thanks for writing it.

Leave a Reply

Your email address will not be published. Required fields are marked *