Angular 4 vs Angular 2 vs 1: The complete list

In this article we compare Angular 2 vs 1. The newest version of Angular 2 is similar but also very different from the previous version of the framework, AngularJS 1.x. This reference page is the complete list of differences in the Angular web framework. It includes some code examples of the differences and explanations of how they affect your web development with Angular.

Angular 2 vs 1

Angular 2/4+ vs 1

Here’s a giant list of differences and we’re going to explore some of them:

  1. Angular 2 works for more than just JavaScript: it works with TypeScript and Dart too. TypeScript is essentially JavaScript with static typing.
  2. Core modules are more modular, you can use 3rd party modules more easily (great example is the forms module which was separated from the core angular module)
  3. AngularJS 2 has a new syntax for two-way data binding, uses the “banana in a box” syntax which looks like this: <a [(ngModel)]="linkTitle">
  4. Component-based UI, directives in Angular 1 become components in Angular 2, and controllers simply disappear [1]
  5. Events use a brand new event syntax, parenthesis around events in attributes [1]
  6. Similar to React, properties are passed into components meaning that $scope is removed entirely from AngularJS. In Angular 2 v 1 you will create properties using the @Input decorator/annotation for a component (or directive) [1]
  7. Dependency injection is more explicit with decorators/annotations, you can use @Injectable to declare a class that can be injected into other places, and you can use @Inject to declare that a function is dependent on another class [2]
  8. Forms in Angular 4 are better structured modules and easier than ever with FormBuilder, FormGroup and Validators built-in [2]
  9. Data binding makes implicit references to component variables meaning you can use {{hello}} instead of {{item.hello}} [3]
  10. Filters have been renamed to Pipes [3]
  11. Uses the let keyword to explicitly define template variables (just like JavaScript ES6’s let?) [3]
  12. ng-app has been replaced with Bootstrapping, you explicitly call the bootstrapping method and pass in the module that is the application’s root module, also known as a main entry point [3]
  13. CSS classes can be set based on variable bindings with a convenient syntax, <div [class.active]="isActive"> [3]
  14. ng-hide and ng-show directives no longer exist, you can use the “hidden” property binding to show or hide elements, <div [hidden]="isHidden"> [3]
  15. ng-href has been replaced by variable binding, <a [href]="someUrl"> [3]
  16. Router linking is done with the routerLink property, <a [routerLink]="['/some/page']"> [3]
  17. The syntax for using ng-if has changed: *ngIf is the new way to use it [3]
  18. ng-repeat has been replaced with *ngFor [3]
  19. ng-src has been replaced with binding to the src property: <img [src]="imageUrl"> [3]
  20. ng-style can be used with a convenient syntax: <div [style.color]="colorPreference"> [3]
  21. The syntax for ng-switch has changed [3]
  22. The filter and orderBy filters have disappeared for performance reasons; do any filtering and sorting of data within your components instead [3]
  23. The number pipe/filter allows you to set decimal places now and you can use the percent pipe to display percentages data [3]
  24. You can use ES6/ES2015 modules!! No need to wrap your modules in IIFE (immediately invoked function expressions) [3]
  25. Defining a module’s imports/dependencies and what it exports/provides is far more explicit and less confusing [3]
  26. CSS Stylesheets can be linked for specific components using the styleUrls property when defining a component, this makes sure styles aren’t leaking into other components and templates [3]
  27. Zones and zones.js are used to keep track of execution context across multiple asynchronous events, making it far easier to reason about the internals of Angular 2 work in contrast to Angular 1 with its scope, digest and watchers [4]
  28. Unit tests are easier to write in Angular 2 vs 1 because the rendering layer has been separated and they are faster [4]
  29. Mobile web apps are supported and created through NativeScript
  30. Bower is no longer needed, everything is installed through NPM (Node Package Manager), or yarn if you’re more adventurous
  31. The HTTP module uses Rx.js for a Reactive data flow, this replaces promises and is great for realtime data retrieval
  32. Reactive programming is used everywhere; it’s used for events, HTTP requests, user input, and more. Data streams replace the $broadcast and $emit and you can create as many data streams as you need

Below you will find more details about some of these items in the list of Angular 2 and Angular 4 vs AngularJS 1 differences.

Learn to create an AngularJS 2 component! Click here now.

1. Angular 2 and Angular 4 work for more than just JavaScript

Angular 2 works with three languages:

  1. TypeScript
  2. Dart
  3. Vanilla JS (or ES2015/ES6 compiled with webpack to ES5)

The preferred language, at least judging by the API documentation and tutorials, is TypeScript. TypeScript is a language created by Microsoft that includes type annotations and other features, the language compiles down to JavaScript so that it is compatible with all web browsers. Angular 2+ uses annotations (also known as decorators) in TypeScript to make it simple to define components and other commonly used Angular classes such as NgModule and Directive.

There is an excellent article at Infoq on TypeScript and AngularJS 2.

4. Component-based UI, directives in Angular 1 become components in Angular 2, and controllers simply disappear

AngularJS 1

In Angular 1 you would use directives and controllers. They worked but weren’t as elegant as they could be. In Angular 2 vs 1 (and in Angular 4) they decided that controllers are redundant and you can use plain old JavaScript classes instead. This removes the need for $scope and simplifies your unit testing code because when you’re testing a controller, you’re just testing a simple class.

Angular 4 and Angular 2 vs 1

In Angular 2 vs 1 (and Angular 4), directives still exist but there is a specialized version of them called the component. In the majority of your Angular 2 coding you will be using components rather than directives. Components are a sub-class of directives so when you feel the need to use something more powerful and have a special use case, you can use directives instead. For example, the ngFor and ngIf components are actually directives because they have to hook into the life-cycle of a directive.

5. Events use a brand new event syntax in Angular 2 vs 1

This was tricky to wrap my head around at first. In Angular 2, when you are binding an event on an HTML element or component, you can use parentheses around the attribute:

<input (blur)="handleBlur()" />

Instead of saying “ng-blur”, you can skip that and use “(blur)”.

25. Defining a module’s imports/dependencies and what it exports/provides is far more explicit and less confusing

In Angular 2 vs 1, the module class ngModule is explicit in defining what it depends on and imports and what it declares for exporting. When you create an ngModule, you will typically be declaring components for export. This allows them to be used in other apps and modules. If you’re writing a module that has a class for API HTTP interaction, your module will depend on the HttpModule (here’s a way to unit test those modules). If you need the angular router, your module will be depending on/importing the RouterModule.

Here’s a more fully-featured example from the Angular 2/4+ API documentation showing what a module declares:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AwesomePipe } from './awesome.pipe';
import { ContactComponent } from './contact.component';
import { ContactService } from './contact.service';
import { HighlightDirective } from './highlight.directive';

@NgModule({
 imports: [ CommonModule, FormsModule ],
 declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
 exports: [ ContactComponent ],
 providers: [ ContactService ]
})
export class ContactModule { }

References

  1. Angular 2 vs Angular 1 | Object Partners, https://objectpartners.com/2015/09/24/angular-2-vs-angular-1/
  2. Angular 2 vs Angular 1: Key Differences, https://dzone.com/articles/typed-front-end-with-angular-2
  3. Angular 1 to 2 Quick Reference, https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html
  4. AngularJs vs Angular 2 – An In-Depth Comparison, http://blog.angular-university.io/introduction-to-angular2-the-main-goals/