Sunday, May 14, 2017

Angular v4 (or) call it just "Angular"

This blog is a high level gist of Angular 4 features. For detailed explanation refer to my article in DNC magazine. Article is titled "Angular 4 application development with Bootstrap 4 and TypeScript". Follow this link to download the magazine for free.


In December 2016, in an NG-BE (Angular Belgium) keynote, Igor Minar talked about Angular’s release schedule and upcoming features. In the process, he announced plan for a major release in March 2016 - “Angular 4”. Angular team decided to skip a major version number 3.

Why not Angular 3? - MonoRepo: Angular 2 has been a single repository, with individual packages downloadable through npm with @angular/package-name convention. For example @angular/core, @angular/http, @angular/router so on. Considering this approach, it’s important to have consistent version numbers among various packages. Angular router has already been on version 4. Hence, Angular team skipped a major version 3. It will help avoid confusion with certain parts of the framework on version 4 and the others on version 3.

If there were any apprehensions about Angular 4, could be due to baggage of scale of transition between Angular 1.x and 2.x. Considering Angular was moving from MV* (Model View Whatever) pattern to components focused approach, the framework features were very different and caused many applications to rewrite major parts of their code base.


However, between v2.x and v4 it is a very different story. It is a progressive enhancement. Majority of changes are non-breaking. 

Angular 4 is out on 23rd March ’17. Consider the following enhancements,
  • The release has considerable improvements in bundle size. Some have reported up to 60% reduction in Angular bundles’ file size.
  • The ngc, AOT compiler for Angular and TypeScript is much faster.
  • Angular 4 is compatible with TypeScript’s newer versions 2.1 and 2.2. TypeScript release helps with better type checking and enhanced IDE features for Visual Studio Code. The changes helped the IDE detect missing imports, removing unused declarations, unintentionally missing “this” operator etc.

Get Started with an Angular 4 project using Angular CLI

The latest version of Angular CLI (v1.0) is already scaffolding with Angular 4. If you are using an older version, upgrade Angular CLI. A new project created using Angular CLI references Angular 4. Refer to figure 1. 

To upgrade Angular CLI, run following commands,

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest

To create a new project with Angular CLI run the following command
ng new my-project-name

Figure 1 Version details for various libraries with ng -v command

What are the new features in Angular 4?

Note: Refer to this link for code samples.  These samples were built for article in DNC magazine. You may refer to the detailed article in the magazine

Template changes to ng-template

If you are upgrading from Angular 2.x to Angular 4, all template elements have to change to ng-template. Following code will result in a warning.
  <template [ngIf]="isVisible"> Conditional statement </template>

Template parse warnings: The <template> element is deprecated. Use <ng-template> instead

Refactor it to
<ng-template [ngIf]="isVisible"> Conditional statement </ng-template>

Angular *ngIf/then/else

With Angular 2 we could use *ngIf directive to conditionally show a section of the template. With Angular 4, support for else has been added. Consider the following template code
<div *ngIf="isTrue; else whenFalseTmpl">
      <span>I show-up when isTrue is true.</span>
</div>

<ng-template #tmplWhenFalse > I show-up when isTrue is false </ng-template>

When isTrue value is true, instead of showing the span inline, we could offload to another template.
<button class="btn btn-primary" (click)="toggle()"> Toggle </button>
<div *ngIf="isTrue; then tmplWhenTrue else tmplWhenFalse"></div>
<ng-template #tmplWhenTrue >I show-up when isTrue is true. </ng-template>
<ng-template #tmplWhenFalse > I show-up when isTrue is false </ng-template>

Working with Observables and *ngIf/else

While rendering an observable on a template, we can show loading message or a spinner gif with the *ngIf directive. Specify else template to show while async observable is not ready with data. The directive also supports creating a local variable. Notice a local variable dino (let dino) to refer the async object. Consider following code.
<!—show else template “working” while loading observable with data. Notice async filter for dino observable -->

  <div *ngIf="dino | async; else working; let dino">
    <div class="card col-8">
      <div class="col-4">
              <img class="card-img-top" src="assets/images/{{dino.name}}.png" [alt]="dino.name">
      </div>
      <div class="card-block">
        <h4 class="card-title">{{dino.name}}</h4>
<!--removing dinosaur card details for readable snippet. Refer to code sample for complete code. -->
    </div>
    <!-- card end -->
  </div>
  <ng-template #working>
    <div>Loading...</div>
  </ng-template>

In the sample, to mimic delayed loading, the component calls next() on an observable subject after four seconds. Refer to following code snippet,
    this.dino = new Subject<any>();
    // to mimic delayed loading the component calls next on observable subject after four seconds. 
    setTimeout( () =>
     this.dino.next(dataset.dinosaurs[Math.round((Math.random() * 5))])
    , 4000);

Angular Animations

In Angular 2.x, animations were part of @angular/core. It was part of the bundle even if application doesn’t use animations. With Angular 4, animations related artifacts have been moved out of @angular/core. It helps reduce production bundle size. To use animations import BrowserAnimationsModule from @angular/platform-browser/animations. Reference the module in imports array of @NgModule

Angular future release schedule

Refer to the major release schedule below. The details are quoted from this link. Please keep a tab on the page for any changes to the schedule.

Tentative Schedule after March 2017

Date
Stable Release
Compatibility*
September/October 2017
5.0.0
^4.0.0
March 2018
6.0.0
^5.0.0
September/October 2018
7.0.0
^6.0.0
Release schedule taken from AngularJS blog https://github.com/angular/angular/blob/master/docs/RELEASE_SCHEDULE.md

Conclusion

Angular went through good amount of transition from Angular 1.x, MV* model to the framework we know today. The purpose of the transition is to effectively support new features in JavaScript. When used with TypeScript, it is that much more powerful with support for types, integration with IDE like Visual Studio Code and many other features.

In the process, Angular 2 upgrade included many breaking changes. However, upgrading to future versions of Angular are expected to be smooth with minimal or no breaking changes. Framework will continue to evolve to support more features and make developers job easy. It is a good thing. Obviously we do not want a stagnated framework.

References and useful links

Refer to this link for code samples used for the article in the DNC Magazine.
DotNet curry website - http://www.dotnetcurry.com/
For more about Angular CLI NPM repo with documentation, follow the link https://www.npmjs.com/package/angular-cli
Following the link for Angular 4 release notes - http://angularjs.blogspot.in/2017/03/angular-400-now-available.html