Differences Between Angular 1.x & Angular v2

Angular 1.x uses JavaScript while Angular v2+ adopts TypeScript. v2 introduces a component-based architecture, improved performance, and better dependency injection. Understanding these differences aids in choosing the right version for your project's needs.

Routing and Lifecycle Management

1. Angular 2 is not an upgrade of Angular 1 but it is completely rewritten.
2. Angular 2 uses TypeScript which is a superset of JavaScript (It doesn’t mean only TypeScript but dart also).
3. Angular 1.x was not built with mobile support in mind, where Angular 2 is mobile-oriented.
4. Angular 1's core concept was $scope but you will not find $scope in Angular 2.0 and above.
5. Angular 1.x Controllers are gone in Angular v2. We can say that Controllers are replaced with “Components” in Angular 2.
6. In Angular 2, Structural directives syntax is changed. ng-repeat is replaced with *ngFor.
7. In Angular 2, local variables are defined using hash(#) prefix.
8. Two-way data binding: ng-model has been replaced with [(ngModel)]
9. Angular 2 uses Hierarchical Dependency Injection system which is the major performance booster of it.
10. Angular 2 implements unidirectional-tree based change detection which, again, increases the performance.
11. If you compare the file size, Angular 2 is 20 kb less than Angular 1 which helps in decreasing the load time for apps.
12. Angular 2 provides more choice for languages. You can use any of the languages from ES5, ES6, TypeScript or Dart to write Angular 2 code while Angular 1.x had ES5, ES6, and Dart only. Addition of TypeScript is a great step as TypeScript is an awesome way to write JavaScript.
13. To filter output in our templates in Angular 1.x, we used the pipe character (|) and one or more filters. Now, in Angular 2, they are called pipes. The syntax remains same.
14. Angular 2 uses camelCase syntax for built-in directives. For example, ng-class is now ngClass and ng-model is now ngModel.
15. One of the biggest advantages of Angular is Dependency Injection. In Angular 2, DI is there but now there is a different way to inject dependencies. As everything is a class in Angular, so DI is achieved via a constructor.
16. In Angular 1.x, we can define a service via 5 different ways.
    • Factory
    • Service
    • Provider
    • Constant
    • Values
17. And, in Angular 2, class is the only way to define a service.