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
    Thanks!

  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.
    http://www.talkingdotnet.com/difference-between-angular-1-x-and-angular-2/

  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.

    http://www.talkingdotnet.com/difference-between-angular-1-x-and-angular-2/

    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: https://neverfriday.com/learning-angularjs/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
React Server Components
The React Team recently announced new work they are doing on React Server Components, a new way of rendering React components. The goal is to create smaller bundle sizes, speed up render time, and prevent […]
Jolt custom java transform
Jolt is a JSON to JSON transformation library where the transform is defined in JSON. It’s really good at reorganizing the json data and massaging it into the output JSON you need. Sometimes, you just […]
Page Object Model for UI Testing
How to make a multi-handled range input
The HTML range input is a great way to allow your users to manipulate a numeric value using their mouse. The range input that is currently provided by browsers only supports a single handle, which […]