Chapter 12. Developing the blockchain client in Angular


This chapter covers

  • Reviewing the code of the blockchain web client in Angular
  • How to run an Angular client that communicates with a 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 these are two different projects now, with separate package.json files, whereas in chapter 10, these directories were part of the same project. In real-world apps, the front- and backend 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. The only difference is that the implementation of the frontend was completely rewritten in Angular. Let’s see this app in action.


You may want to review chapter 10 to refresh your memory of the functionality of the blockchain client and messaging server.

12.1. Launching the Angular blockchain app

The code of this app consists of the messaging server and the web client. 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 http://localhost:3000.” Keep the server running while you start the client.

12.2. Reviewing AppComponent

12.3. Reviewing TransactionFormComponent

12.4. Reviewing the BlockComponent

12.5. Reviewing services