chapter twelve

12 Developing the blockchain client in Angular

 

This chapter covers:

  • The code review of the blockchain web client in Angular
  • How to run the Angular client that communicates with the WebSocket server

In this chapter, we’ll review a new version of the blockchain app where the client portion is written in Angular. The source code is located in two directories: client and server. But if in chapter 10 these directories were part of the same project, now they are two different projects with separate package.json files. In real-world apps, the front and back end apps typically are separate projects.

The code of the messaging server is the same as in chapter 10, and the functionality of this version of the blockchain app is the same as well, but the implementation of the front end was completely re-written in Angular. Let’s see this app in action.

Tip

You may want to re-read chapter 10 to refresh in memory the functionality of the blockchain client and messaging server.

To start the server, open the Terminal window in the server directory, run npm install to install the server’s dependencies and then run the npm start command. You’ll see the message Listening on localhost:3000. Keep the server running while we’re starting the client.

12.1  Reviewing AppComponent

12.2  Reviewing TransactionFormComponent

12.3  Reviewing the BlockComponent

12.4  Reviewing services

12.5  Summary