Top Features of Google Angular 4 You Should Know

The latest update to the Angular framework was released on the 23rd of March 2017 and makes it slicker, faster and much more convenient for web developers working on small applications. According to Google Developer Advocate for Angular, Stephen Fluin, there have been changes under the hood to replicate what an AOT (ahead of time) generated code should look like. The consequential changes are meant to minimize the size of codes for component, and in some cases, trim them by ‘more than half’.

Google Metrics suggests that the codes being generated by Angular JS were 10 times the length of the original template. With Angular 4.0.0 in place, it has been cut short to 3 times of the original. The production bundles have thus been reduced by several hundred in kilobytes. The version 4.0.0 uses Microsoft Typescript 2.1 and the newer version further attaches type checking and a faster speed for NGC, the traditional compiler for templates.

So, what are the top features of Google Angular 4 you should know?

  1. If…Else Template Conditions

The Angular Version 2.x used to offer an *nglf template that was being used to make decisions based on expressions like:

<p *nglf=”isAuth”>You are logged in as auth.username</p>

The problem was what if the user wasn’t logged in or has been waiting for the user login request to be completed before coming up with a message? Angular 4.0.0 handles such cases with the ‘else’ syntax.

Syntax:

<element *nglf=”[condition expression]; else [lse template]”>

</element/>

A realistic example:

export class AppComponent implements OnInit{

  auth: Observable<{}>;

  ngOnInit() {

    this.shown = true;

    this.auth = Observable

      .of({username: ‘chris’, password: ‘me@chris.me’})

      .delay(new Date(Date.now() + 4000));

  }

}

If you are simulating an HTTP async request that has been returning user payloads on success, the simulation will just take 4 seconds. Consequently, the else syntax helps display a loading message while the 4 seconds period is gaining ground.

<ng-template #fetching>

  <p>Fetching…</p>

</ng-template>

<p *ngIf=”auth | async; else fetching; let user”>

  {{user.username }}

</p>

  1. Animation Movie

With version 4.0.0, the animations are derived from @angular/core and are included in the package. Consequently, if you aren’t using animations, these extra lines of codes will not get redundantly placed in the final production bundle. Developers now will be able to find the documentation and also take the advantage of the ‘auto completion’ feature. Further, the syntax for template binding will now allow the developers to use if/else style syntax while uploading local variables alongside observables.

If you would like to import animation bundles, it should be done from @angular/animations:

import {Component, OnInit} from ‘@angular/core’;

import {

  animate,

  state,

  style,

  transition,

  trigger } from ‘@angular/animations’

 This certainly has been one of the best improvements and a top feature of Google Angular 4.

  1. Typescript’s StrictNullChecks

Previously, ‘undefined’ and ‘null’ were the first-class citizens of JavaScript. Developers weren’t able to define variables to tell the typescript that the values can be ‘undefined’ or ‘null’. With Angular 4.0.0 you are now explicitly allowed to have any of those:

let x = String | null

let y = Number | undefined

let z = Array<String> | null | undefined

In the above example,

  • ‘x’ can be assigned both a null or string value
  • ‘y’ can be assigned either an undefined or a number
  • ‘z’ can be assigned both string and array types, hence it can be both undefined or null

A mobile app development company can do great stuffs using this!

  1. Angular Universal

A server side rendering has been a crucial tool by any mobile app development company to split the HTML content into virtual DOM such that the browser will be able to render them appropriately when requested. It consequently allows for the web robots and spiders to dig into the content and website whenever necessary. However, this was not the case with all those single page apps of the past. They used virtual DOM concepts that abstracted rendering. Angular 4.0.0 comes up with a solution that is called the Angular Universal. While the same used to maintain outside the Angular module, version 4.0.0 and on, it becomes a core part of the module. Now, all it takes is this:

import { platformServer, renderModuleFactory } from ‘@angular/platform-server’

  1. FESM

The Flattened ECMAScript Module or FESM is one of the most important and one of the top features of Google Angular 4. While mobile app development companies will barely notice it, Angular 4.0.0 will now ship FESM format. This is aimed at reducing the size of code bundles while speeding up the build, loading and transpilation in browsers. The FESM will have a great impact on the performance of Angular scripts hereon. Initial tests already suggest a faster running NG server!

Many have wondered why Angular 2.x jumped to v.4.0.0 and skipped 3.0. Google provides a good reason for the same. The version numbers for all Angular JS components needed to be unified and we have already had the Angular Router being upgraded to v3. The right choice was consequently a version 4.0.0, as a way of unification. We however have the CLI command tool being released as v1.0.0. This is supposed to help project planning, test execution and abstraction of build.

Today, Angular JS is ranked as the second most popular framework after Node.js. We already have several upcoming releases slated for October (v 5.0.0) and another, a year from now (v6.00).

However, there are a few things that a mobile app development company must watch out for:

  • An upgrade to Angular 4.0.0 will automatically put some of the dependant modules out of sync. A mobile app development company will have to separately update these as well.
  • The plugins and code editors that rely on Angular template syntax will notify error syntax when you use ‘else’. However, the code still will work and we hope that the plugin managers will soon take care of the message.

Angular 4.0.0 is definitely a shinier version. Mobile app development companies can also help by filling other issues they come across in the community to set up the usage for all. If you want to know about other bug fixes and features, head on to the Angular changelog.

 

We will be happy to hear your thoughts

      Leave a reply