Every now and then a man’s mind is stretched by a new idea or sensation, and never shrinks back to its former dimensions – Oliver Wendell Holmes Sr.
Similar is the story, which gets unfolded when we talk about the Angular 1.x Vs Angular 2. Yesterday it was Angular 1, today 2 and you never know what’s around the corner? – Angular 3, 4 – List will keep on growing.
First Question which comes in the mind, when we hear of “Angular 2” is that “Is it the upgrade of Angular 1.x”- My suggestion will be- Let’s keep both the entities separate as there exists whole chunk of differences in: performance, architecture, syntax and semantics.
Why even need Angular 1?
An innovative drive from an IT giant Google to enhance data binding experience the both ways and thus making data to move inside the single-page application without the specific need of any listener code. Angular 1.X was built on the Java script open-source framework built on client side technology to enhance the functionality of HTML, CSS and JavaScript.
Angular 1.x made it possible to cleanly manage the code via MVC [Model-View- Controllers] and thus you just need to segregate the code into their designated section hence ensuring the loose coupling so that the changes can be easily tracked and will constrain itself within the class.
It took the onus of DOM manipulation on it- all you need to take care of is Data. So, in case you are manipulating a list, or updating the state of a button- just no need to redraw the list- sit back and changes on the model will be reflected on the view.
Unit testing is one nightmare for developers, so why not to rely on the Angular, in which developers apply test driven development approach with taking almost no help from the compiler. Eventually, the code would have to be tested so it is always better to test as you code and merge it with the already done piece, this flexibility comes handy with Angular 1.x. Dependency injection makes the thing look surprisingly simpler.
Angular 1.x, whose first version came live in 2009 was created using Mobile support in mind. The language with its nature of gelling well with HTML, CSS and JavaScript is potent to make hybrid application and mobile web-apps.
Now with all these goodies in one package i.e. Angular JS 1.x, what compelled Google to come up with something, which is a completely new and re-written framework. Why not to augment the initial version and why take such a giant leap to re-create everything? Is it well planned and justified? Let’s explore more in the subsequent sections!
What is Angular 2?
A completely new typescript framework built around the concept of components keeping the web component standards in mind. By providing more choice for languages, it is paving the way for a better and spacious development practice.
Now the question is what makes Angular 2 way ahead of its younger Brother? Let’s fathom deep into what makes Angular 2 better than its younger sibling.
More Languages Supported
You can use any of the languages from ES5, ES6, Typescript or Dart to write Angular 2 code. Angular 1.x has ES5, ES6, and Dart. Using of TypeScript is a great step as TypeScript is an awesome way to write JavaScript.
Typescript is an extension of ECMA Script, in fact it is a super script of JavaScript.
Typescript = ES6 + Types + Annotations
“Mobile first World”- At least Angular 2 thinks of it
Use a single code base for the both web and mobile app- Just need to club it with Native script, which is again an open source Java script framework. Hybrid applications can always be made using Angular 2 with Ionic 2, which was built on the top of Cordova. So, Angular 2 gives you a sharp edge by giving you the flexibility to use the same web standard code base to develop excellent modern day mobile apps, which was missing in the angular 1.x.
Scope is descoped
Angular 2 has left behind the usage of “Scope”, which was one of the core concept of Angular 1.x. Angular 2 will be using zone.js to detect the changes. Angular2 has greater performance (at least 5x, and even more in some corner cases) due to the reimagined update loop (aka Change Detection).
Bye-bye Controllers, Welcome “Components”!
So, how it is handled in the Angular 2? – Answer is: Controllers are somewhat replaced by components. @<class name> annotation classifies the components and adds the meta data to the class.
Farewell to “ng-app”
Angular 1.x has two ways to bootstrap angular: Either by using ‘ng-app’ or managing it through the code.
Angular 2 has scrapped of the former. Now it is just manageable via the code.
Change is for Good [ Syntactical]
There have been syntactical changes as this is completely re-written though carrying the good things forward from the Angular JS 1.x.
There has been change the way the variables are declared in the two platforms: Scope has been removed from the Angular 2 and now the local variables are defined using hash (#) prefix.
Example: <div *ngFor=”# customer in customers” >
In Angular 2, Structural directives syntax is changed. ng-repeat is replaced with *ngFor.
Angular 2 uses camelCase syntax for built-in directives. For example, ng-class is now ngClass and ng-model is now ngModel.
Syntax of Dependency injection is changed as well. There are a lot more changes, which could be summed up well by writing separate contents on.
Direct use of valid HTML DOM element properties and events
Due to this, many of the available built-in directives in Angular 1.x are now no longer required. Like, ng-href, ng-src, ng-show and ng-hide. Angular 2 uses href, src and hiddenproperties to get the same output. And same goes with event based directives like ng-click and ng-blur.
Enhanced Two-way Data Binding : Try it yourself
In Angular 1.x, ng-model is used for two-way data binding, but with Angular 2 it is replaced with [(ngModel)].
Angular 1.x, two-way data binding,
<input ng-model=”technology.name”></input>
In Angular 2,
<input [(ngModel)] =”technology.name”></input>
Enhanced Router drives a better performer in Angular 2
Angular 2 is almost 5 times faster than its sibling as it implements an advanced router technique. Advanced routing technique with a full-proof unidirectional tree based change detection.
The Angular 2 Router will only load components when it absolutely needs them and it makes its performance to be counted upon. JSON based Route config is more easy to edit.
There has been changes in the router syntax’s as well, for which a separate blog is needed and is in making.
Nothing is Absolute!!
Angular 2.0 is for sure superior than its predecessor but there are still windows of betterment open to be done with this. Who knows if future holds subsequent versions of Angular 2.0? Some drawbacks of the current framework are: being not as SEO- friendly as the contemporary frameworks are. There are also some drawbacks associated when it comes to displaying enormous amount of data. No backward compatibility of Angular 2 with Angular 1.x is another buzz, which is used for excuse of not adapting to the change but again that is going to be a very subjective on the matter.
As they say it: Change is the result of all true learning. Learning is the outcome of all the positive innovations and Innovation does not happen overnight.
Best of brains [Of course Google has that] have drilled down and came up with something new yet carrying forward goodies from the earlier one. So, even though you want to upgrade or not, the truth is that future lies with change and adaptability. Choice is all yours.
Keep Smiling. Start learning something new. Cheers!
