Differences between AngularJS and Angular2

Here are some of the differences between AngularJS and Angular 2

Feature	AngularJS	Angular 2
Introduction	AngularJS is a JavaScript framework which is used to build web applications. It was released by Google and is developed using TypeScript and JavaScript and uses HTML. And also uses Controllers and Scope objects.	This is not an upgraded version of AngularJS but completely rewritten with lot of improvements and released in 2016 with the goal of building complicated applications in a feasible way. Angular2 follows component-based UI and no more controllers and scope in objects in this. This is currently build uing TypeScript but also compatible with ES5 & ES5 JavaScript standards.
Prerequisites	JavaScript and HTML alone	Basic JavaScript, CSS, HTML OOP concepts and any programming language knowledge like C++, C# or Java
File Type	Uses JavaScript	Uses TypeScript
Binding	Supports both one way (<div>ng-bind="message"</div>) and two way binding (Ex: {{"message"}})	Supports both one way and two way binding but One way binding supports Interpolation (<div>message </div>) and Property binding (<img [src]="imagePath" />) In Two way binding you need to use [(message)] parenthesis inside brackets
Bootstrapping	Using ng-app and code are the two ways to Bootstrap AngularJS	The change is, we connect angular components to view and not modules
Routing
Performance	Watchers are killers in AngularJS, performance will hit as the number of watchers are more here	As Angular2 uses DI hierarchical system, this is much more faster than AngularJS
Mobile Support	Does not have mobile support. Using 3rd party frameworks one can achieve the functionality	Is mobile oriented as it is designed from ground up with mobile support
Services	Some of various ways to create services are like Service, Factory, Provider etc..	There is only one way t use services
Filters	Are used to filter result sets	These are renamed as Pipes and no change in functionality or purpose of the same

Angular 4 over Angular 2

Smaller & Faster Apps	Comparing with Angular 2, these applications are smaller & faster
Reduced View Engine Size	Changes under hood to what AOT generated code compilation that means in Angular 4, improved compilation time. These changes reduce around 60% size in most cases
Animation Package	Animations now have their own package which ic @angular/platform-browser/animations
Improvement	Improved *ngIf and *ngFor
Template	The template is now ng-template. You should use the "ng-template" tag instead of template.
NgIf with Else	Angular 4 uses else syntax: <div *ngIf="user.length > 0; else empty"> <h2> Users </h2> </div>
As Keyword	A new addition to the template syntax is the "as" keyword is use to simplify to the "let" syntax : <div *ngFor="let user of users | slice:0:2 as total; index as = i >        {{i+1}}/{{total.length}}; {{user.name}} </div> To subscribe only once to a pipe "|" with "async" and if a user is an observable, you can now use to write : <div *ngIf="users | async as usersModel;>        <h2> {{UserModel.name}} </h2> </div>
Pipes	Angular 4 introduced "tittlecase" pipe "|" and use to changes the first letter of each word into the uppercase <h2> {{ 'balaji t' | titlecase }} </h2>
Http	Adding search parameters to an "HTTP request" has been simplified as: http.get('${baseUrl}/api/users', {params: {sort: 'ascending'}});
Test	Overriding a template in a test has also been simplified, as : TestBed.overrideTemplate(UsersComponent, '<h2> {{Users.name}} </h2>');
Service	A new service has been introduced to easily get or update "Meta Tags" as: @Component({ selector: 'users-app', template: '<h1> Users </h1>' }) export class Users/AppComponent {     Constructor(meta: Meta) {         meta.addTag({name: 'Blogger', content: 'Balaji T'});    } }
Forms Validators	One new validator joins the existing "required", "minLength", "maxLength" and "Pattern". An email helps you validate that the input is a valid email.
Compare Select Options	A new "compareWith" directive has been added and it used to help you compare options from a select, as: <select> [compareWith]="byUId" [(ngModel)]="selectedUsers">     <option *ngFor="let user of users" [ngValue]="user:UId" >{{user.name}} </option> </select>
Router	A new interface "paramMap" and "queryParamMap" has been added and it introduced to represent the parameters of a URL const uid = this.route.snapshot.paramMap.get('UId'); this.userService.get(uid).subscribe(user => this.name = name);
CanDeativate	This "CanDeactivate" interface now has an extra parameter and it is containing the next state
118n	The internationalization is tiny improvement, as : <div [ngPlural]="value">     <ng-template ngPluralCase="0">there is nothing</ng-template>     <ng-template ngPluralCase="1">there is one</ng-template> </div>

Angular 5 over Angular 4

Performance Improvements	Use of addEventListener for the faster rendering and it is the core functionality Update to new version of build-optimizer Added some improvements on the abstract class methods and interfaces Remove decorator DSL which depends on Reflect for Improve the Performance of Apps and this is core functionality Added an option to remove blank text nodes from compiled templates Switch Angular to se Static-Injector instead of Reflective-Injector Improve the applications testing Improve the performance of hybrid applications Improvement of lazy loading
HttpClient Improvements	Improvement on Type-checking the response Improvement on Reading the full response Improvement on Error handling and fetching error details Improvement on intercepting all requests or responses Improvement on Logging Improvement on Caching Improvement on XSRF Protection
Added Features	Added Representation of Placeholders to xliff and xmb in the compiler Added an Options Arg to Abstract controls in the forms controls Added add default updateOn values for groups and arrays to form controls Added updateOn blur option to form controls dded updateOn submit option to form controls Added an Events Tracking Activation of Individual Routes Added NgTemplateOutlet API as stable in the common controls Create StaticInjector which does not depend on Reflect polyfill Added [@.disabled] attribute to disable animation children in the animations
Router Life Cycle Events	GuardsCheckStart GuardsCheckEnd ResolveStart and ResolveEnd