Chapter 7. Explaining Pipes and Communicating with RESTful Services

In the last chapter, we covered some very powerful features of the framework. However, we can go even deeper into the functionality of Angular's forms module and router. In the next sections, we'll explain how we can:

• Develop model-driven forms.

• Define parameterized routes.

• Define child routes.

• Use the HTTP module for communication with RESTful APIs.

• Transform data with custom pipes.

We will explore all these concepts in the process of extending the functionality of the "Coders repository" application. At the beginning of the preceding chapter, we mentioned that we will allow the import of developers from GitHub. However, before we implement this feature, let's extend the functionality of the form.

Developing model-driven forms in Angular

These will be the last steps for finishing the "Coders repository". You can build on top of the code available at ch6/ts/step-1/ (or ch6/ts/step-2, depending on your previous work), in order to extend the application's functionality with the new concepts we will cover. The complete example is located at ch7/ts/multi-page-model-driven.

This is the result that we will achieve by the end of this section:

Figure 1

In the preceding screenshot, there are two forms:

• A form that contains the following controls for importing existing users from GitHub:

  • The input for the GitHub handle.

  • A checkbox that points out whether we want to import the developer from GitHub or enter it manually.

• A form for entering new users manually.

The second form looks exactly the way we left it in the last chapter. However, this time, its definition looks a little bit different:

<form class="form col-md-4" [formGroup]="addDevForm" [hidden]="submitted">
  <!-- TODO -->...

Exploring the HTTP module of Angular

Now, after we have developed both forms – for importing existing and adding new developers, it is time to implement the logic behind them in the controller of the component.

For this purpose, we will need to communicate with the GitHub API. Although we can do this directly from the component's controller, by approaching the problem this way, we would couple the component with the RESTful API of GitHub. In order to enforce better separation of concerns, we can extract the logic for communication with GitHub into a separate service called GitHubGateway. Open the file called github_gateway.ts, and enter the following content:

import {Injectable} from '@angular/core'; 
import {Http} from '@angular/http'; 
 
@Injectable() 
export class GitHubGateway { 
  constructor(private http: Http) {}
 
  getUser(username: string) { 
    return this.http 
      .get(`https://api.github.com/users/${username}`); 
  } 
...

Defining parameterized views

As the next step, let's dedicate a special page for each developer. On it, we'll be able to take a detailed look at their profile. Once the user clicks on the name of any of the developers on the home page of the application, they should be redirected to a page with a detailed profile of the selected developer. The end result will look as follows:

Figure 2

In order to do this, we will need to pass an identifier of the developer to the component that shows the developer's detailed profile. Open app.ts, and add the following import:

import {DeveloperDetails} from './developer_details'; 

We haven't developed the DeveloperDetails component yet, so, if you run the application, you will get an error. We will define the component in the next paragraph, but before this, let's alter the routes' definition of the app.ts:

const routingModule = RouterModule.forRoot([
  ...
  {
    component: DeveloperDetails,
    path: 'dev-details/:id',
    children...

Defining nested routes

Now, let's jump to the DeveloperDetails definition. In your working directory, create a file called developer_details.ts and enter the following content:

import {Component} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Developer} from './developer';
import {DeveloperCollection} from './developer_collection';
import {DeveloperBasicInfo} from './developer_basic_info';
import {DeveloperAdvancedInfo} from './developer_advanced_info';

import 'rxjs/add/operator/take';

@Component({
  selector: 'dev-details',
  template: `...`,
})
export class DeveloperDetails {
  public dev: Developer;

  constructor(private route: ActivatedRoute,
    private developers: DeveloperCollection) {}

  ngOnInit() {
    this.route.params.take(1)
     .subscribe((params: any) => {
       this.dev = this.developers.getUserById(parseInt(params['id']));&...

Transforming data with pipes

It is time to take a look at the last building block that Angular provides for the development of applications that we haven't covered in detail yet-the pipes.

Just like the filters in AngularJS, pipes are intended to encapsulate all the data transformation logic. Let's take a look at the template of the home page of the application we have just developed:

... 
<td [ngSwitch]="dev.popular"> 
  <span *ngSwitchCase="true">Yes</span> 
  <span *ngSwitchCase="false">Not yet</span> 
</td> 
... 

In the preceding snippet, depending on the value of the popular property, we show different data using the NgSwitch and NgSwitchCase directives. Although this works, it is redundant.

Developing stateless pipes

Let's develop a pipe that transforms the value of the popular property and uses it in place of NgSwitch and NgSwitchCase. The pipe will accept three arguments: a value that should be transformed, a string that...

Summary

In this chapter, we took a deep dive into the Angular's forms module, by developing a model-driven (reactive) form and combining it with the HTTP module. We took a look at some advanced features of the new component-based router and saw how we can use and develop custom stateful and stateless pipes.

The next chapter will be dedicated to how we can make our Angular applications SEO-friendly by taking advantage of the server-side rendering that the module Universal provides. Another thing that we'll take a look at is angular-cli and other tools that make our experience as developers better. Finally, we'll explain what Ahead-of-Time compilation is in the context of Angular, and why we should take advantage of it in our applications.