Blog Category: Angular

Angular is developed by Google and is one of the widely used JavaScript frameworks which help developers to build web applications by using HTML as a template language.

Angular’s data binding and dependency injection eliminate much of the code which you could otherwise have to write manually, which may result in a tedious task. In order to deliver the latest features, Google has been updating Angular consistently to make it lightweight, fast, and easy to use.

In November 2017, Google released Angular 5.0 with a number of features and bug fixes. The core focus of this update is to simplify app development, code sharing, code compilation time, etc.

The Key Features of Angular 5 are as follows:

1. Build Optimizer

The new release of Angular 5 comes with the Build Optimizer tool which makes the framework smaller, faster, and easier to use. Build Optimizer is run by default when production builds are created with CLI (Command line interface) and decreases the size of JavaScript. Basically, Build Optimizer has 2 main roles i.e. it:-

• Marks the part of your application as ‘pure’ which removes the part of your application i.e. not needed during runtime via tree shaking
• Remove decorators from the application’s runtime code because decorators are used by the compiler and are not needed at runtime

These jobs can enhance the boot speed of your application and lessen the size of JavaScript bundles.

2. Compiler Improvements

The improvements were also made in the compiler to provide faster rebuilds for both productions builds and AOT builds. The previous version was a bit slow and a small change in a template needed full compilation. This updated version has a ‘pipeline transformer’ which has the ability of a TypeScript compiler that only compiles what is necessary with a new watch mode.

Features were added to the decorators which made it possible to create smaller bundles by removing whitespaces. The new compiler saves 95% of the build time when performing an incremental AOT build.

You can take advantage by using, ng serve –aot

3. Improved decorator support

The new feature of Angular 5 supports decorators like use-value, use factory, and data in object literals.  These decorators help to use the values that are calculated at runtime. Rather than using the name function, NULL can be used, so that it can execute the code without affecting the public API.

Before

Component({
                              provider: [{provide: ‘token’, useValue: calculated()}]
                     })
export class MyClass {}

Angular 5

Component({
                              provider: [{provide: ‘token’, useFactory: () => null}]
                      })
export class MyClass {}

 

4. HTTP Client Instead of HTTP

HTTP client came into existence in version 4.3; angular/HTTP was used for making smaller, simpler, and more powerful HTTP web requests in an angular application. Now in version 5, the angular team recommends using an HTTP client for all applications.

To update HTTP Client, replace Http Module with Http ClientModule from @angular/common/http in each of the modules, inject the HttpClient service, and eliminate any map(res => res.json()) calls, which are no longer required.

Its features include

• Typed, synchronous response body access, including support for JSON body types.
• JSON is now used as a default; it no longer explicitly parsed JSON
• Interceptors enable middleware logic to be inserted into the pipeline
• Immutable request/response objects
• Progress events for request upload and response download

5. Angular Universal Transfer API

In Angular 5, sharing code between the client-side and server-side versions of the application has become much easier. Angular Universal was introduced to provide support for the developers in order to perform server-side rendering of Angular applications.

Furthermore, two modules like ServerTransferStateModule and BrowserTransferStateModule were added which help to generate information on the platform server and then transfer information to the client side to avoid regeneration of the same information. This is useful when an application fetches data over HTTP!

By transferring state from the server, angular developers can refrain from making another HTTP request, once the application makes it to the client.

Furthermore, Domino is added to the platform-server; this means that Angular 5 supports DOM-based manipulations within server-side contexts and also supports third-party JavaScript and Component libraries.

6. Internationalization of Pipelines For Number, Date, and Currencies

The latest update of Angular 5 includes number, date, and currency pipes which enhanced standardization across browsers and eliminated the need for i18n polyfills. Apart from this, the pipe has been updated to provide extensive locale support and configurations for any locales relying on the CLDR.

If you do not want to use this new pipe, you can import the module DeprecatedI18NPipesModuleto after the CommonModule to access the previous behavior.

import { NgModule } from ‘@angular/core’;

import { CommonModule, DeprecatedI18NPipesModule } from ‘@angular/common;

7. New Router lifecycle event

Angular 5 includes lifecycle events that enable developers to track router cycles from the beginning of running guards until the completion of activation.  The new events of the router lifecycle are:-

• *ActivationStart*
• *ActivationEnd*
• *ChildActivationStart*
• *ChildActivationEnd*
• *GuardsCheckStart*
• *GuardsCheckEnd*
• *ResolveStart*
• *ResolveEnd*

Above mentioned events can be used to have more control of your application.

8. Form Validation

In Angular 5, forms can run validation and value updates using ‘on blur’ or ‘on submit’ rather than on every input event.

<input name=“lastname” ngModel [ngModelOptions]=“{updateOn: ‘blur’}”>

If you have any server-side validation or any heavy process triggered by validation or any value changes that are not run often; with this form validation in the new update, you can take control of the validation and value change timing at the control level or specify it for a complete form.

Moreover, ‘asyncValidators’ can be specified in an options object, instead of declaring it as a third parameter.

Conclusion

Angular 5 is smaller and faster and is loaded with significant features and great improvements. This update has very useful tools which will make your application faster and fully optimized. Angular update guide will help the development teams to learn more about Angular updates.

The team of Angular is very active; although they came up with Angular 5 in November 2017, major bug fixes in versions Angular 5.1 and Angular 5.2 were out soon after the release.

Well… the story doesn’t end up here… Angular 6 is about to release soon providing easier, smaller, and quicker web development services.

Looking to build your next project in Angular 5? Connect with us today!

When Angular 2.0 was released in September 2016, it signaled a remarkable move in enterprise front-end development.
Angular.js was completely revamped with Typescript which is Microsoft’s strongly typed super-set of JavaScript. With such paradigm shift, type-safe languages such as Java, C# and Scala were welcomed into the world of modern front-end development. And now Angular 4.0 has been rolled out with the features of semantic versioning.

In order to remain on the toes with the user expectation and deliver the latest features in a mobile app, it is necessary to keep updating the technology with the latest frameworks.

Angular 4 is one such framework and core focus of this update is all about reducing the size of the code generated and to keep framework aligned with the release time. They skipped out version 3 and directly shifted to version 4 in order to sync up the Angular router’s version 3.x.

The Angular 4.0 holds SEMVER i.e. Semantic Versioning which means unbelievable improvements that should be explored by mobile app developers to see if it can handle the development process uniquely.

This kind of release is classified into major, minor or patch release based on the nature of software release.  The software version will get bumped up accordingly.

A semantic version possesses following three numbers:-

• 3 – MAJOR: When they released a breaking change, they increase the first number of semantic versioning. It is increased when there is an incompatible change to the API. This is possible for Angular, if newer versions of the utilized library gets adopted to bring modifications in the API
• 2 – MINOR: When new functionality is supplemented to the existing functions and API is kept stable; there is an increase in the second number of semantic versioning.
• 1 – PATCH: When any bug is fixed without altering the API, there is decrease in the last number of semantic versioning; thus being backward incompatible.

Additionally, there is an optional – QUALIFIER specifying a version in a more accurate way.

What’s new in Angular 4.0?

• Instead of TypeScript 1.8+, Angular v4 now requires TypeScript 2.1+
• OpaqueToken, SimplyChange etc. are some of the interfaces which are either changed or removed completely
• Every latest feature in TypeScript 2.1+ are now supported by Angular 4

Typescript and the benefits of strongly typed languages

Angular 2 enabled developers to allocate types, interfaces, classes and inheritance to their front-end code. When a Static type was introduced, it ensured that any error conducted by the developers can be immediately caught by TypeScript compiler and the code written are easy to understand and simple to consume.

Features of Angular 4.0:

• Long-term support (LTS)

At NG-Conf 2017, the team of Angular announced that version 4 is the initial version of Angular which provides Long term support. This means it is benefited for those enterprises that don’t have facility to constantly upgrade Angular entities.

• Faster Rendering and Smaller Bundle Sizes with AOT Compilation

Ahead-of-Time (AOT) being one of the greatest features of Angular 4 is capable of compiling templates during build time in order to generate JavaScript code. With AOT you can:-

• Detect template errors at the build time instead of runtime, making application quick start
• As the package size is smaller, there is no need to ship Angular compiler to the user
• View Engine: This is capable of producing less code, when AOT compilation mode is used. Hence, the reduced code is generated for your components – 60% in most of the cases. More complex the template, higher the chance of savings.
• Animation Package: Angular 4.0 have pulled the animations out of @angular/core and into their own package. This means that extra code will not end up into production bundles, if you do not use animation.

• Better error messages

With Angular 2, cryptic set of error message was somewhat the source of frustration. With the introduction of Angular 4.0, error messages are much clearer and informative. All thanks to new template source maps, they point directly to the lines of code within templates.

• TypeScript 2.3

Anglular 4 uses the latest version of TypeScript than Angular 2 which enables better type checking and also enables faster compilation time.

• ParamMap Router

Until now, route parameters was available by standard JavaScript syntax (parameterObjekt[‘parameter-name’]) and was stored as a simple object structure. But, with Angular version 4, parameters are also accessible as map and can be available with the method called (parameterMap.get(‘parameter-name’)).

This is because, it has some benefit in terms of security and traditional structure seemed unsafe (type Params = {[key: string]: any}) as parameters could take any possible values. But, with this new map, parameter value is either a string or an array of strings, depending on the method used.

• Server-side Rendering with Angular Universal

Google’s server-side rendering library called Angular Universal is compatible with Angular 4. This library enables the developers to render their applications on the server side, which benefits to both users and search engines.

Additionally, most of the universal code is located at @angular/platform-server. With Angular Universal, JavaScript is no more necessary for rendering the page content at the beginners’ level, so website can be enhanced better for search engine. Angular Universal is already used in different programming languages through node-Runtime.

• *nglf, now with more else

Angular application has the most common *nglf structural directive, is now equipped with an else statement. This means no need to use two *nglf with opposite evaluations. Hence, it is easy for the developers to simplify the conditional templates.

For Instance: <div *ngIf=”userList | async as users; else loading”>

<user-profile *ngFor=”let user of users; count as count; index as i” [user]=”user”> User {{i}} of {{count}}

</user-profile>

</div>

<ng-template #loading>Loading…</ng-template>

• Pipes

Title case: Changes first letter of each word tot tile case while other remains in lower-case

<p>{{‘abc’| titlecase}},/p>

<!—will display ‘Abc’ –>

HTTP:  Search parameters to HTTP request is made easy

http.get(`${baseUrl}/api/races`,{ params: sort: ‘decending’} });

Before you had to do:

const params = new URLSeaechParams();

params. Append(‘sort’, ‘decending’);

http.get(`${baseUrl}/api/races`, { search:params});

Test:  Overriding a template in a test has also been simplified

TestBed. overrideTemplate(RaceComponent, ‘<h2>{ {race.name} }</h2>’)

Before, you had to

TestBed.overideComponent(RaceComponent, {

 set : { template: ‘<h2>{ {race.name} } <h2>’)} );

Angular core team has made great improvements in Angular 4 and this solidifies its position as ideal front-end framework for enterprise applications.

With such features introduced in Angular 4.0, it is easy for the developers to craft the scalable applications that can perform well and optimized for both server side and client side.

Are you also looking to develop your applications with Angular 4.0? TOPS InfoSolutions is one such company that delivers perfect web-app solutions for your complex business applications.