Angular 2 client-side TypeScript framework

Second Brew

Fine Tuning

Listing 6 shows the Weather class from the app/weather.ts file, which stores the measured temperature and pressure values (lines 4 and 5). Weather can be use as a data type like number or any. The constructor function (lines 6 to 10) binds the parameter handed over to it to attributes of the same name in the instance. The question mark behind (date) makes input optional; without it, line 9 generates the current timestamp.

Listing 6


01 // Weather can also be used as a data type in a type declaration
02 export class Weather {
03   date: string;
04   temp: number;
05   press: number;
06   constructor(temp: number, press: number, date?: string) {
07     this.temp = temp;
08 = press;
09 = (date)?date:(new Date()).toISOString();
10   }
11 };

Before the final practical test, the finished application needs to be converted to an Angular module. The app.module.ts file (Listing 7) takes care of this job by first importing the NgModule decorator, the directives from BrowserModule and FormsModule, and the classes from Listings 4 and 5.

Listing 7


01 // Combine the app in an Angular module
02 import { NgModule } from '@angular/core';
03 import { BrowserModule } from '@angular/platform-browser';
04 import { FormsModule } from '@angular/forms';
05 import { AppComponent } from './app.component';
06 import { StackService } from './stack.service';
08 @NgModule({
09   imports:      [ BrowserModule, FormsModule],
10   declarations: [ AppComponent ],
11   bootstrap:    [ AppComponent ],
12   providers:    [ StackService]
13 })
14 export class AppModule { }

Starting in line 8, the NgModule decorator creates a matching Angular module in line 14 from the initially empty class definition. On this occasion, the decorator module also inherits all the built-in directives at the same time.

The code in line 9 imports more directives into the app. For example, BrowserModule delivers the directives ngFor and ngIf, whereas FormsModule picks up the ngModel directive. One line below, declarations collects all user-defined directives, which include components, pipes, and so on.

Line 11 uses bootstrap to set AppComponent as the root component, which calls the app at startup. Finally, providers instantiates and distributes the services: in this case, StackService through user-defined directives. If you store the last listing automatically, the application updates directly in the browser (Figure 5).

Figure 5: An HTTP server delivers the Angular 2 application, which users can then access in a browser.


Angular 2 impresses with more flexible data bindings and focuses more than ever on components. At the same time, the new compiler accelerates the framework with the help of JiT or AoT. TypeScript converts the code from the framework and the applications to a modern state-of-the-art programming style; in contrast, the native implementation of common language resources in browsers often lags years behind. In the present, modern form, Angular 2 is likely to find many new friends; the only thing now keeping programmers from coding heaven is a comprehensive collection of UI widgets, such as that offered by Ext JS [11].

The Author

The graduate physicist Andreas Möller,, has devoted himself to the development of Internet software since 2001. His projects include database and web applications, as well as systems for single-source publishing. He currently works as a consultant and freelance writer.

Buy this article as PDF

Express-Checkout as PDF
Price $2.95
(incl. VAT)

Buy ADMIN Magazine

Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content

  • Modularize websites with Web Components
    Web Components let you define your own HTML tags to restructure monolithic web pages into smaller services and simplify maintenance and servicing.
  • The AWS CDK for software-defined deployments
    Cloudy with a chance of better provisioning tools: The new Amazon Web Services Cloud Development Kit adds a powerful new tool to the DevOps toolkit.
  • Optimization and standardization of PowerShell scripts
    When PowerShell one-liners become full-blown scripts that have an effect throughout the enterprise, IT managers need to review their software development strategies. We look at PowerShell best practices for script design, notation, error handling, and documentation.
  • Data Analysis with R and Python
    The statistical programming language R dissects its database in a masterful way, and you can embed your R in Python using the Rpy2 interface.
  • Lua for Apache

    Lua is a small, lean, and fast scripting language – ideal for working with web servers. Version 2.4 of the Apache web server is the first to offer a matching module that has a few quirks – and pitfalls, if you dig more deeply.

comments powered by Disqus