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>
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
V Keerti Kotaru
|