In this write-up we will discuss difference between Angular 1.x vs Angular 2 with this as reader you will come to know outdating of Angular 1.x and evolution of Angular 2. There are many differences between them here are some of them, so here goes the discussion down below: -
1. Angular 2 is completely new as it is rewritten and it not an update to its predecessor Angular 1.x.
2. It has replaced its controller which earlier existed in Angular 1.x with newly introduced web standards like component in Angular 2.
3. Angular 1.x uses $scope whereas in Angular 2 or Angular 4 you will not find it instead it uses zone.js for change in code detection.
4. Angular 2 or Angular 4 focuses more on mobile support whereas in Angular 1.x it was limited to an extent.
5. Here in Angular 2 it uses TypeScript which is sugarcoated and superset of JavaScript and it fulfills all ES6 specification while in Angular 1.x there was no such concept used.
6. Angular 2 uses hierarchical dependency injection system and it implements uni-direction tree based change detection which increases performance.
7. Way of achieving Dependency Injection is via the constructors as everything is class based in Angular 2.
8. In Angular 2 local variables are defined using the hash(#) prefix.
9. Structural directive syntax are changed in Angular 2 here "ng-repeat" is used and in Angular 1.x syntax used was "*ngFor".
10. Camel case syntax are used in Angular 2 for built-in directives like "ngClass" and "ngModel" while in Angular 1 it was "ng-class" and "ng-model".
11. Only way to bootstrap angular is via the code in Angular 2 whereas in Angular 1.x there are two ways to bootstrap angular, one using "ng-app" attribute and other is via the code.
12. In Angular 1.x, "$routeProvider.when()" is used to configure routing. Where in Angular 2 we have "@RouteConfig{(...})" instead. "ng-view" available in Angular 1.x has been changed with "
<ul> <li><a [routerLink]="['Home']" href="">Home</a></li> <li><a [routerLink]="['Contact']" href="">Contact</a></li> </ul>
13.Many of the properties which were previously used Angular 1.x like "ng-href", "ng-src" and "ng-hide" is now obsolete because Angular 2 directly uses HTML DOM elements properties so now in use new properties are "href", "src", "hide" to get the same output.
14.One-way data binding directive "ng-bind" used in Angular 1.x has been replaced with [property] in Angular 2 as it is valid HTML DOM element property.
15.Two-way data binding "ng-model" used in Angular 1.x has been replaced with [(ngmodel)] in Angular 2.
16.Angular 1.x is easy to setup compared to Angular 2. Just add reference of library and then get started with Angular 1.x project. Whereas Angular 2 depends on other four important files like zone.js, system.js, shim.js, reflect-metadata and setups like node.js and TypeScript without which one cannot start Angular 2 project.
Hope that you as a reader have understood the difference between Angular 1.x and Angular 2. Also go through below video which is project based and recommended as a good startup for Angular 2: -
