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.

About the Author

Jake Partusch profile.

Jake Partusch

Sr. Consultant

Jake is a passionate web developer, a relentless tester, and a hobby hardware hacker. Jake has been a full-stack developer for over 4 years and has developed applications using Java, Spring, and AngularJS.

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 *

Related Blog Posts
Performance Test Liquibase Update
When doing a liquibase update to a database if you’re having performance issues, it can be hard to find out which updates are causing problems. If you need to measure the time to apply each […]
TICK Stack Monitoring for the Non-Technical
TICK – Telegraf, Influx, Chronograf, and Kapacitor – is a method of monitoring your systems and applications. In this article, I discuss in non-technical terms what the difference is between TICK and Prometheus Grafana A […]
Design Systems, Part 1 • Introduction
Business leaders need a practical guide to plan and execute Design System Initiatives. The aim of this series is to be that guide. This installment introduces terms and definitions as a primer on Design Systems.
ML for Translating Dysarthria Speech (Pre-Part 1)
What is Dysarthria? Per the Mayo Clinic, Dysarthria occurs when the muscles you use for speech are weak or you have difficulty controlling them. Dysarthria often causes slurred or slow speech that can be difficult […]