Introduction

  • As many of us are aware that Angular is gaining popularity day by day, I want to let you know the major differences between Angular1x, 2x and 4x.
  • Basically, AngularJS is for developers who don't know much about programing yet want to develop the web apps.

Major differences between Angular 1x and Angular 2x are as follow -

Angular 1xAngular 2x
1Uses many tags like ng-href, ng-src, ng-show and ng-hideAll these directives are no longer required
2.Can use languages like Es5, ES6 and DartCan use languages like ES5,
3. Controllers and scopes are usedControllers are replaced with Components
4. Has 2 ways to bootstrap angular via code and ng-app.The only way to bootstrap angular is via code.
(The bootstrap function is used and it takes starting component which is also parent component of your angular application.)
5. To filter output in templates, we use the pipe character (|) and one or more filtersIn Angular 2 they are called pipes. The syntax remains same.
6.Was not built with mobile supportMobile oriented
7. Event binding is done as <button ng-click="doSomething()">Event binding is done as <button (click)="doSomething()">
8. ng-bind is used for one way data bindingng-bind is replaced with [property]
9. ng-model is used for two way data bindingng-model is replaced with [(ngModel)]
10. we can define a service via 5 different ways.
  • Factory
  • Service
  • Provider
  • Constant
  • Values
class is the only way to define a service
11 Dependency Injection is achieved using controller function argumentsDI is achieved using Constructor
12. $routeProvider.when() is used to configuring routing. @RouteConfig{(...}) is used to configuring routing.
13. Structural directives like ng-repeat, ng-if are usedStructural directives like #ngfor, *ngif are used

Major differences between Angular 2x and Angular 4x are as follow -
Angular 2xAngular 4x
1.Simple *ngIf is usedsyntax: <div *ngIf="Condition">*ngIf can be used in if/else stylesyntax: <div *ngIf="condition | Success statement; else failure statement">
2.Simple *ngFor is usedsyntax: <div *ngFor="let value of values">*ngFor is used with keyword “as”, to store the variable of template which will be used in elementsyntax: <div *ngFor="let value of values; variable1 as variable; variable2 as variable"
3. Production bundle size is bigProduction bundle size reduced will be reduced by 60%.
4. Animation is part of @angular/coreAnimation is now part of its own package
5. Earlier versions of TypeScript is usedIs compatible with TypeScript 2.1 and 2.2
6. Adding search parameters is bit complexsyntax:let values: URLSearchParams = new URLSearchParams();values.set('var1', val1);http.get(`BASEURL`, {search : values})Adding search parameters is simplifiedsyntax: http.get(`BASE_URL`, {params:{type:’value’}});