The History of Angular: Evolution or Revolution?
Angular is a framework that brings the MVW (Model View Whatever) design pattern into building mobile and desktop web applications.
It has been seven years since Google released the first version of Angular in 2010. That’s a lot of time in the computer world; after all, the very first iPad came out that same year. Let’s see whether the major versions of Angular released since then have brought evolutionary or revolutionary changes.
Version 1: AngularJS and the Rise of Single Page Applications
When Google released AngularJS version 1, most web applications were still page based. With AngularJS, people could develop single page applications modeled after Gmail and Google Docs, allowing web applications to perform like desktop applications.
This version of the framework was (and is) called AngularJS. Later versions dropped “JS” from the name as it wasn’t limited to JavaScript. It’s worth noting that AngularJS (major version 1) is still maintained; its website is https://www.angularjs.org, while later versions are at https://angular.io.
Version 2: Six years to make a revolution
Version 2 of the Angular framework wasn’t released until September 2016 and was actually a complete rewrite. Here are the main differences between versions 1 and 2:
1. Version 2 supports TypeScript, which is a statically typed superset of JavaScript.
2. It is component-based. Controllers and scopes are gone for good, replaced by components and directives. Think of components as directives with template and style.
3. Data bindings are now defined using the following syntax: [(twoWayDataBindingModel)], [oneWayDataBindingFromDataSourceToViewTarget] and (oneWayDataBindingFromViewTargetToDataSource).
4. Angular 2 directly uses valid HTML DOM element properties and events, so many of version 1’s built-in directives are no longer required, including ng-href, ng-src, ng-show and ng-hide. Angular 2 uses href, src and hidden properties to get the same output. And the same goes for event based directives, so
ng-click="doSomething() attribute becomes (click)="doSomething().
5. The ng-app attribute has been removed. The only way to bootstrap the application is by using the bootstrap function. It requires the starting component, which is also the parent component of the application.
6. To simplify the usage of dependency injection, it introduces the @Injectable annotation for services.
7. There are some syntax changes: local variables are defined using hash (#) prefix, structural directive ng-repeat is replaced with *ngFor, it uses camelCase syntax for built-in directives. For example, ng-class is now ngClass and ng-model is now ngModel.
8. Because of the introduction of components, the syntax for routing has also been changed.
9. It comes with Angular CLI to speed up the process of creating a new application.
10. Last but not least, benchmarks proved that this version is about 5 times faster than its predecessor.
Where is version 3?
You might ask yourself why there is no version 3 of Angular available. It’s because the @angular/router package was misaligned at version 3, while all other packages had version 2. So the Angular team decide to bounce all the packages to version 4 at once to prevent confusion.
What does version 4 bring?
Unlike the previous major version, this one (released in March 2017) is backwards compatible with version 2, which means that pretty much all code written in Angular 2 is also valid in Angular 4. Here are the key changes:
1. The *ngIf directive has been extended with a corresponding else directive for easier conditional DOM manipulations. For example:<div> content here if valid... </div>
<ng-template #elseBlock>other content here if invalid...</ng-template>
2. Built-in validation for email input fields instead of error-prone regex.
3. The animations package has been pulled out of @angular/core and put into its own package. This means that if you don’t use animations, this extra code will not end up in your production bundles.
4. The team has updated Angular to version 2.1 of TypeScript.
5. It’s faster and generates less code compared to version 2.
Long-awaited version 5
Version 5 has been released in November 2017, two months later than originally scheduled. It brings a lot of useful features, including:
1. Support for building progressive web apps that can be cached in browser.
2. Build optimizer makes the application smaller by eliminating unnecessary code.
3. Material Design components are now compatible with server-side rendering.
Changelogs
The complete list of features and bugfixes of each Angular version starting from version 2 can be found in the changelog at: https://github.com/angular/angular/blob/master/CHANGELOG.md.
The changelog for AngularJS (currently version 1.6.7) is at: https://github.com/angular/angular.js/blob/master/CHANGELOG.md.
Future releases
According to the Angular team, it is planned that two new major versions will be released each year. This means that we can expect new features and improvements on a regular basis. Let’s keep our fingers crossed that the new versions are available according to the schedule.
Summary
Angular is a framework with growing popularity and great prospects for the future. Each version has brought something new, some of them being a revolution, some just an evolution, but we can definitely look forward to the next releases.
Originally published at blog.montrosesoftware.com on November 30, 2017.
