An Overview: Angular 2 and Type Script

Angular JS is one of the most popular JavaScript frame work which is available for developing web applications. Today, Angular 2 and TypeScript offer perfect object oriented web development to main stream in a syntax that is close to Java 8.

As per Brad Green; Google’s Engineering Director; near about 1.3 million web developers use Angular JS and among these 300 thousand have started using the latest version Angular JS 2 which will be released soon.

Here, in this blog post; we will offer detailed overview of Angular 2 JS framework:

Angular JS 2 – Overview:

In the end of 2014, Google announced that Angular 2 would be a perfect sequel of Angular JS and they also created new language known as “AtScript” which was meant for writing Angular 2 applications.

Later Microsoft decided to support the annotations to their Type Script language and hence it emerged as the development language required for developing Angular JS framework.

The recommended language for developing applications using Angular JS frame work is AtScript. Further, these applications can be developed in JavaScript as well as in Dart. Apart from this, Angular team integrated yet another Microsoft product known as RxJS library of reactive JavaScript extensions into Angular 2 framework.

This is not any MVC framework but instead this is a component based framework. In Angular 2, any application is a bunch of loosely combined components.

This screenshot is of a landing page of any sample online auction application which was initially known as the combination of NavBar, Search, Carousel, Product as well as Footer Components.

Here, there are three footer components where the automatic rendering is done by binding the template to the huge array of components that are available from the server. Each product title is a link to any connected product detail page.

Since, we can design auction as a single page Application, the entire page is not to be refreshed to showcase product details. The area occupied by carousel and products can be reused to include product details as well.

This task can be done in some of these easy steps:

• Using Angular’s router outlet directive that allows you to declare the area that is currently occupied by carousel and products. This can vary the content depending on user’s navigation.
• Carousel and Product can be included inside the home component.
• Now, create a new Product detail component.
• Configure Angular’s Router to show either the home or product detail component in the decided area.

Use of Type Script:

This is the superset of JavaScript however like Java it helps you to define new types. Declaring variables with types instead of generic var allows the use of new tooling support which seems to be a great productivity enhancer.

TypeScript serves to be a useful static code analyzer and as you enter code in your Type Script, you are guided with context sensitive help along with available methods in the object or types of function argument.

Let’s say if you use an incorrect type then IDE will highlight erroneous code. In case, your TypeScript application uses third party library written in JavaScript then you can easily install type definition file that contains type declarations for this library.

Type Declarations for most of the popular JavaScripts are easily available for free. These can be installed with Typings- a TypeScript definition Manager. Let’s say that you wish to use Jquery from your TypeScript code.

The type definition files for JQuery can contain declarations of all jQuery APIs and hence your IDE can help you with different types of use.

Conclusion:

We are sure that this blog post has succeeded in offering perfect knowledge about Angular 2. There’s much more to talk about however at present this is enough.

We will discuss more about it in upcoming blog posts. Till then, stay tuned to Softqube Technologies, well known web development company India.