Differences Among Angular 1x, 2x And 4x

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 1x	Angular 2x
1Uses many tags like ng-href, ng-src, ng-show and ng-hide	All these directives are no longer required
2.Can use languages like Es5, ES6 and Dart	Can use languages like ES5,
3. Controllers and scopes are used	Controllers 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 filters	In Angular 2 they are called pipes. The syntax remains same.
6.Was not built with mobile support	Mobile 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 binding	ng-bind is replaced with [property]
9. ng-model is used for two way data binding	ng-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 arguments	DI 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 used	Structural directives like #ngfor, *ngif are used

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

Angular 2x	Angular 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 big	Production bundle size reduced will be reduced by 60%.
4. Animation is part of @angular/core	Animation is now part of its own package
5. Earlier versions of TypeScript is used	Is 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’}});