AngularJS 1.x vs Angular 2

As we all know that Angular 2 is not an extended version of Angular 1, It’s completely rewritten.

Hence I have tried to summarize the differences here:

AngularJS 1.x	Angular 2
Written in JavaScript	Written in Typescript
Built without mobile support in mind but that doesn’t mean mobile application cannot be build using Angular 1.	Built with mobile-oriented approach first.
Angular 1 uses a “Controller” based approach.	In Angular 2 “Controllers” are replaced with “Components” based approach.
Angular 1 uses “$scope” concept	“$scope” has been removed from this version and above.
Uses “ng-repeat”	“ng-repeat” changed as “*ngFor” i.e. structural syntax change
Angular 1 provides only has ES5, ES6, and Dart languages support	Angular 2 code can be written in any of the language from ES5, ES6, Typescript or Dart.
Angular 1 is easy to set up, we only need to include the library reference.	Angular 2 requires “Angular CLI” to create angular 2 applications.
AngularJS 1.x versions are suffixed with “JS”	As Angular 2 is complete rewrite hence angular 2 is called as just angular and follows a semantic version approach for versioning such as Angular 2/4/5.
Local variables are defined using “let”	Local variables are defined using “#”
No uses of camelCase syntax, ex: ng-class, ng-model	Uses camelCasing ex: ngClass, ngModel
In AngularJs 1 HTML DOM element properties and events can be accessed by “ng-href, ng-src, ng-hide and ng-click” For ex : <button ng-click="toDo()">	Angular 2 directly uses the valid HTML DOM element properties and events such as “href, src, hidden, and click” etc For ex : <button (click)="toDo()">
For one way data binding “ng-bind” Ex: <input ng-bind="inputText.name"></input>	One way data binding is achieved via wrapping the properties with square brackets. Ex: <div style.color]="color">text me</div>
For two way data binding ng-model is used	For two way data binding [(ngModel)] is used
In AngularJS 1.x, we can define a service via 5 different ways. Factory Service Provider Constant Values	In Angular 2, a class is the only way to define a service.
To bind an image/property or an event with AngularJS, you have to remember the right ng directive.	Angular focuses on “( )” for event binding and “[ ]” for property binding.
AngularJS uses $routeprovider.when() to configure routing	Angular uses @RouteConfig{(…)}.
In Angular 1 there was no guarantee that a parent node would always be checked before a child node. This made it difficult for the change detection mechanism to traverse all the nodes without falling in a circular loop.	In Angular, changes are guaranteed to propagate unidirectionally. The change detector will traverse each node only once, always starting from the root. That means that a parent component is always checked before its children components.
Angular 1.x has 2 ways to bootstrap angular. One using ng-app attribute and other via code. <script>    angular.element(document).ready(function() {       angular.bootstrap(document, ['myApp']);    }); </script>	In Angular 2, The only way to bootstrap angular is via code. import { bootstrap } from 'angular2/platform/browser'; import { ProductComponent } from './product.component'; bootstrap(ProductComponent);
AngularJS 1.X will continue to reside at angularjs.org	Angular 2.0 will be hosted at angular.io.
	Ways of Dependency Injection syntax is changed, as everything is class in Angular, so DI is achieved via constructor.
Not SEO friendly	SEO friendly
	Angular 2 has little backward compatibility, i.e. Application written in Angular 4 can also work with Angular 2
	Angular 2 has child routing feature i.e. the whole application can be divided into mini-applications and each mini-application having its own routing feature.

I hope this will help. J