Chapter 6. Working with the Angular Router and Forms

By now, we're already familiar with the core of the framework. We know how to define components and directives in order to develop the view of our applications. We also know how to encapsulate business-related logic into services and wire everything together with the DI mechanism of Angular.

In this chapter, we'll explain a few more concepts that will help us build real-life Angular applications. They are as follows:

  • The component-based router of the framework.
  • Using Angular's forms module.
  • Developing custom form validators.
  • Developing template-driven forms.

Let's begin!

Developing the "Coders repository" application

Throughout the process of explaining the listed concepts, we'll develop a sample application that contains a repository of developers. Before we start coding, let's discuss the structure of the application.

The "Coders repository" will allow its users to add developers, either by filling a form with details about them, or by providing the GitHub handle for the developer and importing their profile from GitHub.

Note

For the purpose of this chapter, we will store information about the developers in memory, which means that, after the page is refreshed, we'll lose all the data stored during the session.

The application will have the following views:

  • A list of all the developers.
  • A view for adding or importing new developers.
  • A view that shows the given developer's details. This view has two subviews:
    • Basic details: Shows the name of the developer and their GitHub avatar if available.
    • Advanced profile: Shows all the details known of the developer.

The end result of the application's home page will look as follows:

Developing the "Coders repository" application

Figure 1

Note

In this chapter, we will build only a few of the listed views. The rest of the application will be explained in Chapter 7, Explaining Pipes and Communicating with RESTful Services.

Each developer will be an instance of the following class:

// ch6/ts/multi-page-template-driven/developer.ts
 
export class Developer { 
  public id: number; 
  public githubHandle: string; 
  public avatarUrl: string; 
  public realName: string; 
  public email: string; 
  public technology: string; 
  public popular: boolean; 
}

All the developers will reside within the DeveloperCollection class:

// ch6/ts/multi-page-template-driven/developer_collection.ts 

class DeveloperCollection { 
  private developers: Developer[] = [];
 
  getUserByGitHubHandle(username: string) { 
    return this.developers 
            .filter(u => u.githubHandle === username) 
            .pop(); 
  }
 
  getUserById(id: number) { 
    return this.developers 
             .filter(u => u.id === id) 
             .pop(); 
  }
 
  addDeveloper(dev: Developer) { 
    this.developers.push(dev); 
  }
 
  getAll() { 
    return this.developers; 
  } 
}

The classes mentioned here encapsulate a simple business logic and don't have anything Angular-specific, so we won't get into any details.

Now, let's continue with the implementation by exploring the new router.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset