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.

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     this.press = press;
09     this.date = (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.

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';
07
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.

Conclusions

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].